效果：
data变量配置：
// 正负柱状图
zhengfuZhu: {},
data1: [],
data2: [],
data3: [],
data4: [],
xAxisData1: [],//横轴刻度
seriesLabel: { //柱子上的字体
show: false,
position: 'outside',
color: '#BEC3EB',
},
seriesEmphasis: { //
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0,0,0,0.3)'
}
},
seriesBarWidth: 17,//设置柱子粗细
seriesYears: ['2022', '2023'],
seriesColors: ['#4A86DE', '#ECE058', '#23C16D', '#F4AB67'], // 设置柱子颜色html:
<div class="byn_box">
<div id="lineEcharts" style="width:400px;height:300px"></div>
</div>methods:
drawLine(){
this.zhengfuZhu = {
legend: {
data: [`${this.seriesYears[0]}计划完成任务`, `${this.seriesYears[0]}实际完成任务`,
`${this.seriesYears[1]}计划完成任务`, `${this.seriesYears[1]}实际完成任务`],
right: '10%',
icon: 'circle',
textStyle: {
color: ' #BEC3EB',
fontSize: 13
},
itemWidth: 12, // 设置宽度
itemHeight: 12, // 设置高度
itemGap: 15,
formatter: function (value) {
return value
},
},
tooltip: {
formatter: function (params) {
var value = params.value;
//首先要看看params是怎样的数据结构，里面有什么内容;
if (value < 0) {
value = -value
}
return params.seriesName + '：' + value + ''
}
},
xAxis: {
data: this.xAxisData1,
splitArea: { show: false },
axisLabel: {
textStyle: {
color: '#BEC3EB',
fontSize: 13
},
},
},
yAxis: [
{
type: 'value',
splitNumber: 10,
splitLine: {
show: true, lineStyle: {
color: '#6469A1',
width: 1,
type: 'solid'
}
},
axisLabel: {
formatter: function (value) {
// Function formatter
if (value < 0) {
value = -value
} else {
value = value
}
return value + ''
},
textStyle: {
color: ' #BEC3EB',
fontSize: 13
},
},
}],
grid: {
bottom: 25,
top: 35,
right: 0
},
series: [
{
name: `${this.seriesYears[0]}计划完成任务`,
type: 'bar',
stack: 'one',
label: this.seriesLabel,
emphasis: this.seriesEmphasis,
data: this.data1,
barWidth: this.seriesBarWidth,
itemStyle: {
// 柱状图颜色
color: this.seriesColors[0]
}
},
{
name: `${this.seriesYears[0]}实际完成任务`,
type: 'bar',
label: this.seriesLabel,
stack: 'two',
emphasis: this.seriesEmphasis,
barWidth: this.seriesBarWidth,
data: this.data3,
itemStyle: {
// 柱状图颜色
color: this.seriesColors[1]
}
},
{
name: `${this.seriesYears[1]}实际完成任务`,
type: 'bar',
label: this.seriesLabel,
stack: 'one',
emphasis: this.seriesEmphasis,
data: this.data2,
barWidth: this.seriesBarWidth,
itemStyle: {
// 柱状图颜色
color: this.seriesColors[2]
}
},
{
name: `${this.seriesYears[1]}计划完成任务`,
type: 'bar',
label: this.seriesLabel,
stack: 'two',
emphasis: this.seriesEmphasis,
barWidth: this.seriesBarWidth,
data: this.data4,
itemStyle: {
// 柱状图颜色
color: this.seriesColors[3]
}
},
],
}
var myChart2 = echarts.init(document.getElementById('lineEcharts'));
myChart2.setOption(this.zhengfuZhu);
}在mounted获取数据并调用：
mounted() {
for (let i = 0; i < 12; i++) {
this.xAxisData1.push(i + 1 + "月");
this.data1.push(+(Math.random() * 200).toFixed(2));
this.data3.push(+(Math.random() * 500).toFixed(2));
this.data2.push(-(Math.random() + 300).toFixed(2));
this.data4.push(-(Math.random() + 100).toFixed(2));
}
this.drawLine();
}
