前端自定义Echarts 图的时候,重新渲染,页面还保存原来的数据

自定义

setAxisSingleOption(optionData){
        var options = this.axisSingleOption
        options.title.text = optionData.title.text
        options.xAxis.data = optionData.xAxis.data
        options.legend.data = optionData.legend.data
        options.series = optionData.series
        options.grid = optionData.grid
        // 假设seriesData是你的数据数组,xAxisData是对应的x轴标签数组
        var seriesData = options.series.data
        var xAxisData = options.xAxis.data
        // 找到最小值及其索引
        var minIndex = seriesData.indexOf(Math.min(...seriesData));
        var minValue = seriesData[minIndex];

        // 填充markPoint的data数组
        options.series.markPoint.data.push({
            name: minValue + '%', // 标记点名称
            coord: [minIndex, minValue], // 使用索引和值来定位标记点
            label: {
              show: true, // 确保标签是显示的
              position: 'inside', // 或根据需要调整标签位置
              offset: [0, 50], // 向下移动标签,第一个值是x轴偏移,第二个值是y轴偏移
              formatter: function (params) {
                // 自定义标记点的标签内容,包含x轴标签和y轴值
                return  xAxisData[minIndex] + " " + params.name;
              },
            },
        });
        return options
      },

在后端方法传过来数据的方法中

const echarts6 = echarts.init(document.getElementById('axisSingleEcharts1'))
echarts6.setOption(this.setAxisSingleOption(this.powerSunShortMoreThanFiftyAxis),true)
const url6 = echarts6.getDataURL({
  type: 'svg',
  pixelRatio: 2,
})
this.url.url6 = url6

setAxisSingleOption 方法就是自己定义的给echarts方法赋值; 

reset 方法需要重新给echarts 赋值

const echarts6 = echarts.init(document.getElementById('axisSingleEcharts1'))
echarts6.dispose();//不生效, 标记点 还存在

 需要在 dispose() 方法之前

const echarts6 = echarts.init(document.getElementById('axisSingleEcharts1'))
this.powerSunShortMoreThanFiftyAxis.series.markPoint.data = []
echarts6.dispose();  
  • 5
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值