Vue2+Echarts-堆叠柱状图

ECharts是什么

ECharts 是一个用于数据可视化的开源 JavaScript 库。它可以帮助您创建各种各样的交互式图表，包括折线图、柱状图、饼图、散点图、热力图、地图等。ECharts 是基于百度的一个开源项目，它的功能强大，使用方便，并且支持各种流行的浏览器。

效果

参考

参考中文文档
参考B站视频
ECharts 官网图例

安装

1、由于vue-echarts依赖composition，所以需要先安装composition

npm i -D @vue/composition-api

2、安装echarts

npm install echarts

3、安装vue-echarts

npm install vue-echarts

安装vue-echarts安装报错的话，看一下报错日志，安装日志提示就能解决。

引入

在main.js全局引入

import ECharts from 'vue-echarts'
Vue.component('ECharts', ECharts)

使用

在Html中

 <e-charts :option="option"></e-charts>

在computed中

computed: {
    option() {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          // 横坐标 - 日期
          data: ['2021-1-1','2021-1-2','2021-1-3','2021-1-4']
        },
        yAxis: {},
        series: [
          {
            name: '本地库存',
            data: [100,244,266],
            type: 'bar',
            stack: 'x'
          },
          {
            name: '本地锁库存',
            data: [44,23,54],
            type: 'bar',
            stack: 'x'
          },
          {
            name: '待交付量',
            data: [22,354,12],
            type: 'bar',
            stack: 'x'
          }
        ]
      }
      return option
    }
  }

在option里面写死的数据可以从data中通过计算获得。