基于vue2定义自己的图表echart组件

先安装echarts cnpm i echarts -S,然后定义父组件

然后是子组件

这样就可以引入echart了，不过这里有一个问题就是不同的图配置不一样，而且我们肯很多地方都用到，所以我们要把配置也就是option里面的东西提出来作为公共的部分，这里以柱状图的配置为例：先新建一个options.js文件，文件代码如下：

export default {
  data() {
    return {
      // 暴露出公共配置
      barOption: {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value'
        }],
        series: [{
          name: '直接访问',
          type: 'bar',
          barWidth: '60%',
          data: [10, 52, 200, 334, 390, 330, 220]
        }]
      }
    }
  },
  methods: {
    // 深度拷贝对象或者数组
    clone(obj) {
      return JSON.parse(JSON.stringify(obj));
    }
  }
}

这时候只需要在需要的地方引入这个配置就可以，父文件修改如下

这里只是介绍了柱状图的配置，其他的如热力图，饼图等配置一样方法，可以将所有配置写在一个文件也可以每种图写一个文件好区分，个人爱好，以上