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

    }
  • 相关阅读:
    论程序员的自我修养
    设计模式之:行为型设计模式(11种)
    设计模式之:结构型设计模式(7种)
    @import "../style/lines.scss" 导致background: url()路径无效问题
    node express 设置重定向
    png8和png24的区别
    vue scss 使用 及 踩坑
    js 防抖 节流
    js 次方 开方 对数
    css 修改placeholder样式
  • 原文地址:https://www.cnblogs.com/yzhihao/p/10623578.html
Copyright © 2011-2022 走看看