VUE封装中Echarts公共组件（直接cv大法使用）

1.安装依赖 npm install echarts --save

2.考虑到代码体积这里采用按需引入,在工具文件夹中创建echarts.js文件（这里引入需要的图表）

![A848F1Q_S1VOHBDPJISD}B.png

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'

/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { PieChart, BarChart } from 'echarts/charts'

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components'

// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers'

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent,
  BarChart
])

// 导出
export default echarts

3.在main.js中引入挂载（这样就可以使用$echarts）

// 引入echarts
import echarts from './utils/echarts'
// 挂载到vue实例中
Vue.prototype.$echarts = echarts

4.封装公共成组件（在components中创建MyCharts.vue）

<template>
  <div :id='id' :style="style"></div>
</template>

<script>
export default {
  props: {
    height: {
      type: String,
      default: '218px'
    },
    width: {
      type: String,
      default: '402px'
    },
    id: {
      type: String,
      default: 'main'
    },
    options: {
      type: Object,
      default: null
    }
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById(this.id))
    // 绘制图表
    this.myChart.setOption(this.options)
    window.addEventListener('resize', () => {
      if (this.myChart) {
        this.myChart.resize()
      }
    })
  }
}
</script>

<style>
</style>

5.在需要用到的父组件中引入公共组件，配置option和组件中使用

// 引入
import MyPieCharts from '../../components/MyCharts.vue'
// 在下方注册
 components: {
    MyPieCharts
  }
 //data中配置option
 data() {
    return {
      // 图表内容
      // 饼图2
      option2: {
        title: {
          text: '车辆型号分布(辆)',
          left: '24px',
          top: '24px',
          textStyle: {
            fontSize: '14px',
            fontFamily: 'PingFangSC-Medium',
            fontWeight: '500',
            color: '#262626'
          }
        },

        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: '15%',
          icon: 'circle',
          top: '50%',
          itemWidth: 10,
          itemHeight: 10
        },
        color: ['#2C68FF', '#3DA8FF', '#27D1D0 '],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['35%', '55%'],
            // 饼图位置参数
            center: ['40%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            label: {
              show: false,
              position: 'center',
              // color: '#4c4a4a',
              formatter:
                '{total|' + this.total + '}' + '\n\r' + '{active|车辆总数}',
              rich: {
                total: {
                  fontSize: '16px',
                  fontFamily: 'Helvetica Neue Bold',
                  fontWeight: 'bold',
                  color: '#262626'
                },
                active: {
                  fontSize: '12px',
                  fontFamily: 'PingFangSC-Regular',
                  fontWeight: '400',
                  color: '#8C8C8C'
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Model 3' },
              { value: 500, name: 'Model X' },
              { value: 200, name: 'Model Y' }
            ]
          }
        ]
      }  
    }
  },
/>

 // 组件中注册
  <MyPieCharts id="pieChart2" :options="option2" width="2.7917rem" height="1.5139rem"