Echarts+vue，封装后好用到飞

做过可视化项目的小伙伴们相信对echarts并不陌生，但是很多人按部就班比着echarts的官方的api创建实例运用并不灵活，尤其面对多个图表的情况非常棘手，需要一各一个的创建，5个图表就快1000行代码了，这种痛苦刚接触图表的我感触极深，对不起我是受不了，懒人就只好封装了。首先说明一下目前ECharts已更新到5.0版本，在Vue中引入并不难，但是会和5.0以前引入有些小不同我会在下边说明，废话不多说了看效果图

 

上代码 

1.安装

   你可以指定版本，不然默认会是最新版本

npm install --save echarts
//npm install  echarts@4.x --save 指定版本。 由于主题的原因我用的4.x版本，就不多解释了
#或
cnpm install --save echarts

  2.在main.js引入

// main.js
import Vue from 'vue'
import echarts from "echarts";//引入echarts //5.0以前引入
// import * as echarts from 'echarts' //5.0版本要加断言，不然飘红
Vue.prototype.$echarts = echarts; //挂载

  3.创建文件(注册组件)

      1.在src下components文件夹下创建一个ChartLine(名字随便写)文件下index.vue写以下代码

<template>
  <div class="container">
    <div class="chart_line" :id="id" :data="data"></div>
  </div>
</template>

<script>
export default {
  name: "",
  props: ["id", "data"], //id必须找到dom的节点，data就是option图标核心数据
  data() {
    return {
      ChartLineGraph: null,
    };
  },
  watch: {
    data: {
      handler(newvalue, oldvalue) {
        this.drawLineGraph(this.id, newvalue);
      },
      deep: true,
    },
  },
  methods: {
    drawLineGraph(id, data) {
      let _this = this;
      let myChart = document.getElementById(id);
      this.ChartLineGraph = this.$echarts.init(myChart); //初始化实例
      this.ChartLineGraph.setOption(data, true);//开启重绘
      window.addEventListener("resize", function () {
        _this.ChartLineGraph.resize(); //浏览器缩放eachrts自适应
      });
    },
  },
  mounted() {
    this.drawLineGraph(this.id, this.data);
    
  },
  beforeUpdate() {
  },
  updated(){
  },
  beforeDestroy() {
    if (this.ChartLineGraph) {
      this.ChartLineGraph.clear();
    }
  },
};
</script>

<style  scoped>
.chart_line {
  height: 100%;
  width: 100%;
}
</style>

2.注册全局或者按需导入，这里我是全局注册的因为我的项目基本上就是图表、图表、各种图表

// components下的index.js
import Vue from 'vue';
Vue.component("ChartLine",function(){
	return import("@/components/ChartLine")
})

4.使用

干完以上3步，你就舒服了，无论多个图表或单个图表都很简单

<template>
  <div class="monit-container">
    <div
      class="lineChart"
      v-loading="params.loading"
      element-loading-text="加载中...."
      element-loading-spinner="el-icon-loading"
    >
      <template v-if="params.monitorLineList.length > 0">
        <!-- 注意：
        1.一定要给图表指定宽高，没有宽高显示个屁，对吧！css代码如 
           .h-main{height:300px;width:500px} 
        2.id一定不要重复，id一定不要重复，id一定不要重复，重要的事情说三遍，重复无法渲染
        3.data接受的就是官方实例的option，不熟悉的小伙伴，请去echarts文档自行学习
         -->
         <!-- 多个图表 -->
        <ChartLine
          class="h-main"
          v-for="item in params.monitorLineList"
          :id="'sdff'+item.id"   
          :data="item.option"
          :key="item.id"
        ></ChartLine>
        <!-- 单个图表 -->
         <ChartLine
          class="h-main"
          id="suibian"   
          :data="option"
        ></ChartLine>
      </template>
      <div class="nodata nodata_p" v-else>
        暂无数据
        <p>图表</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
        loading:false,
        monitorLineList:[]
    };
  },
  props: {
    params: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {},
  mounted() {
  },
  created() {
    console.log(this.params)
  },
  methods: {
  
  },
   
};
</script>

<style  lang='scss' scoped>
.monit-container {
  flex: 1;
  .lineChart {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    .h-main {
      width: 90%;
      margin: 10px 0;
      height: 300px;
    }
  }
}
</style>