echarts通用柱形图

echarts通用柱形图

效果如下:

<div class="linechartbox">
  <div
    ref="lineChart1"
    id="lineChart1"
    class="lineChart1"
    style="height: 100%; width: 100%"
  ></div>
</div>

getData() {
      const myChart = echarts.init(this.$refs.lineChart1);
      const option = {
        tooltip: {
         trigger: 'axis',
        },
        legend: {
          textStyle: {
            fontSize: 14, //字体大小
            color: "#ffffff", //字体颜色
          },
          data: ["当月", "上年", "增速"],
        },
         grid: {
          show: true,
          left: "10%",
          top: "15%",
          right: "10%",
          bottom: "13%",
        },
        xAxis: {
          data: [
            "项目1",
            "项目2",
            "项目3",
            "项目4",
            "项目5",
            "项目6",
          ],
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#ffffff",
            },
          },
          axisLine: {
            show: true,
            // 坐标轴轴线样式设置
            lineStyle: {
              color: "#335B7E",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#335B7E",
              },
            },

            axisLabel: {
              //y轴文字的配置
              textStyle: {
                color: "#ffffff",
              },
            },
            axisLine: {
              show: true,
              // 坐标轴轴线样式设置
              lineStyle: {
                color: "#335B7E",
              },
            },
          },
          {
            type: "value",
            splitLine: {
              show: false,
            },
            axisLabel: {
              formatter: "{value} %",
              //y轴文字的配置
              textStyle: {
                color: "#ffffff",
              },
            },
            axisLine: {
              show: true,
              // 坐标轴轴线样式设置
              lineStyle: {
                color: "#335B7E",
              },
            },
          },
        ],
        series: [
          {
            name: "上年",
            type: "bar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(239,54,54,1)" },
                  { offset: 1, color: "rgba(184,0,0,0)" },
                ]),
              },
            },
            label: {
              normal: {
                show: false,
                color: "red",
                position: "top",
              },
            },
            barWidth: "18",
            data: [10, 52, 200, 334, 390, 330],
          },
          {
            name: "当月",
            type: "bar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "rgba(0,170,191,1)" },
                  { offset: 1, color: "rgba(0,170,191,0)" },
                ]),
              },
            },
            label: {
              normal: {
                show: false,
                color: "red",
                position: "top",
              },
            },
            barWidth: "18",
            data: [10, 52, 200, 334, 390, 330],
          },
          {
            name: "增速",
            type: "line",
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#FFAC28", //改变折线点的颜色
                lineStyle: {
                  color: "#FFAC28", //改变折线颜色
                  type: "dashed",
                },
              },
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + " °C";
              },
            },
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
          },
        ],
      };

      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },