1. Effect drawing
2. Code implementation
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
let xAxisData = ['X'];
let data1 = [192.35];
let data2 = [1.09];
let data3 = [43.75];
let data4 = [45.09];
let data5 = [109.9];
let data6 = [11.66];
let data7 = [173.79];
let data8 = [283.37];
var emphasisStyle = {
itemStyle: {
shadowBlur: 10,
shadowColor: 'rgba(0,0,0,0.3)'
}
};
option = {
legend: {
data: ['A', 'B', 'C', 'D', 'E', 'F'],
top: '50%',
right: 0,
width: 10
},
tooltip: {
},
xAxis: {
data: xAxisData,
axisLine: {
onZero: true,
lineStyle: {
color: '#D5D5D5'
}
},
axisTick: {
show: false },
splitLine: {
show: false },
splitArea: {
show: false }
},
yAxis: {
show: false
},
grid: {
bottom: 100
},
color: [
'rgb(56,160,255)',
'rgb(52,204,203)',
'rgb(150,94,227)',
'rgb(248,212,54)',
'',
'rgb(64,149,229)',
'rgb(147,210,243)',
'#fff'
],
series: [
{
name: 'A',
type: 'bar',
barWidth: 100,
stack: 'one',
label: {
show: true,
color: '#fff'
},
emphasis: emphasisStyle,
data: data1
},
{
name: 'B',
type: 'bar',
stack: 'one',
label: {
show: true,
color: '#fff'
},
emphasis: emphasisStyle,
data: data2
},
{
name: 'C',
type: 'bar',
stack: 'one',
label: {
show: true,
color: '#fff'
},
emphasis: emphasisStyle,
data: data3
},
{
name: 'D',
type: 'bar',
stack: 'one',
label: {
show: true,
color: '#fff'
},
emphasis: emphasisStyle,
data: data4
},
{
name: '合计1',
type: 'bar',
stack: 'one',
label: {
show: true,
color: '#333',
position: 'top',
formatter: function (params) {
return '合计1' + data8[0];
}
},
emphasis: emphasisStyle,
data: [0]
},
{
name: 'E',
type: 'bar',
barWidth: 100,
barGap: '50%',
stack: 'two',
label: {
show: true,
color: '#fff'
},
emphasis: emphasisStyle,
data: data5
},
{
name: 'F',
type: 'bar',
stack: 'two',
label: {
show: true,
color: '#fff'
},
emphasis: emphasisStyle,
data: data6
},
{
name: 'G',
type: 'bar',
stack: 'two',
label: {
show: true,
color: '#333'
},
itemStyle: {
borderColor: 'rgb(147,210,243)',
borderType: 'dashed'
},
emphasis: emphasisStyle,
data: data7
},
{
name: '合计2',
type: 'bar',
stack: 'two',
label: {
show: true,
color: '#333',
position: 'top',
formatter: function (params) {
return '合计2' + data7[0];
}
},
emphasis: emphasisStyle,
data: [0]
}
]
};
option && myChart.setOption(option);
3. Key points
(1) Add a piece of data (an object) to the series to identify the total, in which the values of the data array are all 0
(2) In the object, the formatter of the label attribute returns the total value that needs to be displayed.