vue引入echarts图表，动态获取数据

最新推荐文章于 2024-05-07 15:35:18 发布

cuiyiran_

最新推荐文章于 2024-05-07 15:35:18 发布

阅读量4.9k

点赞数 1

文章标签： echarts vue.js 前端

本文链接：https://blog.csdn.net/cuiyiran_/article/details/125456085

版权

1、下载echarts

npm i echarts -S

2、main.js引入echarts

Vue.use(echarts);
Vue.prototype.$echarts = echarts;

3、标签给id命名，进⾏绘制图表

<div class="echarts_box">
    <div id="echartsOne" style="height:300px"></div>
</div>

4、获取动态数据

getData(){
            let arr = []
            getPieChart(this.wellSiteId).then((res)=>{
                if(res.code == '200'){
                    this.eacartsData = res.data
                    this.eacartsData.forEach((item)=>{
                        arr.push({
                            name:item.name,
                            value:item.value
                        })
                    })
                    this.eacartsData = arr
                    this.$nextTick(()=>{
                        this.getEcharts()
                    })
                }
            })
        }

5、绘制echarts样式

getEcharts() {
            var chartDom = document.getElementById('echartsOne');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                color: ["#5089bd", "#d36e2a", "#929292", "#e3aa00", "#3b65ae", "#63993e"],
                title: {
                    text: '饼图使用动态数据',
                    subtext: '',
                    left: '50%',
                    top: '4%'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: '2%',
                    top: '34%'
                },
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '4%',
                    top: "2%",
                    containLabel: true
                },

                series: [
                    {
                        name: '饼图使用动态数据',
                        type: 'pie',
                        radius: '90%',
                        top: '20%',
                        left: '20%',
                        data: this.eacartsData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 12,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            option && myChart.setOption(option);
        },