echars 修改属性数据,不生效的原因可能如下:

修改单个属性数据,生效情况分为渲染之前和之后两种:
1、页面渲染之后,根据leng图例进行切换

2、页面渲染之前,对属性数据进行变换

const echartsLiving =  this.$refs.supHeiEcharts.getEchartsLiving()
const option = echartsLiving.getOption()
const seriesData = option.series.find(item => item.name === '阻力')
seriesData.markLine = markLine // 渲染后的数据
option.markLine = markLine // 渲染之前的数据
console.log(seriesData.markLine, '1001', option.markLine)
echartsLiving.setOption(option)

3、操作图例的api 的方法

// legend 点击切换 getEchartsLiving 为封装方法(不做实用)
const cardEcharts = this.$refs.cardEcharts.getEchartsLiving()
const cardOption = cardEcharts.getOption()
cardEcharts.off('legendselectchanged')
cardEcharts.on('legendselectchanged', (e) => {
  let { name, selected } = e
  // js 操作---
  cardEcharts.setOption(cardOption)
})

4、leng 的icon 设置
1、根据 sever里的图形设置进行显示
2、直接写

legend:[
{
  data:[
    {name: 'aa', icon: 'rect'},
    {name: 'bb', icon: 'rect'}, // 在此处进行单独设置不同icon 显示
    {name: 'cc', // 单独设置一个空的的 图例
      itemStyle: { opacity: 0 },
      lineStyle:{
        type:'dotted',
      },
    },
  ],
  itemWidth: 14,
  itemHeight: 4,
  top:0,
  textStyle: {
    fontSize: 14,
    height: 12,
    color: '#fff',
    rich: {
      a: {
        verticalAlign: 'media',
      },
    },
  },
},
],

你可能感兴趣的:(前端,javascript,开发语言)