v-charts修改点击图例事件,legendselectchanged

摘要:
html:˂ve Line:extend=“item.chartExtend”:数据缩放=“dataZoom”:height=“chartHeight”:图例=“item.legend”:data=“item”:events=“chartEvents”:settings=“isRateTypeData(item.id)?
html:
<!--折线图-->
<ve-line :extend="item.chartExtend"
:data-zoom="dataZoom"
:height="chartHeight"
:legend="item.legend"
:data="item"
:events="chartEvents"
:settings="isRateTypeData(item.id)?successRateSettings:chartSettings"></ve-line>


需要在v-charts图表添加legend属性
chartDataColumns.map(item => {
console.log('chartDataColumns66',chartDataColumns)
if(item !== 'TIME'){
selectedObj[item] = true
}
})
chartItem['legend'] = selectedObj// 如果点击设置selected无效,则先去掉这行



this.chartEvents = {
legendselectchanged: (item) => {
let currSelectName = item.name
let currChartItem = self.chartData[self.deleteIndex]
let selectedObj = item.selected
let selectedNum = 0
for(let key in selectedObj){
if(selectedObj[key]){ // selected对象内值为true
selectedNum++
}
selectedObj[key] = false
}
if(selectedNum > 1){ // selectedNum > 1说明当前全部选中,此时点击,只有当前的设为选中
for(let key in selectedObj){
selectedObj[key] = false
}
selectedObj[currSelectName] = true
}else{ // 当前只有一个选中,点击后,全部重置为选中
for(let key in selectedObj){
selectedObj[key] = true
}
}
self.$set(currChartItem['legend'], 'selected', selectedObj)
},
  legendscroll: (params) => {// 选中图例时,设置legend滚动页码,防止自动切回第一页
  let legend = this.chartItemData['legend']
   this.$set(legend, 'scrollDataIndex', params.scrollDataIndex)
  },

}

免责声明:文章转载自《v-charts修改点击图例事件,legendselectchanged》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇vue 项目按需引入多个ui组件库Hi3516DV300芯片报错“ undefined reference to ×”下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

R语言绘图如何把图例绘制在外边及调整图例位置

1、 par(mai=c(2,2,2,2)) plot(1:10) legend(1,-1,"aaa",xpd=TRUE,box.lwd = 3, pch=15) legend(11,11,"bbb",xpd=TRUE,box.lwd = 3, pch=15) 2、 par(mai=c(2,2,2,2)) plot(1:10)...

echarts图例的位置及大小,环图中间字

https://blog.csdn.net/qq_34790644/article/details/89308738 Echarts饼状图属性设置大全 https://blog.csdn.net/sleepwalker_1992/article/details/82532210...

图形化报表之MSChart报表

MSChart报表 1.Annotations --图形注解集合   2.ChartAreas --图表区域集合   3.Legends   --图例集合   4.Series    --图表序列集合(即图表数据对象集合)   5.Titles    --图标的标题集合   Annotations注解集合   Annotations是一个对图形的一些注解对...

组合图制作,Graphpad Prism

https://www.sohu.com/a/160902160_170798 当我们展示实验结果时,经常需要把有内在逻辑联系的几个图组成一张大图,像这样: 这种图看起来简单,但是如果排列不整齐的话会犯强迫症的,仿佛看到一口歪牙…… 如果杂志编辑犯了强迫症,就看你文章是不是够牛,能够平息对方的怨气了。就算人家愿意帮你改,也会延长见刊时间。所以我们还是自...

Qt开发技术:QtCharts(一)QtCharts基本介绍以及图表框架详解

若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/article/details/102478062本文章博客地址:https://blog.csdn.net/qq21497936/article/details...

echarts自定义图例legend文字和样式

话不多说,先上效果图。 要完成这个图并不难,主要是下面那个图例比较难,需要定制。 让我们从官方文档找找思路,官方文档关于legend.formatter是这样的:链接在这 难点在于: 1.这里的图例文本包含两个变量,而formatter提供的变量模板只有name 2.两个变量的样式各不相同 3.对齐,换行与居中的应用 formatter有两种:一是模板...