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

    }
  • 相关阅读:
    一些概念理解(持续更新)
    python练习题
    linux常用命令
    数据库索引的一点学习(待更新)
    sql注入的一点学习(待更新)
    python 选择排序的实现
    python 冒泡排序的实现
    1--初始配置
    0--HttpUrlConnection 基础知识
    1--HTTP基础知识
  • 原文地址:https://www.cnblogs.com/yzhihao/p/10623578.html
Copyright © 2011-2022 走看看