封装echarts饼图组件（其他同理），动态更新数据

方法1

父组件

<templete>
 <div>
     <div>
         <span :style="{display:'inline-block',textIndent: '2em'}">简介...</span>
     </div>
     <Piechart
         @propData="propData"
         :id="pieData.id"
         :echartStyle="pieData.s"
         :titleText="pieData.title.text"
         :colorful="pieData.b"
         :opinion="pieData.c"
         :seriesName="pieData.d"
         :opinionData="pieData.e"
     />
 </div>
</templete>

import Piechart from '@comp/chart/pieChart'  // 引用子组件

子组件

<template>
  <div :id="id" :style="echartStyle"></div>
</template>

<script>
import Echarts from 'echarts'

export default {
  props: { // 接收父组件的传值
    echartStyle: { // 样式
      type: Object,
      default() {
        return {}
      }
    },
    id: {
      type: String,
      default: 'echarts_id'
    },
    titleText: { // 标题文本
      type: String,
      default: '默认标题'
    },
    opinion: { // 扇形区域名称
      type: Array,
      default() {
        return []
      }
    },
    colorful: { // 颜色
      type: Array,
      default() {
        return []
      }
    },
    seriesName: { // 提示框标题
      type: String,
      default: ''
    },
    opinionData: { // 扇形区域数据
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {  // 监听父组件传过来的数据，动态更新
    opinionData: {
      handler(newVal, oldVal) {
        if (this.charts) {
          newVal ? this.setOption(newVal) : this.setOption(oldVal);
        }
      },
      deep: true,
      immediate: true,
    }
  },
  data() {
    return {
      charts: null,
    }
  },
  mounted() {
    this.drawPie(this.id);
  },
  beforeDestroy() {
    this.charts.dispose();  // 销毁实例
    this.charts = null;
  },
  methods: {
    
    drawPie(id) { // 绘制饼状图
      this.charts = Echarts.init(document.getElementById(id));
      this.setOption(this.opinionData);

      // setTimeout(() => {
      //   let xxx = this.charts.getDataURL({
      //     pixelRatio: 2,
      //     backgroundColor: '#fff'
      //   });
      //   this.$emit('propData', xxx);  // 回调，导出图
      // },2000)
    },
    setOption(option) {
      this.charts.setOption({
        title: {
          text: this.titleText, // 标题文本
          left: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: (d) => {
            let list = `<div style="text-align:left;font-size:12px">
              数量: <span style="font-size:16px;font-weight:bolder;">${d.data.top}</span></div>
            <div style="text-align:left;font-size:12px">
              占比: <span style="font-size:16px;font-weight:bolder;">${d.data.proportion}</span></div>`
            return list
          }
        },
        legend: {
          orient: 'vertical',
          right: 'right',
          bottom: 20,
          data: this.opinion // 扇形区域名称
        },
        series: [
          {
            name: this.seriesName, // 提示框标题
            type: 'pie',
            radius: '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data: this.opinionData, // 扇形区域数据
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
            }
          }
        ],
        color: this.colorful, //自定义的颜色
      })
    }
  }
}
</script>

效果图

方法2

父组件

html部分

<wk-Line id="barGroup" :data="numList"  v-if="numList.datano1.length > 0"/>
                    <!-- 无数据 -->
<no-data v-else table/> 

js部分

numList:{//人数分布图表数据
                color:['#c0504e'],
                name:[],
                datano1:[],
                datano2:[],
                legend:['', '']
            },

// 人数分布图表数据处理
                    let numData = [],name = []
                    res.data.buyFailureList.map(item =>{
                        numData.push(item.num)
                    })
                    res.data.buyFailureList.map(item =>{
                        name.push(item.name)
                    })
                    // 更新数组里面的数据
                    this.$set(this.numList,'datano1',numData)
                    this.$set(this.numList,'name',name)

字组件

<template>
    <!-- 柱状图 - 堆叠 -->
    <div class="bar-box" :id="id" :style="styleCpt" style="width:100%;height:20rem;">
    </div>
</template>
<script>
    export default {
        props:['id','styleCpt','data'],
        watch:{
            data:{
                handler(){
                    this.$nextTick(()=>{
                        this.initHandler(this.data);
                    }) 
                },
                immediate:true,
                deep:true
            }
        },
        methods:{
            initHandler(data){
                console.log(data)
                debugger
                let myCharts = this.$echarts.init(document.getElementById(this.id)), chartOption = {};
                //为了清空上一次echarts残留的数据 setOption的值为true
                myCharts.clear(); 
                chartOption = {
                    color:data.color,
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: data.legend, 
                        bottom: 10,
                    },
                    grid: {
                        left: '%',
                        right: '2%',
                        top: '3%',
                        bottom: data.color.length>1? '20%' : '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: data.name
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: data.legend[0],
                            type: 'line',
                            stack: '总量',
                            data: data.datano1
                        },
                        {
                            name: data.legend[1],
                            type: 'line',
                            stack: '总量',
                            data: data.datano2
                        },

                    ]
                };
                myCharts.setOption(chartOption,true);
                //监听屏幕大小的改变来改变走势图的大小
                window.addEventListener("resize",function (){
                    myCharts.resize();
                })
                let timer = setTimeout(()=>{
                    myCharts.resize();
                    clearTimeout(timer);
                    timer = null;
                }, 500)
            }
        }
    }
</script>