echarts可视化项目（带数据，一目了然）

墨蓝 2022-12-05 10:15 234阅读 0赞

<template>
      <Row :gutter="10" style="margin-top: 10px;">
           <i-Col :md="24" :lg="24" :style="{marginBottom: '10px'}">
             <Card>
                <p slot="title" class="card-title">
                  <Icon type="android-map"></Icon>请休假申请类型比例</p>
                      <div class="data-source-row" ref="mycharts2" style="height:300px;">
                      </div>
                   </Card>
           </i-Col>
    </Row>
    </template>
    <script>
       data() { 
        tableDataList: { 
                 tableData: []
             },
        chart2: { }
        }
        computed: { 
          return { 
                        color: ['#f9b955', '#f97070', '#47aff7', '#0dd3af', 'rgb(100, 213, 114)', 'rgb(45, 140, 240)'],
                        series: [{ 
                            type: 'pie',
                            radius: '80%',
                            center: ['50%', '60%'],
                            data: this.tableDataList.tableData,
                            itemStyle: { 
                                normal: { 
                                    label: { 
                                        formatter: '{b}{d}%'  //只显示名字和百分比
                                    }
                                }
                            },
                            label: { 
                                normal: { 
                                    textStyle: { 
                                        fontSize: 15
                                        // color: '#333'
                                    }
                                }
                            }
                        }]
                    };
        }
        methods: { 
             refresh () { 
                let _this = this;
                    Util.ajax.post(Url.getHolidayChartCount, this.certificateObj).then(res => { 
                        if (res.data && res.data.code === '0') { 
                            _this.certificateObj.loading = false;
                            let xDataList = [];
                            let yDataList = [];
                            _this.tableDataList.tableData = [];
                            if (res.data.data.holidayPerCentList && res.data.data.holidayPerCentList.length > 0) { 
                                res.data.data.holidayPerCentList.forEach(item => { 
                                    if (item.name) { 
                                        _this.tableDataList.tableData.push(item);
                                    }
                                });
                            }
                            this.$nextTick(() => { 
                                this.setCharts1();
                            });
                        } else { 
                            _this.certificateObj.loading = false;
                            _this.$Message.error(res.data.msg);
                        }
                    })
                        .catch((er) => { 
                            _this.certificateObj.loading = false;
                            _this.$Message.error(er.msg);
                        });
       
             }
             
             setCharts1 () { 
                    this.setHindleTypesecharts();
                },
                setHindleTypesecharts () { 
                    let dom2 = this.$refs.mycharts2;
                    this.chart2 = echarts.init(dom2);
                    this.chart2.setOption(this.option2);
                },
                setMonthechatrs () { 
                    let dom1 = this.$refs.mycharts1;
                    this.chart1 = echarts.init(dom1);
                    this.chart1.setOption(this.option1);
                },
    }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 1]  
希望在深圳能找到臭味相投的前端伙伴一起成长！有意者M

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/5f39ac0bb52f40c78c3bb508307942a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTk0MDY4NA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/97b8117766014b698939ec2ea3ea5840.png