在Vue中使用echarts，简单使用，组件化使用分析

在项目中不可避免的需要对数据进行可视化处理，也就是用图表展示，就把之前常用的echarts拿来分析一下，先看下效果

好了，下面进入主题

安装

npm install echarts -S

版本依赖

"vue": "^2.5.2",
"echarts": "^4.8.0",

不写版本依赖的都是耍流氓（版本不对导致出错的案例罄竹难书呀）

使用

这里展示了3中使用方法，循序渐进，方便大家学习

使用 -（全局引入）

在main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在页面中, 比如echart.vue中

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

export default {
  data () {
    return {}
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}

注意：我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

---

使用-（按需引入）

由于全局引入会将所有的echarts图表打包，导致体积过大
在echarts.vue文件中

// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

注意：使用 require 而不是 import

完整例子-大伙可以直接复制拿走使用

<template>
  <div class="testpage">
    <div class="pageCon">
      <!-- 实验成功 -->
      <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
    </div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data() {
    return {};
  },
  components: { },
  mounted() {
    this.drawLine();
  },
  created() {},
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      });
    }
  }
};
</script>
<style ></style>

使用-（组件化）

提到vue组件化是重要的一点，可以复用，方便维护。。。
那接下来我就简单的将他封装成一个简单的组件
业务场景：在详情页中用饼状图展示总费用的分布

效果图

我已精简代码，大家可将axios获取数据那一块忽略掉，直接看数据
1. 创建echarts.vue组件

<template>
  <div class="echartsWrap">
    <div id="myChart" class="myChart"></div>
  </div>
</template>

<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
export default {
  name: "echerts",
  props: {
    datas: {
      style: Array,
      default: []
    }
  },
  data() {
    return {};
  },
  components: {},
  mounted() {
    this.drawLine();
  },
  created() {},
  methods: {
    drawLine() {
      console.log("this.datas: ", this.datas);
      // 检查是否有数据
      if (!this.datas) {
        return;
      }
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { x: "center" },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: this.datas,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style lang="stylus">
.myChart{
  width: 100%;
  min-height: 220px;
}
</style>

2.页面中使用

 <div v-if="echartsData">
    <echarts :datas="echartsData"></echarts>
  </div>

import Echarts from "@/components/echarts/echarts";
export default {
  name: "goodDetail",
  data() {
    return {
      echartsData: [],
    };
  },
  components: {
    appHead,
    Echarts
  },
  mounted() {
    this.getData();
  },
  methods: {
  	// 获取数据 - 
    getData() {
      let params = {
        code: this.$route.query.id
      };
      this.$api.goods
        .goodsDetail(params)
        .then(res => {
          // 处理echarts的数据
          this.handleChartsData(this.gdData.goods_info);
        })
        .catch(error => {
          console.log("error: ", error);
          this.myloading = false;
        });
    },
    // 处理echarts的数据
    handleChartsData(datas) {
      console.log("data: ", datas);
      this.echartsData = [
        {
          value: datas.price,
          name: "网店售价"
        },
        {
          value: datas.consumer_bond,
          name: "消保金"
        },
        {
          value: datas.skill_price,
          name: "技术年费"
        },
        {
          value: datas.poundage,
          name: "居间费"
        }
      ];
      console.log('处理后的echarts数据: ', this.echartsData);
    }
  }
};

到这里，对echart的简单使用，组件化封装分析完毕，有问题的小伙伴可以随时问我哈

最后如果帮了你的大忙的话，请小伙伴们点个赞或打赏个几毛钱。