echarts中实现如下图legend某个值默认不显示
第一种方法 legend的selected
legend: {
data: ['支付金额(元)', '结算金额(元)','支付人数','店铺访客数'],
icon: "circle",
right:35,
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
textStyle: { // 图例文字的样式
fontSize: 12
},
selected:{
'支付金额(元)':true,
'结算金额(元)':true,
'支付人数':false,
'店铺访客数':false
}
},
第二种方法 (完整版)
methods:{
//设置折线图
getTransactionLine(){
let legend=['支付金额(元)', '结算金额(元)','支付人数','店铺访客数']
let selectedLegend={}
//2.1这种写法
for(let i in legend){
if(legend[i].indexOf('结算金额(元)')==-1&&legend[i].indexOf('支付金额(元)')==-1){
selectedLegend[legend[i]]=false
}
}
//2.2或者这种写法 除了结算金额元不显示 其他都显示
for(let i in legend){
if(legend[i].indexOf('结算金额(元)')>-1){
selectedLegend[legend[i]]=false
}
}
var option = {
legend: {
data: legend,
selected:selectedLegend,
icon: "circle",
left:'center',
itemWidth: 10, // 设置宽度
itemHeight: 10, // 设置高度
textStyle: { // 图例文字的样式
fontSize: 12
},
},
xAxis: {},
yAxis: { },
series: [],
}
return option
},
//初始化折线图
initTransactionLine(){
var lineChart =this.$echarts.init(this.$refs.transactionLine, null, {devicePixelRatio: 2.5});
var option = this.getTransactionLine()
lineChart.setOption(option)
}
}
mounted(){
this.initTransactionLine()
}
~~完结~