vue中封装echarts公共组件过程

定义图表公共样式是为了统一同一网站各页面图表的基础样式baseOption.js（轴线、区域、色系、字体），统一封装后页面需要直接引入，传入所需参即可覆盖基础样式。

以下示例封装图表组件Echart.vue。

1、安装echarts

npm install echarts --save
npm install lodash --save  // 若已安装请忽略

2、在mian.js中全局引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

3、下面开始封装图表

baseOption.js文件：公共样式定义，为了统一同网站各种图表的基础样式，比如轴线、图各板块颜色，值仅供参考）：

// baseOption.js
export default {
  color: [
    "#0067E1",
    "#0CC1FF",
    "#00D1B3",
    "#85E814",
    "#FFA082",
  ],
  tooltip: {},
  legend: {
    orient:'horizontal',
    type:'scroll',
    pageIconSize:12,
    pageIconColor:'#aaa', 
    pageIconInactiveColor :'#2f4554',
    pageTextStyle:{
      color:'#999999'
    },
    itemWidth:20,
    itemHeight:12,
    top:0,
    textStyle:{
      color:'#999999'
    },
  },
  grid: {
    top: "13%",
    left: "3%",
    right: "10%",
    bottom: "2%",
    containLabel: true,
  },
  xAxis: [
    {
      axisLine: {
        lineStyle: {
          color: "rgba(65, 97, 128, 0.15)",
          // type: "dashed",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval:0,
        color: "#rgba(0, 0, 0, 0.25)",
        textStyle: {
          fontSize: 10,
        }
      },
      nameTextStyle:{
        color:'#999999',
        fontSize: 10,
      },
    },
  ],
  yAxis: [
    {
      axisLabel: {
        color: "#rgba(0, 0, 0, 0.25)",
        textStyle: {
          fontSize: 11,
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(65, 97, 128, 0.15)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(65, 97, 128, 0.15)",
        },
      },
      axisTick: {
        show: false,
      },
      nameTextStyle:{
        color:'#999999',
        fontSize: 10,
        padding:[0,20,0,0]
      },
      minInterval: 1
    },
  ],
};

Echart.vue文件：图本身组件

// Echart.vue
<template>
 <div :id="elId" style="height:100%,width:100%" />
</template>

<script>
import echarts from "echarts";
import { merge, debounce } from "lodash";
// 引入公共样式
import baseOption from "./baseOption"
export default {
 data() {
  return {
   elId: "",
   vOption: {
    series: [],
   },
  };
 },
 props: {
  optionData: Object,
 },
 computed: {
  // 合并配置对象
  option() {
   return merge({}, baseOption, this.vOption, this.optionData);
  },
 },
 created() {
  this.elId = this.uuid();
 },
 mounted() {
  // 实例化echarts对象
  this.$nextTick(() => {
   this.initChart();
  });
 },
 beforeDestroy() {
  if (!this.chart) {
   return;
  }
  this.chart.dispose();
  this.chart = null;
 },
 watch: {
  optionData: {
   deep: true,
   handler: function() {
    this.$nextTick(() => {
     this.initChart();
    });
   },
  },
 },
 methods: {
  // 生成唯一uuid做为唯一标识符
  uuid() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
     v = c == "x"  r : (r & 0x3) | 0x8;
    return v.toString(16);
   });
  },
  // 绘图
  initChart() {
   if(!document.getElementById(this.elId)) return
   this.chart = echarts.init(document.getElementById(this.elId));
   this.chart.setOption(this.option);
   const that = this;
   window.addEventListener(
    "resize",
    debounce(() => {  // 引入debounce，防止频繁更改浏览页尺寸出现页面抖动
     if (that.chart) {
      that.chart.resize();
     }
    }, 100)
   );
  },
 },
};
</script>

4、接下来只需要在需要显示图表的地方引入Echart.vue

传入目标数据就可以了，以下示例数据为饼图：

// index.vue
<template>
  <div class="chartBox">
    <Chart :optionData="chartData"></Chart>
  </div>
</template>

<script>
// 引入Echart.vue组件
import Chart from "./Echart.vue";
export default {
  components: {
    Chart,
  },
  data() {
    return {
      // 图目标数据
      chartData: {
      	tooltip: {
          show:true,
          trigger:'item',
          formatter: "{b} : {c} ({d}%)",
        },
        xAxis: [{ show: false }],
        yAxis: [{ show: false }],
        series: [
          {
            name: "访问来源",
            type: "pie", // 饼图
            radius: ["30%", "45%"], // 饼图大小
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
          },
        ],
      },
    };
  },
};
</script>

此时好看的饼图就出现啦~~

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。