目录

echarts组件

在各个echarts组件里引入

以one.vue组件为例
import * as echarts from "echarts";

接收父组件的数据

  props: {
    data: {
      type: Array,
      default () {
        return [];
      },
    },
    yAxis: {
      type: Array,
      default () {
        return [];
      },
    },
  },

初始化实例

initCharts () {
      this.$nextTick(() => {
        this.charts = echarts.init(this.$refs.barChart);
        this.charts.clear();
        this.setOption();
      });
    },

绘制图表

setOption () {
      const option = this.getOption();
      this.charts.setOption(option, true);
    },
    getOption () {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: '10',
          top: '150',
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: ['70%', '100%'],//圆环的大小
          center: ['50%', '50%'],//圆环的位置
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '20',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: this.data
        }]
      };
      return option;
    },

父组件

在要显示的页面引入echarts组件，以APP.VUE为例

    <div class="chart_content">
      <div>横向柱状图</div>
      //双向绑定数据
      <chartOne :data="data_val" :yAxis="yAxis"></chartOne>
    </div>

引入封装好的eharts组件

import chartOne from './components/chart/one.vue'
import chartTwo from './components/chart/two.vue'
import chartThree from './components/chart/three.vue'
import chartFour from './components/chart/four.vue'

在data输入数据

resize.js

窗口缩放事件

// 按钮权限判断指令
const resize = {
  inserted: (el, binding, vNode) => {
    // 指令的绑定值，是一个function函数
    const callback = binding.value
    // 延时执行函数的毫秒数
    const debounce = binding.arg || 200

    // 禁止执行与事件关联的默认动作
    const options = binding.modifiers || { passive: true }

    let debounceTimeout = null
    const onResize = () => {
      clearTimeout(debounceTimeout)
      debounceTimeout = setTimeout(callback, debounce, options)
    }
    // 监听窗口缩放
    window.addEventListener('customResize', onResize, options)
    window.addEventListener('resize', onResize, options)
    // 存储监听窗口缩放事件的参数，方便在unbind钩子函数中解除事件绑定的时候使用到
    el._onResize = {
      onResize,
      options
    }
  },
  unbind (el, binding) {
    const { onResize, options } = el._onResize;
    window.removeEventListener('customResize', onResize, options)
    window.removeEventListener('resize', onResize, options)
    delete el._onResize
  }
};
export default resize;

index.js

import resize from './resize';
const importDirective = Vue => {
  /**
   * 容器大小变化回调 v-resize='function'
   * code 按钮编号
   */
  Vue.directive('resize', resize);
};

export default importDirective;

main.js

import Vue from 'vue'
import App from './App.vue'
import importDirective from "./components/directive";


Vue.use(importDirective)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

参考：blog.csdn.net/Bright2017/…