vue+echarts双柱状图渐变色

 一、效果图

 

 二、代码

<div id="main" style="width: 100%; height: 200px"></div>

​
methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "1%",
          right: "1%",
          top: "20%",
          bottom: "2%",
          containLabel: true,
        },
        legend: {
          icon: "rect", //形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 18, // 设置宽度
          itemHeight: 4, // 设置高度
          itemGap: 20, // 设置间距
          data: ["户", "人"],
          textStyle: {
            //文字样式
            color: "#333333",
            fontSize: "14",
          },
          left: "0%",
        },
        xAxis: [
          {
            type: "category",
            data: ['一','二','三','四','五'],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              show: false, //不显示坐标轴轴线
            },
            axisTick: {
              show: false, //不显示坐标轴刻度
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            // name: "单位：(°C)",
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: [
          {
            name: "户",
            type: "bar",
            barWidth: "20%",
            data: [3,6,5,9,5],
            // 柱子渐变色
            itemStyle: {
              normal: {
                barBorderRadius: [3, 3, 0, 0],// 柱子圆角
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "#FFDCAD" },
                  { offset: 0, color: "#FFA215" },
                ]),
              },
            },
          },
          {
            name: "人",
            type: "bar",
            barWidth: "20%",
            data: [7,5,2,1,6],
            itemStyle: {
              normal: {
                barBorderRadius: [3, 3, 0, 0],
                // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐变。
                // offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#5683FC" },
                  { offset: 1, color: "#8FB9FE" },
                ]),
              },
            },
          },
        ],
        label: {
          show: true, //开启显示
          position: "top", //在上方显示
          textStyle: {
            //数值样式
            color: "#333",
            fontSize: "10",
          },
        },
      });
      window.addEventListener("resize",function (){
        myChart.resize();
      });
    },
  },
  //调用
  mounted() {
     this.drawLine();
  },

有问题可以留言，看到会回复 ！！！