echarts实现堆叠柱状图

1、引入echarts并在main.js中全局安装

• npm install echarts --save
• 在main.js中全局注册

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

2、用echarts绘制一个堆叠柱状图

// html
<div id="main" ref="echarts" class="mt-40" v-show="!noData"></div>;

// js
let _xAxis = ["创意审核", "金点子", "情报传递", "新闻发布", "内容审核"];
console.log(JSON.stringify(_xAxis));
let _series = [
  {
    name: "已审核",
    type: "bar",
    stack: "check",
    data: [],
    itemStyle: {
      normal: {
        color: "#3272ae"
      }
    }
  },
  {
    name: "未审核",
    type: "bar",
    stack: "check",
    data: [],
    // 设置
    itemStyle: {
      normal: {
        color: "#e0e0e0"
      }
    }
  }
];
_series[0].data = [200, 100, 80, 100, 200, 300];
_series[1].data = [200, 100, 80, 100, 200, 300];
// 绘制图表
var myChart = this.$echarts.init(this.$refs.echarts);
// 绘制图表
myChart.setOption({
  title: {},
  tooltip: {},
  xAxis: {
    data: _xAxis
  },
  yAxis: {},
  series: _series
});

• 展示结果

注意事项：设置柱状图颜色必须使用itemStyle对象