在vue中使用 Echarts组件化 父子组件--> 实现图表基本功能

之前，已经把 父子组件 的结构搭建完成 并且 样式已经初始化完成了。

　　那么接下来就可以通过 实例化Echarts对象 来实现图表的基本功能。

　　想要实例化Echarts对象 需要一个 全局的Echarts对象 来让我们调用 Echarts它的一些方法。

　　从 main.js 中 挂载 echarts

// 从npm 安装echarts后 引入echarts
import echarts from 'echarts';


//将全局的 echarts 对象挂载到 Vue 的原型对象上
// 别的组件中 this.$echarts 调用echarts对象
Vue.prototype.$echarts = echarts

 

　　

 

完整代码:

这里注意：　1. this.$axios.get("") 获取请求 也需要在 main.js 文件中 把对象挂载到 Vue的 原型上
　　　　　　2. this.allDate.map((item) => {return item.name; });  通过map的方式获取一个新的数组 ，而 数组当中的每一个值  可以通过map中的回调函数来决定。

<!-- 
要呈现的具体的组件
 -->
<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartInstance: null,
      // 服务器返回的数据
      allDate: null,
    };
  },
  // 初始化实例调用
  mounted() {
    this.initCharts();
    this.getData();
  },
  methods: {
    // 初始化 chartInstance 对象
    initCharts() {
      //创建 chartInstance 对象
      this.chartInstance = this.$echarts.init(this.$refs.seller_ref);
      /*
      1.init() 需要传递一个参数 => 图表最终要显示的dom元素 => com-chart
      2.为了更方便的 获取这个元div 我们给这个div设置 ref="seller_ref"
        在 init() 中通过 this.$refs.seller_ref 获取这个div
      3.init() 的返回值就是一个 chartInstance 对象 ，我们可以把这个对象
      保存到 data() 当中
      4.那么什么时候调用 initCharts() 这个方法呢?
        在 initCharts() 中 我们 获取了dom的元素
        在Vue的生命周期中 什么时候代表 dom元素加载完毕了呢? => mounted()方法
        所以在 mounted 方法中调用 initCharts() 这个方法
       **/
    },
    // 获取服务器的数据
    async getData() {
      //http:// ip:端口/文件路径
      // const ret = await this.$axios.get("http://127.0.0.1:80/api/sellers");
      // 从服务器请求的数据
      const ret = [
        { name: "商品1", value: 50 },
        { name: "商品2", value: 60 },
        { name: "商品3", value: 70 },
        { name: "商品4", value: 80 },
        { name: "商品5", value: 90 },
        { name: "商品6", value: 100 },
        { name: "商品7", value: 110 },
        { name: "商品8", value: 120 },
      ];
      this.allDate = ret;
      /*
       this.$axios.get("") 返回的是promise对象 ，可以用 await 来解析数据
       当一个方法用 await 解析 ，方法前面需要加上 async 修饰
       **/
      this.updateChart();
    },
    // 更新图表
    updateChart() {
      const sellerNames = this.allDate.map((item) => {
        return item.name;
      });
      const sellerValues = this.allDate.map((item) => {
        return item.value;
      });
      const option = {
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: sellerNames,
        },
        series: [
          {
            type: "bar",
            data: sellerValues,
          },
        ],
      };
      this.chartInstance.setOption(option);
    },
  },
};
</script>

<style>
</style>

 效果: