vue项目中window标签引入echarts，动态绑定数据

最新推荐文章于 2024-09-22 22:43:34 发布

惜月coisini

最新推荐文章于 2024-09-22 22:43:34 发布

阅读量616

点赞数

文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/ancartoon/article/details/120999776

版权

本文介绍如何在Vue项目中使用window全局变量引入ECharts库，并详细阐述了如何进行动态数据绑定，实现图表数据实时更新的效果，助力前端开发者提升数据可视化能力。

摘要由CSDN通过智能技术生成

<epl-window width="1000px" :title="titleName" append-to-body :visible.sync="dialogVisibleNewOrUpdate"
                    height="1000px" maxMenu="false" maxable="false" shadeDestroy="false" resizable="false"
                    allowControlDbclick="false" dragInTopToMax="false" center>
            <div style="height: 550px ; width: 1000px " >
                <div id="mainChars" style="width: 100%; height: 100% " ></div>
            </div>
</epl-window>

 mounted() {
        this.getpie();
    },

 
        getpie() {
            this.$api.commonGet('/business/KWLBPT/KWLBPT_002/KWLBPT_002_002/initData').then(res=>{
                let arrayData = [];
                    arrayData = res.data;
                for (let i = 0; i < arrayData.length; i++) {
                    let obj = new Object();
                    obj.name = arrayData[i].sys_route_id;
                    obj.value = arrayData[i].num;
                    this.getData[i] = obj;
                }
                this.mainChars = this.$echarts.init(document.getElementById("mainChars"));
                this.mainChars.setOption ({
                    legend: {
                        x : '0%',
                        y : 'center',
                        orient : 'vertical',
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: [50, 200],
                            center: ['40%', '50%'],
                            roseType: 'area',
                            itemStyle: {},
                            data: this.getData
                        }
                    ]
                });
                this.mainChars.on(
                    "click",
                    (params)=>{
                                this.dialogVisibleNewOrUpdate = false;
                                this.menuForm.sys_route_id=params.name;
                                this.searchMenu();
                        }
                    );
            });
        },

        statistics(){
            this.dialogVisibleNewOrUpdate=true;
            this.$nextTick(() => {
                //  执行echarts方法
                this.getpie()
            })
        },