zoukankan      html  css  js  c++  java
  • v-charts修改点击图例事件,legendselectchanged

    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)
      },

    }
  • 相关阅读:
    图标线性回归移动到指定的位置
    jquery实现图片裁剪
    使用php输出时间格式
    《这些年,我们读过的技术经典图书》主题有奖征文
    JSON数据格式
    设计模式-命令模式
    windows vc6 release 调试
    hdu4530小Q系列故事——大笨钟
    设计模式-建造者模式
    设计模式-外观模式
  • 原文地址:https://www.cnblogs.com/yzhihao/p/10623578.html
Copyright © 2011-2022 走看看