修改单个属性数据,生效情况分为渲染之前和之后两种:
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',
},
},
},
},
],