vue+ts+vue-echarts: 动态更新柱形图的数据

喜欢ヅ旅行 2022-11-17 05:51 386阅读 0赞

#### vue-echars的安装可以参考下面的文章 ####

https://blog.csdn.net/u014686399/article/details/115112829?spm=1001.2014.3001.5501

#### 柱形图数据更新的方法 ####

*  在template中使用柱形图

<v-chart
       class="bar-shape"
       :option="histogramOption"
       autoresize/>

*  histogramOption 这是为echarts的图形设置的option

{ 
            title: { 
                text: 'xxxx'
            },
            tooltip: { 
                trigger: 'axis',
                axisPointer: { 
                    type: 'shadow'
                }
            },
            legend: { 
                show:false,
                // data: ['2011年', '2012年']
            },
            grid: { 
                left: '3%',
                right: '6%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: { 
                type: 'value',
                show: false
                // boundaryGap: [0, 0.01],
            },
            yAxis: { 
                type: 'category',
                data: ['xxxx', 'xx', 'xx', 'xx']
            },
            series: [
                { 
                    name: '值',
                    type: 'bar',
                    data: this.histogramData,
                    itemStyle:{ 
                        normal: { 
                            label: { 
                                show: true,      //开启显示
                                position: 'inside',
                                padding:[0, 10, 0,0],
                                textStyle: {      //数值样式
                                    color: '#ffff',
                                    fontSize: 16
                                }
                            },
                       }
                    }
                }
            ]
        }

> 注意 this.histogramData，我们在外面动态更新histogramData的值，已达到更新图形数据

*  更新histogramData的方法

// 不要 
    // histogramData = []
    // 要
    histogramData.splice(0, histogramData.length)