Vue 2.x折腾记 - (7) 写一个挺不靠谱的Vue-Echarts组件

前言

上基友社区看了下,发现对echarts的封装都是打包进去的,想想就还是算了。

图表这货.说实在的,若不是整个系统大量用到,打包进去没必要。

CDN是个好东西,我们完全可以写一个异步加载JS然后封装按需调用。

至于你能学到什么,见仁见智了，若有所收获就是我这文章的意义所在了 。

效果图

实现思路及实现的功能

• 异步引入echarts,有三个版本,不是最大也不是最小那个,具体上官网看
• 图表的销毁释放内存
• 图表跟随父包含块自适应(事件监听)
• setOption的抽离,图表实例化id随机生成或者手动传入
• setOption可以一次性传入整个图表的参数,也可以拆分传入(太多,只选了几个复用率很高选项的)…都设置了默认值.
• 随机id是大写字母的组合,外部有传入则用外部的

代码

实现Vue.use(?)

index.js – 导出组件的,内部实在亮瞎眼

import echarts from "./echarts";

// Vue.use必须有install这个函数..可能我这里写的比较粗糙..有兴趣的可以去完善
// 用是可以正常使用的
export default {
  install: function(Vue, Option) {
    Vue.component("vue-echarts", echarts);
  }
};

echarts.vue

<template>
  <div class="vue-echarts" :id="id" :style="style">
  div>
template>

<script>
  export default {
    name: 'vue-echarts',
    data: function () {
      return {
        loadJS: '', // 存储异步加载echart的promise状态
        chart: '', // 保存地图初始化的实例
      }
    },
    props: {
      id: {
        type: String,
        default: function () { // 生成一个随机字符串,纯英文的,当不传入ID的时候生成实例,加i确保不会随机到一样的
          let temp = [];
          for (let i = 0; i < 6; i++) {
            let randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 19) + i);
            temp.push(randomChar);

          }
          return temp.reduce((pre, next) => pre + next);
        }
      },
      height: { // 图表高度
        type: String,
        default: '300px'
      },
      width: { // 图表宽度
        type: String,
        default: '100%'
      },
      legend: { // 以下的配置都是echarts官方图表的自定义部分,我拆分这么几大块
        type: Object,
        default: function () {
          return {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
          }
        }
      },
      title: {
        type: Object,
        default: function () {
          return {
            text: '堆叠区域图'
          }
        }
      },
      tooltip: {
        type: [Array, Object],
        default: function () {
          return {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              },
              animation: true
            }
          }
        }
      },
      toolbox: {
        type: Object,
        default: function () {
          return {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          }
        }
      },
      grid: {
        type: Object,
        default: function () {
          return {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          }
        }
      },
      xAxis: {
        type: [Array, Object],
        default: function () {
          return [
            {
              type: 'category',
              boundaryGap: true,
              data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']

            }
          ]
        }
      },
      yAxis: {
        type: [Array, Object],
        default: function () {
          return [
            {
              type: 'value'
            }
          ]
        }
      },
      series: {
        type: [Array, Object],
        default: function () {
          return [
            {
              name: '曝光',
              type: 'line',
              smooth: true,
              lineStyle: {
                normal: {
                  color: '#f00',
                }
              },
              data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 120]
            },
            {
              name: '点击',
              type: 'line',
              smooth: true,
              lineStyle: {
                normal: {
                  color: '#20a0ff',
                }
              },
              data: [220, 182, 191, 234, 290, 330, 310, 120, 132, 101, 134, 90, 120]
            },
            {
              name: '点击率',
              type: 'line',
              lineStyle: {
                normal: {
                  color: '#42b983',
                }
              },
              smooth: true,
              data: [150, 232, 201, 154, 190, 330, 410, 120, 132, 101, 134, 90, 120]
            }
          ]
        }
      },
      setOption: {
        type: Object
      },
      dispose: Boolean

    },
    computed: {
      style () {
        return {
          height: this.height,
          width: this.width
        }
      }
    },
    created () {
      this.loadJS = this.loadEchartsJS();
    },
    mounted () {
      this.loadJS.then(() => {
        let st = setTimeout(() => {
           this.init(); // CDNJS加载后,元素渲染后,初始化图表
        }, 300);
      }).catch(err => {
        console.log('echarts js加载失败');
      });
    },
    beforeDestroy () {
      window.removeEventListener('resize', this.chart.resize)
      if (this.chart) {
        this.chart.dispose(); // 销毁图表实例
      }
    },
    methods: {
      init () { // 初始化图表
        this.chart = new echarts.init(document.getElementById(this.id));
        this.chart.setOption(this.setOption);
        window.addEventListener('resize', this.chart.resize) // 图表响应大小的关键,重绘
      },
      loadEchartsJS () { // 异步请求cdnjs
        const CDNURL = 'https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js';
        return new Promise((resolve, reject) => {
          const script = document.createElement('script');
          script.type = "text/javascript";
          script.id = "cdnEchart";
          if (script.readyState) {  //IE
            script.onreadystatechange = function () {
              if (script.readyState == "loaded" ||
                script.readyState == "complete") {
                script.onreadystatechange = null;
                resolve('success: ' + CDNURL);
              }
            };
          } else {  //Others
            script.onload = function () {
              resolve('success: ' + CDNURL);
            };
          }
          script.onerror = function () {
            reject(Error(CDNURL + 'load error!'));
          };

          script.src = CDNURL;
          if (!document.getElementById('cdnEchart')) {
            document.head.appendChild(script);
          }

        });
      }
    },
    watch: {
      setOption: {
        handler: function (newVal, oldVal) { // 监听外部传入的值,渲染新的的图表数据
          if (this.chart) {
            if (newVal) {
              this.chart.setOption(newVal);
            } else {
              this.chart.setOption(oldVal);
            }
            this.chart.resize();
          } else {
            setTimeout(() => {
              this.init();
            }, 300);
          }
        },
        deep: true
      }
    }
  }
script>

如何使用

• main.js – 主入口文件,

// promise的polyfill
require("es6-promise").polyfill(); 
// 百度图表
import echarts from './components/common/echarts';
Vue.use(echarts);

总结

好吧,写这个东西花了一下午的时间,从构思到去查echarts api到实现;

粗糙的版本已经诞生,可能还有可以优化的地方,只能待我以后发现了再做调整了.

有更好的实现方案和思路的可以往下面留言。