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

发布于:2024-05-24 ⋅ 阅读:(160) ⋅ 点赞:(0)

自定义

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();  

网站公告

今日签到

点亮在社区的每一天
去签到