vue使用echarts注意点

最新推荐文章于 2024-06-06 17:49:45 发布

甜甜凉白开

最新推荐文章于 2024-06-06 17:49:45 发布

阅读量533

点赞数 2

分类专栏：前端文章标签： echarts vue

本文链接：https://blog.csdn.net/qq_41877050/article/details/117660070

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

在ECharts中绘制图表时，通常需要从API获取数据。本文展示了如何确保在数据获取成功后再进行图表绘制，避免因数据未及时加载导致的绘图错误。通过在获取数据的Promise成功回调中初始化和设置ECharts选项，可以确保数据和图表渲染同步。同时，代码中还展示了如何实现窗口大小变化时图表的响应式调整。

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

一般使用echarts图表有以下几个步骤：

1.定义echarts容器（div），给定唯一标识id,id="echartsId"。

2.引入echarts.js

3.获取具有唯一标识的div, document.getElementById("echartsId")

4.初始化echarts画布, echarts.init()

5.为初始化成功的画布填充图表setOption

let mychart = echarts.init(document.getElementById("zaiqingfenbu1"));
            this.option = {
                title: {
                    text: 'XXXXXXXX',
                    left: '50%',
                    textAlign: 'center',
                    textStyle: {
                        color: '#fee'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    data: [1,2,3],
                    axisLine: {
                        lineStyle: {
                            color: '#0177d4'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                yAxis: {
                    name: "",
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#0177d4'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 16
                    },
                    splitLine: {
                        show:false,
                        lineStyle: {
                            color: '#0177d4'
                        }
                    }

                },
                series: [{
                    type: 'bar',
                    barWidth: 16,
                    itemStyle:{
                        normal:{
                            color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00b0ff'
                            }, {
                                offset: 0.8,
                                color: '#7052f4'
                            }], false)
                        }
                    },
                    data: [1,2,3]
                }]
            }
            mychart.setOption(this.option)
            // 响应式变化
            window.addEventListener("resize", () => mychart.resize(), false)

在上面这部分代码中，我们是将数据给定的具体值，但是一般在项目中，数据都是通过调用接口获取的，此时，问题就出现了，绘图总是在数据获取成功之前就完成了，以至于图表获取不到数据，这其实就和代码的执行顺序有关了，于是，我们就应该在接口调用成功，获取到数据之后再进行绘图。

直接上代码：

methods: {
      getEcharts(){
        const params = {}
        getEchartsApi(params).then(response=>{//先调用接口
        //调用成功标识判断，此处未写
            let mychart = echarts.init(document.getElementById("XXXX"));
            this.option = {
                title: {
                    text: 'XXXX分布',
                    left: '50%',
                    textAlign: 'center',
                    textStyle: {
                        color: '#fee'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    data: response.data.hArr,//通过接口数据获得
                    axisLine: {
                        lineStyle: {
                            color: '#0177d4'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                yAxis: {
                    name: "",
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#0177d4'
                        }
                    },
                    axisLabel: {
                        color: '#fff',
                        fontSize: 16
                    },
                    splitLine: {
                        show:false,
                        lineStyle: {
                            color: '#0177d4'
                        }
                    }
                    // interval:10,
                    // max:50

                },
                series: [{
                    type: 'bar',
                    barWidth: 16,
                    itemStyle:{
                        normal:{
                            color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00b0ff'
                            }, {
                                offset: 0.8,
                                color: '#7052f4'
                            }], false)
                        }
                    },
                    data: response.data.oArr   //通过接口数据获得
                }]
            }
            mychart.setOption(this.option)  
            // 响应式变化
            window.addEventListener("resize", () => mychart.resize(), false)
        })
        
    }
  },