在vue项目中echarts的封装使用(超详细，看不懂你打我)

超详细的echarts的封装调用，看不懂请打我

在一个项目中，我们可能会用到相同类型的柱状图，如果一个一个创建的话，太过于麻烦，所以我们选择把相同类型的柱状图，饼状图等封装echarts.js文件，需要的时候直接调用这个js
注意:加粗样式echearts 要使用4.9.0版本的 默认 npm install echarts 会安装最新版本的5.0版本
1.我们先npm install echarts@4.9.0
2.在main.js中

import echarts from 'echarts'
Vue.prototype.$echarts = echarts    //用原型链绑定在Vue上

3.在公共引入的文件夹中创建 echarts.js文件
我是直接在和vue组件并列文件下创建的js文件，请不要学我

public.js中的内容

export default class {
    constructor(echarts, id, xdata,seriesdata) {		//echarts, id, xdata,seriesdata都是vue组件中传递过来的参数
        this.echarts = echarts;
        let option = this.getOption(xdata,seriesdata)  	//把参数传递给方法
        var myChart = echarts.init(document.getElementById(id));	//获取dom
        myChart.setOption(option);     //暴露出去
    }

    getOption(xdata,seriesdata) {
        let option = {
            title: {
                text: "ECharts 入门示例",
            },
            tooltip: {},
            legend: {
                data: ["销量1"],
            },
            xAxis: {
                data: xdata,  //传递过来的参数
            },
            yAxis: {},
            series: [{
                name: "销量1",
                type: "bar",
                data: seriesdata,		//传递过来的参数
            }, ],
        };

        return option;
    }
}

4.在vue组件中
先引入js文件

<template>
  <div class="hello">
    <div id="main" style="width: 600px; height: 400px"></div> 		//echarts存放的div
  </div>
</template>

<script>
import echarts from "./public.js";			//引入js文件
export default {
  name: "HelloWorld",
  data(){
    return{
      xdatas:["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      seriesdata:[5, 20, 36, 10, 10, 20]
    }
  },
  props: {
    msg: String,
  },
  mounted() {
    this.myEcharts();  //调用组件的时候自动调用这个方法
  },
  methods: {
    myEcharts() {
      new echarts(this.$echarts, "main", this.xdatas,this.seriesdata);  //echarts传参，this.$echarts声明是echarts，main是div的ID, this.xdatas,this.seriesdata是传递参数
    },
  },
};
</script>

5.效果图来啦