echart 在vue项目里的封装

下面的是组件里的代码 文件目录为

 echarts / index.vue 代码为：

<template>
  <div class="rc-chart"></div>
</template>
<script>
import elementResizeDetectorMaker from 'element-resize-detector'
import  * as echarts from "echarts"
import comOption from './options.js'
import { mapGetters } from "vuex";

let eChart = null;
export default {
  name: "e-chart",
  props: {
    option: null,
    type: null,
  },
  data() {
    return {
      eChart:null
    };
  },
  watch: {
    option: {
      handler(val, oldVal) {
        if (val && JSON.stringify(val) != "{}") {
          this.load();
        }
      },
      deep: true,
    },
    sidebar: function (newVal, oldVal) {
      setTimeout(() => {
        this.resize();
      }, 1000);
    },
  },
  computed: {
    ...mapGetters(["sidebar"]),
  },
  mounted() {
    // console.log("store", this.sidebar);
    this.$nextTick(() => {
      setTimeout(() => {
        let that = this;
        this.eChart = echarts.init(this.$el);
        if (this.option && JSON.stringify(this.option) != "{}") {
          this.load();
        }
        let { resize } = this;
        window.addEventListener("resize", () => {
          resize();
        });

        this.eChart.on("click", function (params) {
          that.$emit("chartClick", params);
        });
      }, 0);
      const erd = elementResizeDetectorMaker();
		  erd.listenTo(this.$el, this.resize)
    });
  },
  methods: {
    load() {
      let settings = comOption(this.type, this.option);
      if(this.eChart){
        this.eChart.setOption(settings, true);
        this.$emit("ready", this.eChart);
      }
    },
    resize() {
      this.eChart.resize();
    },
  },
  beforeDestroy() {
    this.eChart.clear();
  },
  destroyed() {
    this.eChart.dispose();
  },
};
</script>
<style scoped>
.rc-chart {
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  overflow: hidden;
}
</style>

option.js 代码为

import  * as echarts from "echarts"

function comOption(type, option) {
    option = option || null;

    switch (type) {
        case "line-1":
            option = _line1Option(option);
          break;
      
       
        default:
            option = _baseOption();
            break;
    };
    return option;
}

const _color = ["#008280", "#00b2fd", "#f8ab02", "#08e9f7", "#F08080", "#FFFF00", "#ced2d9", "#00cfff", "#006ced", "#ffe000", "#ff5b00", "#ccc", "#025d42", "#95D968", "#C484C7", "#BDBCBC", "#BE5A4B", "#BEB337", "#B9DBF5", "#9512A0", "#93F2A5", "#C18912", "#B293FA", "#FAAF93", "#C467CB", "#D1C640", "#6A8EE5", "#1AE848", "#F0E39B", "#CB679D", "#F2D8F5", "#3183F2", "#C1A04B", "#EA79C9", "#89E8E0", "#F2F5C6", "#830F8E", "#81F0C1", "#F5939D", "#BCC164", "#46AFA5", "#E04858", "#81F0C1", "#AAED74", "#0FE0CB", "#6CA240", "#ED7481", "#AF89F0"];

// 示例option
let _baseOption = function () {
    let option = {
        title: {
            text: "ECharts 入门示例",
        },
        tooltip: {},
        legend: {
            data: ["销量"],
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [{
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
        }],
    };
    return option;
}

// 折线图
let _line1Option = function (option) {
    option = option || {};
    let series = [];
    option.series.forEach((sItem, i) => {
        sItem.type = "line";
        sItem.smooth = true; //是否平滑曲线显示
        sItem.symbo = 'none'
        sItem.symbolSize = 0;
        sItem.lineStyle = {
            normal: {
                width: 2,
                color: _color[i] // 线条颜色
            }
        };
        // sItem.areaStyle = { //区域填充样式
        //     normal: {
        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //                 offset: 0,
        //                 color: _color[i]
        //             },
        //             {
        //                 offset: 1,
        //                 color: "rgba(20,78,110, 0.1)"
        //             }
        //         ], false)
        //     }
        // };
        series.push(sItem);
    });

    let tooltip = option.tooltip ? option.tooltip : {};
    let legend = option.legend ? option.legend : {};
    let title = option.title;
    let yAxisName = option.yAxis[0].name;

    let newOption = {
        title: title || null,
        backgroundColor: "transparent",
        color: _color,
        grid: {
            top: "40",
            left: "4%",
            right: "7%",
            bottom: "4%",
            containLabel: true
        },
        legend: {
            top: "0",
            left: legend.left ? legend.left : "center",
            right: legend.right ? legend.right : "center",
            itemWidth: 12,
            itemHeight: 7,
            itemGap: 5,
            icon: "rect",
            textStyle: {
                color: "#fff"
            }
        },
        tooltip: {
            show: "true",
            trigger: "axis",
            formatter: tooltip.formatter ? tooltip.formatter : null
        },
        xAxis: [{
            type: "category",
            boundaryGap: false,
            minInterval: 0,
            axisLine: { //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                    width: 1,
                    color: "#eaeaea"
                }
            },
            axisLabel: { //坐标轴刻度标签的相关设置
                textStyle: {
                    color: "#343434",
                    fontSize: 12
                }
            },
            axisTick: {
                show: false
            },
            name: option.xAxis[0].name ? option.xAxis[0].name : " ",
            data: option.xAxis[0].data ? option.xAxis[0].data : " "
        }],
        yAxis: [{
            name: yAxisName,
            nameTextStyle: {
                color: "#343434",
                fontSize: 12
            },
            splitLine: {
                show: true,
                // interval: 3,
                lineStyle: {
                    color: ["#eaeaea"],
                    width: 1,
                    type: "dashed"
                }
            },
            axisLabel: {
                margin: 20,
                textStyle: {
                    color: "#343434",
                    fontSize: 12
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }],
        series: series
    };
    return newOption;
};







export default comOption;

最后是main.js全局导入：

// echarts组件
import Echarts from '@/components/echarts'

Vue.component('Echarts', Echarts)

在父组件或者页面上使用：

<Echarts :type='lineType' :option="lineOption" style="height: 200px;"></Echarts>

lineType: 'line-1', // 曲线图类型
 lineOption: {

title:"曲线图"，

 xAxis:[{

 name:"",

data:[]

}]

}, // 曲线图配置 这里对应子组件echart/index.vue里option.js中function的传参的值

通过swtich判断调用不同的function(option){}里的设置

以上就是vue项目中对echart的封装，如有雷同纯属缘分