关于echars 操作legend 解决方案

本文主要是介绍关于echars 操作legend 解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

需求：
1、legend 图例需要是虚线
https://frontend.devrank.cn/traffic-information/7208578249369765947 （重点）
https://blog.csdn.net/weixin_48400717/article/details/128935213

2、可单选 和 多选

3、lengend 和 sever 数据name 保持一致

4、

legend:[{selectedMode:'single', // 单选itemWidth: 14,itemHeight: 4,top:20,icon:'rect',textStyle: {fontSize: 14,height: 12,color: '#fff',rich: {a: {verticalAlign: 'media',},},},}],

3、dom.vue 页面

<zmjEcharts ref="supHeiEcharts" title="支架压力" echartsId="supHeiEcharts" :isEchartAbsolute="true">
</zmjEcharts>

js 页面

import { echartsOptions } from '@/components'
import dragImg from '@/assets/image/line/line-9.png'
export const supHeiEcharts = (obj, haveFourCol) => {const worknce = 333console.log((obj[0]?obj[0][0]:null), haveFourCol, '--------')const markLine = {symbol: 'none',data: [{lineStyle: {type: 'dashed',color: '#FA7272',},label:{position: 'insideEndTop',fontSize: '10',formatter:`333: {c}`,color:'#FA7272',},yAxis: workingResistance || 'none',}],}const leg = {selectedMode:haveFourCol?'single':'',itemWidth: 14,itemHeight: 4,// top:0,icon:'rect',textStyle: {fontSize: 14,height: 12,color: '#fff',rich: {a: {verticalAlign: 'media',},},},}let defaultOption = JSON.parse(JSON.stringify(echartsDefaultOptions))const options2 = {xAxis:{...defaultOption.xAxis[0],data: obj.finalSupportPressure?.map(item => {return item.dateTime}),type: 'category',},color:['#FFDB26', '#579AFF', '#FF5962'],legend: [{...leg,right: '51%',data: [{name: '11',icon: 'roundRect',},],},{...leg,right: '47%',data: [{name: '22',icon: 'roundRect',},],},{right: '40.8%',...leg,itemWidth: 14, // 图例图形的宽度itemHeight: 1, // 图例图形的高度data: [{name: '33', // 图例文字内容icon: `image://${dragImg}`,},],},],series : [{data: obj.initialSupportPressure?.map(item => {return item.value}),type: 'line',name: '11',},{data: obj.finalSupportPressure?.map(item => {return item.value}),type: 'line',name: '22',},{name:'33',type:'line',markLine: markLine,},],}const options4 = {xAxis:{...defaultOption.xAxis[0],data: (obj[0]?obj[0][0]:null)?.data.map(item => {return item.time}),type: 'category',},color:['#FFDB26', '#579AFF', '#72BF68', '#01C8CF', '#FF5962'],legend:[{data:[{name: '11', icon: 'rect'},{name: '22', icon: 'rect'},{name: '33', icon: 'rect'},{name: '44', icon: 'rect'},// 重点设置{name: '55',itemStyle: { opacity: 0 },lineStyle:{type:'dotted',},},],selectedMode:'multiple',itemWidth: 14,itemHeight: 4,top:20,textStyle: {fontSize: 14,height: 12,color: '#fff',rich: {a: {verticalAlign: 'media',},},},},],series:[{data: (obj[0]?obj[0][0]:null)?.data.map(item => {return item.value}),type: 'line',name: '11',},{data: (obj[1]?obj[1][0]:null)?.data.map(item => {return item.value}),type: 'line',name: '22',},{data: (obj[2]?obj[2][0]:null)?.data.map(item => {return item.value}),type: 'line',name: '33',},{data: (obj[3]?obj[3][0]:null)?.data.map(item => {return item.value}),type: 'line',name: '44',},// 重点设置{name:'55',type:'line',symbol:'none',markLine: markLine,},],}const options = !haveFourCol?options2:options4// 判断是 否存在 多数据const optionsBlo = !haveFourCol?(obj.finalSupportPressure && obj.finalSupportPressure.length):(obj[0] && obj[0].length)if (optionsBlo){return {dataZoom: [{type: 'inside',},{type: 'slider',show: false,},],yAxis: {...defaultOption.yAxis[0],type: 'value',max:haveFourCol?60:null,},grid: {left: 50,right: 25,top: 60,bottom: 30,},tooltip: {trigger: 'axis', // 触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，axisPointer: {  // 坐标轴指示器，坐标轴触发有效，type: 'line', // 默认为line，line直线，cross十字准星，shadow阴影crossStyle: {color: '#fff',},},},...options,}}else {return {title: {left: 'center',top: 'center',textStyle: {fontSize: 14,},subtext: '暂无数据！',},}}
}

这篇关于关于echars 操作legend 解决方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---