柚子快報激活碼778899分享：echarts實現(xiàn)正負軸柱狀圖
效果：?
?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,//設(shè)置柱子粗細
seriesYears: ['2022', '2023'],
seriesColors: ['#4A86DE', '#ECE058', '#23C16D', '#F4AB67'], // 設(shè)置柱子顏色
html:
methods:
drawLine(){
this.zhengfuZhu = {
legend: {
data: [`${this.seriesYears[0]}計劃完成任務(wù)`, `${this.seriesYears[0]}實際完成任務(wù)`,
`${this.seriesYears[1]}計劃完成任務(wù)`, `${this.seriesYears[1]}實際完成任務(wù)`],
right: '10%',
icon: 'circle',
textStyle: {
color: ' #BEC3EB',
fontSize: 13
},
itemWidth: 12, // 設(shè)置寬度
itemHeight: 12, // 設(shè)置高度
itemGap: 15,
formatter: function (value) {
return value
},
},
tooltip: {
formatter: function (params) {
var value = params.value;
//首先要看看params是怎樣的數(shù)據(jù)結(jié)構(gòu)，里面有什么內(nèi)容;
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]}計劃完成任務(wù)`,
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]}實際完成任務(wù)`,
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]}實際完成任務(wù)`,
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]}計劃完成任務(wù)`,
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獲取數(shù)據(jù)并調(diào)用：
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();
}
柚子快報激活碼778899分享：echarts實現(xiàn)正負軸柱狀圖
參考文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Catch捕獲出海
