[JavaScript知识库] 将echarts 封装为vue组件动态加载数据—

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 将echarts 封装为vue组件动态加载数据——以饼状图为例 -> 正文阅读

[JavaScript知识库]将echarts 封装为vue组件动态加载数据——以饼状图为例

基本原理：
1、创建一个用于展示图形的vue组件，保留接收数据的接口，作为子组件使用。
2、在父组件中引用上述子组件，同时传递数据给子组件。
本文在main.js中全局引入echarts，代码为：

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts

子组件echartscom.vue：

<template>
  <div class="echartsCommon">
    <div style="width: 80rem; height: 20rem" class="echarts" ref="piechart"></div>
  </div>
</template>

export default {
    name: 'echartscom',
    mounted() {
      this.drawCharts();
    },
    props: ['chartData'],  //接收父组件传来的数据
    methods: {
      drawCharts() {
        // console.log(this.$parent)
        let myChart = null;
        myChart = this.$echarts.init(this.$refs.piechart);
        myChart.setOption({
          tooltip: {
            trigger: 'item'
          },
          color: ['rgb(238,102,102)', 'rgb(145,202,117)', 'rgb(115,202,222)'], //自定义饼状块的颜色序列
          series: [{
            type: 'pie',
            radius: '75%',
            data: this.chartData,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: '{b} : {d}%',
                  fontSize:16
                }
              }
            }
          }]
        })
        window.addEventListener('resize', function() {
          myChart.resize();
        });
      },
    }
  }

父组件：
这里用v-for实现多次调用子组件

    <div>
      <b-card v-for="(item,index) in dataset" :key="index" class="mt-2" :sub-title="(index+1)+'、'+item[0]['question']">
        <b-card-text>
           <!--循环调用子组件，注意图表数据参数变量chartDatra，以及控制是否显示子组件的变量showFig -->
          <echartscom :chartData="item" v-if="showFig"></echartscom>
        </b-card-text>
      </b-card>
    </div>

  import echartscom from '@/components/echartscom.vue'
  export default {
    data() {
      return {
        dataset: [], //用于保存从后端获取的数据
        showFig: true, //用于根据后端数据确定是否调用子组件
      }
    },
    components: {
      echartscom,
    },
    methods: {
      getSta: function() {
        this.$axios.post("disciplineCollect.php", {
          act: 'sta',
          cpcname: this.cpcname
        }).then(rs => {
          if (rs.data.data[0]['answer'].length > 0) {
            this.showFig = true;
            for (let each of rs.data.data) {
              this.dataset.push(each.answer); 
            }
          } else {
            this.showFig = false;
            this.dataset = [];
            this.dismissCountDown = this.dismissSecs;
            this.alertType = "danger"
            this.alertMsg = "暂无数据。"
          }
        })
      }
    }
  }