快捷導(dǎo)航

vue中封裝echarts公共組件過程

更新時間：2022年05月27日 11:58:48 作者：朵朵和太陽

這篇文章主要介紹了vue中封裝echarts公共組件過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

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文件：公共樣式定義，為了統(tǒng)一同網(wǎng)站各種圖表的基礎(chǔ)樣式，比如軸線、圖各板塊顏色，值僅供參考）：

// 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做為唯一標(biāo)識符
? ? 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，防止頻繁更改瀏覽頁尺寸出現(xiàn)頁面抖動
? ? ? ? ? if (that.chart) {
? ? ? ? ? ? that.chart.resize();
? ? ? ? ? }
? ? ? ? }, 100)
? ? ? );
? ? },
? },
};
</script>

4、接下來只需要在需要顯示圖表的地方引入Echart.vue

傳入目標(biāo)數(shù)據(jù)就可以了，以下示例數(shù)據(jù)為餅圖：

// 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 {
      // 圖目標(biāo)數(shù)據(jù)
      chartData: {
      	tooltip: {
          show:true,
          trigger:'item',
          formatter: " : {c} (wppm3vysvbp%)",
        },
        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: "聯(lián)盟廣告" },
              { value: 300, name: "視頻廣告" },
            ],
          },
        ],
      },
    };
  },
};
</script>

此時好看的餅圖就出現(xiàn)啦~~