层级柱图

Vue2使用echarts生成图中样式的图表

html部分

<div
    style="width: 1250px; height: 370px; padding: 0 20px"
    ref="chartsthisyear">
</div>

渲染方法

initBarLine3() {
      let myChart = echarts.init(this.$refs.chartsthisyear);
      let data1 = [65, 55, 55, 50, 48, 65, 55, 55, 50, 48, 65, 55, 55, 50];
      let data2 = [15, 35, 35, 30, 28, 55, 45, 35, 20, 38, 45, 45, 35, 20];
      let data3 = [
        125, 135, 125, 110, 148, 165, 155, 155, 150, 148, 165, 155, 155, 150,
      ];
      let data4 = [
        115, 125, 115, 100, 128, 125, 125, 135, 120, 128, 125, 115, 135, 110,
      ];

      let dataline = [164.79, 72.55];
      let option;
      option = {
        animation: true,
        animationDuration: 5000,
        xAxis: [
          {
            type: "category",
            data: [
              "武汉",
              "荆州",
              "黄石",
              "宜昌",
              "襄阳",
              "孝感",
              "荆门",
              "黄冈",
              "鄂州",
              "咸宁",
              "十堰",
              "随州",
              "恩施",
              "神农架",
            ],

            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                width: 2,
              }, 
            },
            axisLabel: {
              show: true,
              color: "#fff",
              fontSize: 20,
              interval: 0,
            },
            axisTick: {
              show: false,
            },
          },
          {
            show: false,
            type: "category",
            data: ["", "", "", "", "", "", "", "", "", "", "", "", "", ""],
          }
        ],
        grid: {
          top: "12%",
          left: "8%",
          bottom: "12%",
          right: "8%",
        },
        legend: {
          data: ["增长率", "上年本月累计", "上年当月", "上月累计", "本月"],
          textStyle: {
            fontSize: 20, //字体大小
            color: "#fff", //字体颜色
          },
          right: 10,
          itemWidth: 28,
          itemHeight: 14,
        },
         yAxis: [
          {
            name: "单位: 亿千瓦时",
            type: "value",
            nameGap: "14",
            nameTextStyle: {
              //y轴上方单位的颜色
              color: "#d7980a",
              fontSize: 20,
            },
            // max: 100,
            axisLabel: {
              show: true,
              interval: 0, // 使x轴文字显示全
              color: "#fff",
              fontSize: 20,
            },
              axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                width: 2,
              } //隐藏y轴
            },
            axisTick: {
              show: false, // 是否显示坐标轴刻度
            },
            splitLine: {
              //分割线配置
              show: true,
              lineStyle: {
                color: "#213965",
              },
            },
          },
          {
            type: "value",
            // max: 100,
            // minInterval: 1,
            splitLine: {
              show: false, // 不显示网格线
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
                width: 2,
              }, //隐藏y轴
            },
            axisLabel: {
              show: true,
              // interval: 0, // 使x轴文字显示全
              color: "#fff",
              fontSize: 20,
              formatter: "{value}%", //y轴数值，带百分号
            },
            axisTick: {
              show: false, // 是否显示坐标轴刻度
            }
          }

        ],
        series: [
          {
            name: "增长率",
            type: "line",
            yAxisIndex: 1,
            symbol: "circle",
            symbolSize: 10,
             itemStyle: {
              color: "#22fd23",
              lineStyle: {
                width: 3, //设置线条粗细
              }
            },
            data: dataline,
          },
          {
            z: 2,
            name: "上年本月累计",
            type: "bar",
            data: data2,
            itemStyle: {
              borderWidth: 8,
              borderColor: "rgba(164,114,43,0)",
              borderRadius: [5, 5, 0, 0],
              color: "#ffa800",
            },
            xAxisIndex: 0,
            barWidth: 18, //柱子宽度
          },
            {
            z: 1,
            name: "上年当月",
            type: "bar",
            barWidth: 18,
            xAxisIndex: 1,
            itemStyle: {
              borderWidth: 4,
              borderRadius: [9, 9, 0, 0],
              borderColor: "rgba(14,92,140,1)",
              color: "#38eca5",
            },
            data: data1,
          },
          {
            z: 2,
            name: "上月累计",
            type: "bar",
            barWidth: 18,
            barGap: 0,
            xAxisIndex: 0,
            itemStyle: {
              borderWidth: 8,
              borderRadius: [5, 5, 0, 0],
              borderColor: "rgba(164,114,43,.0)",
              color: "#017eff",
            },
            data: data4,
          },
          {
            z: 1,
            name: "本月",
            type: "bar",
            barGap: 0,
            barWidth: 18,
            xAxisIndex: 1,
            itemStyle: {
              borderWidth: 4,
              borderRadius: [9, 9, 0, 0],
              borderColor: "rgba(164,114,43,1)",
              color: "#7ecdf4",
            },
            data: data3,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }