vue项目中封装echarts的优雅方式分享

|-- src
    |-- components
        |-- chart
            |-- index.vue    // 图表单文件组件，供界面调用
            |-- index.js    // 实现自动化导入options里的图表option
            |-- options    // 存放各种图表的option
                |-- bar    // 随便一例子
                    |-- index.js
    |-- views
        |-- chartTest    // 实例所在
            |-- index.vue
            |-- index.sCSS
            |-- index.js
|-- main.js    // 全局引入echarts图表

<template>
  <div class="chart">
    <div ref="chart" :style="{ height: height, width: width }" />
  </div>
</template>
<script>

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import {
  BarChart
} from 'echarts/charts'
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
  CanvasRenderer
} from 'echarts/renderers'

// 注册必须的组件
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
)

export default {
  name: 'ChartView',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartOption: {
      type: Object,
      required: true
    },
    type: {
      type: String,
      default: 'canvas'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartOption: {
      deep: true,
      handler(newVal) {
        this.setOptions(newVal)
      }
    }
  },
  mounted() {
    this.initChart()
    if (this.autoResize) {
      window.addEventListener('resize', this.resizeHandler)
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    if (this.autoResize) {
      window.removeEventListener('resize', this.resizeHandler)
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    resizeHandler() {
      this.chart.resize()
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart, '', {
        renderer: this.type
      })
      this.chart.setOption(this.chartOption)
      this.chart.on('click', this.handleClick)
    },
    handleClick(params) {
      this.$emit('click', params)
    },
    setOptions(option) {
      this.clearChart()
      this.resizeHandler()
      if (this.chart) {
        this.chart.setOption(option)
      }
    },
    refresh() {
      this.setOptions(this.chartOption)
    },
    clearChart() {
      this.chart && this.chart.clear()
    }
  }
}
</script>

const modulesFiles = require.context('./options', true, /index.js$/)
let modules = {}
modulesFiles.keys().forEach(item => {
  modules = Object.assign({}, modules, modulesFiles(item).default)
})
export default modules

const testBar = (data) => {
  const defaultConfig = {
    xAxis: {
      type: 'cateGory',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }]
  }

  const opt = Object.assign({}, defaultConfig)
  return opt
}

export default {
  testBar
}

import eChartFn from '@/components/chart/index.js'
import ChartPanel from '@/components/chart/index.vue'
Vue.component(ChartPanel.name, ChartPanel)
Vue.prototype.$eChartFn = eChartFn

<chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" height="100%" />

export default {
  name: 'chartTestView',
  data() {
    return {
      chartOpt: {}
    }
  },
  mounted() {},
  created() {
    this.chartOpt = this.$eChartFn.testBar()
  },
  methods: {
  },
  watch: {}
}

|-- src
    |-- components
        |-- chart
            |-- options    // 存放各种图表的option
                |-- pie    // pie例子
                    |-- index.js
    |-- views
        |-- chartTest    // 实例所在
            |-- index.vue
            |-- index.scss
            |-- index.js

this.chartOpt2 = this.$eChartFn.getPieChart([100, 23, 43, 65], ['#36CBCB', '#FAD337', '#F2637B', '#975FE4'])

<chart-view class="chart-content" :chart-option="chartOpt2" :auto-resize="true" :play-highlight="true" height="100%" />
复制代码

|-- src
    |-- components
        |-- chart
            |-- index.js    // 实现自动化导入options里的图表option

 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var app = {};
        option = {
            title:{
                text:'饼图程序调用高亮示例',
                left:'center'
            },
            tooltip:{
                trigger:'item',
                fORMatter:'{a}
{b}:{c}{d}%'
            },
            legend:{
                orient:'vertical', //图例列表的布局朝向。'horizontal''vertical'
                left:'left',
                data:['直接访问','邮件营销','联盟广告','视频广告','搜素引擎']
            },
            series:[
                {
                    name:'访问来源',
                    type:'pie',
                    radius:'55%',
                    center:['50%','60%'],
                    data:[
                        {value:335,name:'直接访问'},
                        {value:310,name:'邮件营销'},
                        {value:234,name:'联盟广告'},
                        {value:135,name:'视频广告'},
                        {value:1548,name:'搜索引擎'},
                    ],
                    emphasis:{
                        itemStyle:{
                            shadowBlur:10,
                            shadowOffsetX:0,
                            shadowColor:'rgba(0,0,0,0.5)'
                        }
                    }
                }
            ]
        };
        
        app.currentIndex = -1;
        setInterval(() => {
            var dataLen = option.series[0].data.length;
            //取消之前高亮的图形
            myChart.dispatchAction({
                type:'downplay',
                seriesIndex:0,
                dataIndex:app.currentIndex
            });
            app.currentIndex = (app.currentIndex + 1) % dataLen;
            //高亮当前图形
            myChart.dispatchAction({
                type:'highlight',
                seriesIndex:0,
                dataIndex:app.currentIndex
            });
            //显示tooltip
            myChart.dispatchAction({
                type:'showTip',
                seriesIndex:0,
                dataIndex:app.currentIndex
            })
        }, 1000);
        option && myChart.setOption(option);
    </script>