Echarts--不同颜色的柱状图

1.安装

npm install echarts --save

2.引用

const Echarts = require('echarts')

3.使用

<div class="bar-echarts" ref="barChart"></div>

getBarCharts() {
      let barChart = ECharts.init(this.$refs.barChart);
      let barOption = {
        color: ["#89A7F8", "#595EE4", "#4576E9", "#FC9C62", "#7BC071"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          icon: "rect",
          fontSize: 12,
          color: "#333",
          itemWidth: 9,
          itemHeight: 9,
          itemGap: 20,
          data: this.legend,
          textStyle: {
            padding: [15, 0, 0, 0]
          },
          x: "9%",
          y: "bottom"
        },
        grid: {
          left: "0%",
          right: "6%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#545454",
              fontSize: 12
            }
          },
          axisLine: {
            lineStyle: {
              color: "#BEBEBE",
              width: 1
            }
          },
          data: this.barMonth
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              color: "#E9E9E9",
              type: "dashed"
            }
          },
          axisLabel: {
            formatter: "¥{value}",
            textStyle: {
              fontSize: 12,
              color: "#545454"
            }
          }
        },
        series: this.barSeries
        //  [
        //     {
        //         name: '分润小精灵',
        //         type: 'bar',
        //         stack: 'total',
        //         label: {
        //             show: true
        //         },
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         data: [320, 302, 301, 334, 390, 330, 320]
        //     },
        //     {
        //         name: '电子合同签约',
        //         type: 'bar',
        //         stack: 'total',
        //         label: {
        //             show: true
        //         },
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         data: [120, 132, 101, 134, 90, 230, 210]
        //     },
        //     {
        //         name: '实名认证',
        //         type: 'bar',
        //         stack: 'total',
        //         label: {
        //             show: true
        //         },
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         data: [220, 182, 191, 234, 290, 330, 310]
        //     },
        //     {
        //         name: '基础短信服务',
        //         type: 'bar',
        //         stack: 'total',
        //         label: {
        //             show: true
        //         },
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         data: [150, 212, 201, 154, 190, 330, 410]
        //     },
        //     {
        //         name: '客服坐席',
        //         type: 'bar',
        //         stack: 'total',
        //         label: {
        //             show: true
        //         },
        //         emphasis: {
        //             focus: 'series'
        //         },
        //         data: [820, 832, 901, 934, 1290, 1330, 1320]
        //     }
        // ]
      };
      barChart.setOption(barOption);
    }