美文网首页
echarts封装组件(动态数据)

echarts封装组件(动态数据)

作者: 为光pig | 来源:发表于2020-12-25 18:06 被阅读0次

    封装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>
    

    相关文章

      网友评论

          本文标题:echarts封装组件(动态数据)

          本文链接:https://www.haomeiwen.com/subject/lqjinktx.html