1. Achievement effect
The left side is the category and quantity, the middle is similar to the progress bar, and the right side is the percentage. 2. The
realization idea
is that the x-axis is not displayed, and the axisLabel of the y-axis uses rich text to display the machine and the number; the chart has two data groups, Indicated by blue and gray respectively, the two columns overlap, and the gray column is below the blue column; the label of the gray column uses rich text to display the proportion.
3. Realize the code
(1) Write a container in the template
<div class="chartStyle" ref="chartImplement"></div>
Define the size of the container in style
.chartStyle {
height: 300px;
width: 700px;
}
(2) Declare a variable in data
myChartLine:'',
Write a function to configure the chart in methods. The input parameter is dataAll, which contains information such as the type, quantity, and proportion of the machine tool. The data format is
dataAll = { dataX: dataX,//category dataY: dataY,//quantity dataSum: dataSum,//total dataPercent: dataPercent,//proportion }
initSchedule(dataAll) {
let _this = this;
this.myChartLine = echarts.init(this.$refs.chartImplement)
let myColor = ['#3C83FF']
var option = {
grid: {
// 直角坐标系内绘图网格
left: '25%', //grid 组件离容器左侧的距离,
//left的值可以是80这样具体像素值，
//也可以是'80%'这样相对于容器高度的百分比
right: '15%',
//containLabel: true //gid区域是否包含坐标轴的刻度标签。为true的时候，
// left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
//所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
},
xAxis: {
//直角坐标系grid中的x轴,
//一般情况下单个grid组件最多只能放上下两个x轴,
//多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
type: 'value', //坐标轴类型,分别有：
//'value'-数值轴；'category'-类目轴;
//'time'-时间轴;'log'-对数轴
splitLine: {
show: false
}, //坐标轴在 grid 区域中的分隔线
axisLabel: {
show: false
}, //坐标轴刻度标签
axisTick: {
show: false
}, //坐标轴刻度
axisLine: {
show: false
}, //坐标轴轴线
},
yAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
color: 'rgba(0,0,0,.7)',
fontSize: 14,
formatter: function(data) {
var traceValue;
for (var i = 0; i < dataAll.dataX.length; i++) {
if (data === dataAll.dataX[i]) {
traceValue = dataAll.dataY[i]
break
}
}
var arr = [
'{a|' + data + '}',
'{b|' + traceValue + '}',
'{c|台}'
]
return arr.join('')
},
textStyle: {
rich: {
a: {
fontSize: 14,
width: 100
},
b: {
fontSize: 14,
align: 'center',
color: '#3C83FF',
fontWeight: 600,
},
c: {
padding: [0, 0, 0, 5],
fontSize: 14,
align: 'center',
}
}
},
},
data: dataAll.dataX //类目数据，在类目轴（type: 'category'）中有效。
//如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
},
series: [ //系列列表。每个系列通过 type 决定自己的图表类型
{
name: '%', //系列名称
type: 'bar', //柱状、条形图
barWidth: 15, //柱条的宽度,默认自适应
data: dataAll.dataPercent, //系列中数据内容数组
label: {
//图形上的文本标签
show: true,
position: 'right', //标签的位置
offset: [0, -40], //标签文字的偏移，此处表示向上偏移40
//formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
formatter: function(data) {
//.toFixed(0)去掉小数位，如果为2就是保留两位小数
//let b = data.percent.toFixed(0) + "%";
//subText = b;
return '';
},
color: 'rgba(0,0,0,.7)', //标签字体颜色
fontSize: 26 //标签字号
},
itemStyle: {
//图形样式
normal: {
//normal 图形在默认状态下的样式;
//emphasis图形在高亮状态下的样式
barBorderRadius: 10, //柱条圆角半径,单位px.
//此处统一设置4个角的圆角大小;
//也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
color: function(params) {
let num = myColor.length; //得到myColor颜色数组的长度
return myColor[params.dataIndex % num]; //返回颜色数组中的一个对应的颜色值
},
}
},
zlevel: 1 //柱状图所有图形的 zlevel 值,
//zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
},
{
name: '进度条背景',
type: 'bar',
label: {
//图形上的文本标签
show: true,
position: 'right', //标签的位置
offset: [0, 0], //标签文字的偏移，此处表示向上偏移40
//formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
formatter: function(data) {
//.toFixed(0)去掉小数位，如果为2就是保留两位小数
var traceValue;
for (var i = 0; i < dataAll.dataX.length; i++) {
if (data.name === dataAll.dataX[i]) {
traceValue = dataAll.dataPercent[i]
break
}
}
var arr = [
'{a|' + traceValue + '}',
'{b|%}'
]
return arr.join('');
},
textStyle: {
rich: {
a: {
fontSize: 14,
color: 'rgba(0,0,0,0.7)',
fontWeight: 560,
padding: [0, 0, 0, 15],
},
b: {
fontSize: 14,
color: 'rgba(0,0,0,0.7)',
padding: [0, 0, 0, 3],
align: 'center',
},
}
},
},
barGap: '-100%', //不同系列的柱间距离，为百分比。
// 在同一坐标系上，此属性会被多个 'bar' 系列共享。
// 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
//并且是对此坐标系中所有 'bar' 系列生效。
barWidth: 15,
data: dataAll.dataSum,
color: '#DEE0E3', //柱条颜色
itemStyle: {
normal: {
barBorderRadius: 10
}
}
},
]
};
this.myChartLine.setOption(option, true);
window.addEventListener("resize", () => {
if (this.myChartLine) {
this.myChartLine.resize();
}
});
},
(3) Call this function
Here, it is assumed that there are 100 machines, initialize the data
initData() {
var dataX = ['旋耕机1', '旋耕机2', '旋耕机3', '旋耕机4', '旋耕机5']
var dataY = ['30', '20', '15', '25', '10'];
var dataPercent = ['30', '20', '15', '25', '10'];
var dataSum = new Array(dataX.length).fill(100);
var data = {
dataX: dataX,
dataY: dataY,
dataSum: dataSum,
dataPercent: dataPercent,
}
this.initSchedule(data);
},
Call initData in mounted
mounted() {
this.initData();
},
Finish