Vue项目使用Echarts

项目使用的echarts版本是 4.2.1，element-resize-detector版本是1.2.4

配置属性option是官方示例的“堆叠图”属性

图表组件：

<template>
  <div>
    <div id="chartMain" style="height:380px;width:100%;padding-bottom: 30px;"/>
  </div>
</template>

<script>
  // 按需引入 引入 ECharts 主模块
  import chartResize from "@/modules/supplierMap/views/supplierPortrait/components/chartResize";

  let echarts = require('echarts/lib/echarts')
  // 引入柱状图
  require('echarts/lib/chart/bar')
  // 引入提示框和标题组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/legend')
  export default {
    name: "histogramChart",
    mixins:[chartResize],
    props: {
      // 父组件传递过来的图表数据
      chartData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        // Echarts实例
        chart: null,
        chartDom:null
      }
    },
    watch: {
      /* 如果图表数据是后台获取的，监听父组件中的数据变化，重新触发Echarts */
      chartData: {
        deep: true,
        handler(val) {
          this.setOptions(val)
        }
      }
    },
    mounted() {
      /* 图表初始化 */
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      /* 释放图表实例 */
      this.chart.dispose()
      /* dispose 会释放内部占用的一些资源和事件绑定，但是解除实例的引用我们是做不到的，所以需要重新赋值为null */
      this.chart = null
    },
    methods: {
      initChart() {
        this.chartDom = document.getElementById('chartMain');
        this.chart = echarts.init(this.chartDom);
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: 'Direct',
              type: 'bar',
              emphasis: {
                focus: 'series'
              },
              data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
              name: 'Email',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: 'Union Ads',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: 'Video Ads',
              type: 'bar',
              stack: 'Ad',
              emphasis: {
                focus: 'series'
              },
              data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
              name: 'Search Engine',
              type: 'bar',
              data: [862, 1018, 964, 1026, 1679, 1600, 1570],
              emphasis: {
                focus: 'series'
              },
              markLine: {
                lineStyle: {
                  type: 'dashed'
                },
                data: [[{ type: 'min' }, { type: 'max' }]]
              }
            },
            {
              name: 'Baidu',
              type: 'bar',
              barWidth: 5,
              stack: 'Search Engine',
              emphasis: {
                focus: 'series'
              },
              data: [620, 732, 701, 734, 1090, 1130, 1120]
            },
            {
              name: 'Google',
              type: 'bar',
              stack: 'Search Engine',
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 290, 230, 220]
            },
            {
              name: 'Bing',
              type: 'bar',
              stack: 'Search Engine',
              emphasis: {
                focus: 'series'
              },
              data: [60, 72, 71, 74, 190, 130, 110]
            },
            {
              name: 'Others',
              type: 'bar',
              stack: 'Search Engine',
              emphasis: {
                focus: 'series'
              },
              data: [62, 82, 91, 84, 109, 110, 120]
            }
          ]
        };
        this.setOptions(option)
      },
      setOptions(option) {
        this.chart.setOption(option)
      }
    }
  }
</script>

<style scoped>

</style>

chartResize.js让图表根据容器自适应大小

/** @format */

import ResizeListener from 'element-resize-detector';
export default {
    methods: {
        /* 对chart元素尺寸进行监听，当发生变化时同步更新echart视图 */
        chartEleResizeListener() {
            const chartInstance = ResizeListener({
                strategy: 'scroll',
                callOnAdd: true
            });
            chartInstance.listenTo(this.$el, () => {
                if (!this.chart) return;
                this.chart.resize();
            });
        },

        /* 当窗口缩放时，echart动态调整自身大小 */
        windowResizeListener() {
            if (!this.chart) return;
            this.chart.resize();
        }
    },
    mounted() {
        window.addEventListener('resize', this.windowResizeListener);
        this.chartEleResizeListener();
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.windowResizeListener);
    }
}

对了，这次项目使用图表我其实浪费了挺多时间的，之前不知道这个项目用过echarts，自己以前做的vue项目也没用过图表，React项目用过的Bizcharts在vue又用不了，所以就网上搜了一下。有推荐v-charts的，真的看到它就快跑，如果我事先多了解一下，就会发现这个的文档极其“简洁”，示例也很少，像我这种菜鸟是玩不会的。然后就想用echarts，（因为听说过很多次，之前react也想过用，不过那时候觉得Bizcharts使用起来更简单，没记错应该是按照官方文档傻瓜式操作就可以上手了），然后网上也有很多博文讲怎么在vue项目中引入包下载依赖，但是我看到的很多都是echarts和vue-echarts一起使用的！我们项目vue是2.x，echarts是4.2.1，应该是版本很老了吧，按照其他博文的方法下载vue-echarts，就会报各种错，我搞了好久，报错层出不穷，其中一个报错原因，有篇博文说是因为echarts和vue-echarts版本不匹配，echarts版本太低。最后我就放弃了。我一开始以为vue-echarts就是我想用的echarts，但后来发现并不是。所以搞不来那些花里胡哨的就不搞了，咱就用echarts不香吗？反正我觉得echarts好用，官方文档很完备，配置属性一目了然，甚至觉得比Bizcharts还好用，当初用Bizcharts搞好久都没搞明白那些属性。