The data structure of the rendering this.state.workChartList
const workChartList = [
{
name: "居民热线", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 9, 5, 4, 7] },
{
name: "日常调度类", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 8, 7, 3, 6] },
{
name: "调度预警类", chartData: [6, 8, 8, 7, 4, 6, 6, 9, 6, 8, 5, 3] },
{
name: "抢维修类", chartData: [1, 2, 3, 1, 4, 5, 6, 3, 9, 7, 8, 7] },
{
name: "物质申请类", chartData: [5, 8, 8, 7, 0, 5, 6, 5, 9, 5, 4, 7] },
{
name: "其他类", chartData: [5, 6, 8, 8, 5, 8, 5, 9, 8, 7, 6, 0] },
];
The key to the option related code is每个serise需要设置同样的stack属性
var colorList = ["#72fbfd", "#56c2f9", "#2e69e9", "#7a23f5", "#8082f7", "#ab4399"];
const xData = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow' },
backgroundColor: "#030e2d",
borderColor: "#030e2d",
textStyle: {
fontSize: "12px",
color: "#96A4F4",
},
},
color: colorList,
legend: {
left: "center",
itemWidth: 10,
itemHeight: 10,
textStyle: {
fontSize: "12px",
color: "#96A4F4",
padding: [3, 0, 0, 0],
},
},
grid: {
left: 20,
bottom: 20,
top: 30,
right: 20,
},
xAxis: {
name: "\n\n(月)",
type: "category",
nameTextStyle: {
color: "#7089ba",
fontSize: "10px"
},
nameGap: -9,
axisLabel: {
interval: 0,
textStyle: {
color: "#7089ba",
fontSize: "10px"
},
margin: 6, //刻度标签与轴线之间的距离。
},
axisLine: {
lineStyle: {
color: "#414965",
},
},
axisTick: {
show: false,
},
data: xData,
},
yAxis: {
type: "value",
axisLabel: {
textStyle: {
color: "#7089ba",
fontSize: "10px",
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "#414965",
opacity: 0.3,
},
},
},
series: [],
};
if (!this.state.workChartList) return;
const seriesItem = this.state.workChartList;
seriesItem.map((item, index) => {
option.series.push({
name: item.name,
type: "bar",
stack: "总数",
barWidth: '50%',
label: {
show: false,
position: "insideRight",
},
data: item.value,
itemStyle: {
normal: {
label: {
show: false, //开启显示
position: "top", //在上方显示
textStyle: {
//数值样式
color: "#fff",
fontSize: "12px",
fontWeight: 100,
},
},
},
},
});
});
this.Chart_init2 = echarts.init(this.Chart_dom2.current);
this.Chart_init2.clear();
this.Chart_init2.setOption(option);