实现echarts数据堆叠柱状图,并自定义每个类目柱形的颜色

实现echarts数据堆叠柱状图,并自定义每个类目柱形的颜色_第1张图片
关键点:series.stack: “”, 同个类目轴上系列配置相同的stack值可以堆叠放置。
具体实现

series: [
          {
            name: "绿灯",
            type: "bar",
            stack: "total",
            emphasis: {
              focus: "series",
            },
            data: [95, 90, 80, 65, 60, 50, 50, 30, 20, 10],
            itemStyle: {//自定义颜色
              normal: { color: "#14ee14" },
            },
          },
          {
            name: "黄灯",
            type: "bar",
            stack: "total",
            emphasis: {
              focus: "series",
            },
            data: [3, 5, 10, 10, 10, 20, 10, 30, 15, 10],
            itemStyle: {
              normal: { color: "yellow" },
            },
          },
          {
            name: "红灯",
            type: "bar",
            stack: "total",
            emphasis: {
              focus: "series",
            },
            data: [1, 1, 3, 15, 10, 20, 10, 20, 25, 5],
            itemStyle: {
              normal: { color: "#dd1818" },
            },
          },
          {
            name: "关灯",
            type: "bar",
            stack: "total",
            emphasis: {
              focus: "series",
            },
            data: [1, 4, 7, 10, 20, 10, 20, 20, 40, 75],
            itemStyle: {
              normal: { color: "#d3dfe6" },
            },
          },
        ],

你可能感兴趣的:(echarts,vue)