控制刻度线和标签对齐
yAxis: {
type: 'category',
data: usersName,
axisLabel: {
padding: [0, 0, 0, 10],
formatter: function (value: string, index: number) {
return value.split('(')[0];
},
},
axisTick: {
alignWithLabel: true
interval: 5
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
crossStyle: {
color: '#999'
}
}
},
series: [
{
name: 'PV量',
type: 'line',
tooltip: {
valueFormatter: function (value) {
return `${(value as number)}`;
}
},
data: pvData,
itemStyle: {
normal: {
label: { show: true }
}
}
},
]
单x轴
import React from "react";
import ReactEcharts from 'echarts-for-react';
function getCharts(data) {
if(!data.details||!data.details[0]){
return;
}
if(Object.keys(data.details[0])==0){
return
}
let xAxisData = data.details.map(item => {
return item.product
})
let standardDatas = data.standardData&&data.standardData.map((item,index)=>{
return {
name:xAxisData[index],
value:item
};
})
let lineData=[{
type: 'line',
data: !data.standardData?[]:data.standardData,
lineStyle:{
color:'red',
width: 1,
opacity:0.3
},
itemStyle:{
color:'red',
opacity:0.3,
width:0.5
}
}];
let barData= !data.details[0] ? [] : Object.keys(data.details[0]).filter((item, index) => index !== 0).map((item) => {
return {
type: 'bar',
label: {
show: true,
position: 'top',
textStyle: {
color: '#000',
fontSize: Object.keys(data.details[0]).length>8?6:10
},
rich: {
red: {
color:'red',
fontSize: Object.keys(data.details[0]).length>8?6:10
},
green: {
color:'green',
fontSize: Object.keys(data.details[0]).length>8?6:10
}
},
formatter: (params) => {
let str = params.value[params.dimensionNames[params.encode.y[0]]];
if(data.standardData){
if(standardDatas.find(item=>item.name==params.name).value>str){
return `{red|${str}%}`
}else{
return `{green|${str}%}`;
}
}
if(data.standard&&Object.keys(data.details[0]).filter((item, index) => index !== 0).length==1){
if(data.standard>str){
return `{red|${str}%}`
}
if(data.standard<str){
return `{green|${str}%}`
}
}
if(data.standard&&Object.keys(data.details[0]).filter((item, index) => index !== 0).length>1){
if(data.title=='优良中差'||data.title=='已到达优良中差'){
if(data.standard>str&¶ms.seriesName=='优良率'){
return `{red|${str}%}`
}
if(data.standard<str&¶ms.seriesName=='优良率'){
return `{green|${str}%}`
}
}
return `${str}%`;
}
return `${str}%`
},
},
markLine: {
silent: true,
symbol: ['none', 'none'],
label: {
position: 'insideEndBottom',
formatter: (params) => {
return `${data.standard}%`
},
},
lineStyle: {
color: 'red',
width: 1,
type: 'solid',
},
data: !data.standard ? [] : [
{
yAxis: data.standard
},
],
}
}
})
let option = {
title: {
text: data.title,
textStyle: {
fontSize: 14,
},
x : 'center'
},
toolbox: {
feature: {
saveAsImage: {show: true}
}
},
color: ['rgb(167,188,217)', 'rgb(187,208,237)', 'rgb(125,164,220)', 'rgb(69,121,204)', 'rgb(24,55,106)', 'rgb(24,30,106)', 'rgb(139,177,172)', 'rgb(87,208,237)', 'rgb(125,64,220)', 'rgb(169,121,204)', 'rgb(24,155,106)', 'rgb(124,30,106)', 'rgb(139,89,72)', 'rgb(187,242,237)', 'rgb(125,164,32)', 'rgb(25,64,32)'],
legend: {
bottom: 0,
left: 'center'
},
grid: {
left: "50px",
right: "10px"
},
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,.8)',
textStyle: {
color: '#000',
fontSize: 12
},
padding: 10,
formatter: (params) => {
let tip = `<p style="font-size: 16;font-weight: bold;">${params[0].name}</p>`;
params.forEach(item=>{
tip += `${item.marker}${'line'==item.seriesType ? item.name : item.seriesName}：${'line'==item.seriesType?(item.value):item.value[item.dimensionNames[item.encode.y[0]]]}%<br/>`
})
return tip
}
},
dataset: {
dimensions: Object.keys(data.details[0]),
source: data.details
},
xAxis: [
{
type: 'category',
data: xAxisData,
axisTick: {
length: 0
},
axisLine: {
lineStyle: {
color: "rgb(219,219,219)"
}
},
axisLabel: {
color: "#000",
formatter: (params) => {
return params
}
},
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
value: 'value',
min: 0,
max: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
formatter: (value) => `${value}%`
},
splitLine: {
show: false
}
},
],
series: lineData.concat(barData)
};
return (
<ReactEcharts option={option} notMerge={true} style={{ height: "400px" }}></ReactEcharts>
);
}
export default getCharts;
不均分双x轴
import React from "react";
import ReactEcharts from 'echarts-for-react';
function getSpecialDoublexCharts(data) {
if(Object.keys(data).length==0){
return;
}
let seriesData = data.typeName.map((item,i)=>{
let arr = [];
let length = data.typeName.length;
switch(i){
case 0:
arr =data.data.filter((item,index)=>index%length==0);
break;
case 1:
arr =data.data.filter((item,index)=>index%length==1);
break;
case 2:
arr =data.data.filter((item,index)=>index%length==2);
break;
case 3:
arr =data.data.filter((item,index)=>index%length==3);
break;
}
return {
name: item,
type: 'bar',
data: data.typeName.length==1?data.data.map(element=>{
if(typeof(element)=='string'){
return Number(element.substring(0,element.lastIndexOf('-')))
}
return element
}):arr.map(element=>{
if(typeof(element)=='string'){
return Number(element.substring(0,element.lastIndexOf('-')))
}
return element
}),
label: {
show: true,
position: 'top',
textStyle: {
color: '#000',
fontSize: 8
},
rich: {
red: {
color:'red',
fontSize: 8
},
green: {
color:'green',
fontSize: 8
}
},
formatter: (params) => {
if(data.typeName.length==1){
if(typeof(data.data[params.dataIndex])=='string'){
return "↑"==data.data[params.dataIndex].substring(data.data[params.dataIndex].lastIndexOf('-')+1)?`{red|${Number(data.data[params.dataIndex].substring(0,data.data[params.dataIndex].lastIndexOf('-')))}}`:`{green|${Number(data.data[params.dataIndex].substring(0,data.data[params.dataIndex].lastIndexOf('-')))}}`
}
return `${params.value}`
}else{
if(typeof(arr[params.dataIndex])=='string'){
return "↑"==arr[params.dataIndex].substring(arr[params.dataIndex].lastIndexOf('-')+1)?`{red|${Number(arr[params.dataIndex].substring(0,arr[params.dataIndex].lastIndexOf('-')))}}`:`{green|${Number(arr[params.dataIndex].substring(0,arr[params.dataIndex].lastIndexOf('-')))}}`
}
return `${params.value}`
}
},
},
xAxisIndex: 0,
yAxisIndex: 0
}
});
data.productsName.forEach((item) => {
seriesData.push({
data: [{
name: item,
value: 1
}],
label: {
show: true,
formatter: (params) => {
let str = '';
str=params.name.substring(0,params.name.lastIndexOf('-'));
return `${str.substring(0,str.indexOf('('))}\n${str.substring(str.indexOf('('))}`;
},
offset: [0, 30],
textStyle: {
color: '#000',
fontSize: 10,
},
},
itemStyle: {
color: 'transparent',
borderColor: 'rgb(219,219,219)',
borderRightWidth: 1
},
type: 'bar',
barGap: 0,
barWidth: `${item.substring(item.lastIndexOf('-')+1)/data.caseName.length*100}%`,
xAxisIndex: 1,
yAxisIndex: 1
})
})
let option = {
title: {
text: data.title,
textStyle: {
fontSize: 14,
},
x : 'center'
},
toolbox: {
feature: {
saveAsImage: {show: true}
}
},
color: ['rgb(167,188,217)', 'rgb(187,208,237)', 'rgb(125,164,220)', 'rgb(69,121,204)', 'rgb(24,55,106)', 'rgb(24,30,106)', 'rgb(139,177,172)', 'rgb(87,208,237)', 'rgb(125,64,220)', 'rgb(169,121,204)', 'rgb(24,155,106)', 'rgb(124,30,106)', 'rgb(139,89,72)', 'rgb(187,242,237)', 'rgb(125,164,32)', 'rgb(25,64,32)']', 'rgb(69,121,204)'],
legend: {
show: data.typeName.length!==1,
bottom: 10,
left: 'center',
data: data.typeName
},
grid: [{
bottom: 160,
left: "50px",
right: "10px"
}, {
height: 100,
bottom: 60,
left: "50px",
right: "10px"
}],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,.8)',
textStyle: {
color: '#000',
fontSize: 12
},
formatter: (params) => {
let tip = '';
tip += params[0].name + '<br/>';
params && params.forEach(item => {
tip += item.marker + item.seriesName + "：" + `${item.value?item.value+'%':'无ETA时长，暂不做对比'}`+ '<br/>'
})
return tip;
}
},
xAxis: [{
type: 'category',
data: data.caseName,
axisTick: {
length: 0
},
axisLine: {
lineStyle: {
color: "rgb(219,219,219)"
}
},
axisLabel: {
color: "#000",
fontSize: 9,
rotate:90,
formatter: (params) => {
return params;
}
},
axisPointer: {
type: 'shadow'
},
zlevel: 2
},
{
type: 'category',
gridIndex: 1,
axisLine: {
show: false
},
zlevel: 1
},
],
yAxis: [{
value: 'value',
min: 0,
max: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
formatter: (value) => `${value}%`
},
splitLine: {
show: false
}
},
{
type: 'value',
gridIndex: 1,
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}
],
series: seriesData
};
return ( <ReactEcharts option = { option } notMerge={true} style = {{ height: "400px" }} > </ReactEcharts>
);
}
export default getSpecialDoublexCharts;
三x轴
import React from "react";
import ReactEcharts from 'echarts-for-react';
function getSpecialThreeXCharts(data) {
if (Object.keys(data).length == 0) {
return;
}
let arr = data.data.map(item=>item.split('-')[0]);
let seriesData = [{
type: 'bar',
data: arr,
label: {
show: true,
position: 'top',
textStyle: {
color: '#000',
fontSize: arr.length>28?6:8
},
rich: {
red: {
color:'red',
fontSize: arr.length>28?6:8
},
green: {
color: 'green',
fontSize: arr.length>28?6:8
}
},
formatter: (params) => {
let arr=data.data[params.dataIndex].split('-');
return arr[1] ? isNaN(arr[1]) ? '↓'==arr[1].substring(0,1) ? `{red|${arr[1]}}\n${Number(arr[0])}%`: `{green|${arr[1]}}` : `${Number(arr[0])}%` : ''
},
},
xAxisIndex: 0,
yAxisIndex: 0
}];
data.productsName.forEach((item, index) => {
seriesData.push({
data: [{
name: item,
value: 1
}],
label: {
show: true,
formatter: (params) => {
return params.name.substring(0,item.lastIndexOf('-'))
},
offset: [0, 50],
textStyle: {
color: '#000',
fontSize: 16,
},
},
itemStyle: {
color: 'transparent',
borderColor: 'rgb(219,219,219)',
borderRightWidth: 1
},
type: 'bar',
barGap: 0,
barWidth: `${item.substring(item.lastIndexOf('-')+1)/data.typeName.length*100}%`,
xAxisIndex: 2,
yAxisIndex: 1
})
})
let option = {
title: {
text: data.title,
textStyle: {
fontSize: 14,
},
x : 'center'
},
toolbox: {
feature: {
saveAsImage: {show: true}
}
},
color: ['rgb(167,188,217)', 'rgb(187,208,237)', 'rgb(125,164,220)', 'rgb(69,121,204)', 'rgb(24,55,106)', 'rgb(24,30,106)', 'rgb(139,177,172)', 'rgb(87,208,237)', 'rgb(125,64,220)', 'rgb(169,121,204)', 'rgb(24,155,106)', 'rgb(124,30,106)', 'rgb(139,89,72)', 'rgb(187,242,237)', 'rgb(125,164,32)', 'rgb(25,64,32)'],
grid: [{
bottom: 200,
left: "50px",
right: "10px"
}, {
height: 150,
bottom: 50,
left: "50px",
right: "10px"
}],
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,.8)',
axisPointer: {
type: 'none'
},
textStyle: {
color: '#000',
fontSize: 12
},
formatter: (params) => {
return `${params[0].name.substring(0, params[0].name.length - 1)}:${params[0].value}%`;
}
},
xAxis: [{
type: 'category',
data: data.caseName,
axisTick: {
length: 0
},
axisLine: {
lineStyle: {
color: "rgb(219,219,219)"
}
},
axisLabel: {
color: "#000",
fontSize: 8,
rotate: 90,
formatter: (params) => {
return params;
}
},
axisPointer: {
type: 'shadow'
},
zlevel: 3
},
{
type: 'category',
data: data.typeName.map(item => {
return {
value: item,
textStyle: {
fontSize: 10,
}
}
}),
position: 'bottom',
axisTick: {
length: 100,
lineStyle: {
color: "rgb(219,219,219)"
}
},
splitArea: {
show: false,
},
axisLine: {
show: false
},
axisLabel: {
color: "#000",
margin: 75,
interval:0,
formatter:(params)=>{
var str = "";
var num = 2;
var valLength = params.length;
var rowNum = Math.ceil(valLength / num);
if(rowNum > 1) {
for(var i = 0; i < rowNum; i++) {
var temp = "";
var start = i * num;
var end = start + num;
temp = params.substring(start, end) + "\n";
str += temp;
}
return str;
} else {
return params;
}
}
},
zlevel: 2
},
{
type: 'category',
gridIndex: 1,
axisLine: {
show: false
},
zlevel: 1
},
],
yAxis: [{
value: 'value',
min: 0,
max: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
formatter: (value) => `${value}%`
},
splitLine: {
show: false
}
},
{
type: 'value',
gridIndex: 1,
axisLabel: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
}
}
],
series: seriesData
};
return ( < ReactEcharts option = { option } notMerge={true} style = { { height: "400px" } }> </ReactEcharts>
);
}
export default getSpecialThreeXCharts;
