v-charts环图点击事件

v-charts

需求

环图展示统计的数据，默认展示的块需要突出高亮显示，点击某个条件块时，若是突出显示的则取消突出显示，不是突出显示的则高亮突出显示，并根据点击的条件去后台查询数据。

完整代码

<template>
  <div class="content">
    <div class="top-content">
      <div class="chartBox">
        <div class="title">学习阶段情况</div>
        <div class="objCount">总人数：{{ count }}个</div>
        <ve-ring
          ref="chart_process"
          style="height:400px"
          :extend="chartExtend"
          :data="chartDataP"
          :settings="chartSettings"
          :events="chartPEvents"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  data() {
    // 设置环形图半径
    this.chartSettings = {
      radius: [60, 100],
      label: {
        formatter: params => {
          return `${params.data.name}:${params.data.value}个`
        }
      }
    } 
    this.chartExtend = {
      legend: {
        show: true,
        bottom: 'bottom'
      },
      // 设置多选
      selectedMode:'multiple',
      selectedOffset:10
    }
    const _this = this
     // 饼图点击事件
    this.chartPEvents = {
      click: function(e) {
        const index = _this.selectKey.indexOf(e.name)
        const chartP = _this.$refs.chart_process.echarts
        const pRows = _this.chartDataP.rows
        // 管理员点击
        if( index === -1){
          _this.selectKey.push(e.name)
        }else{
          _this.selectKey.splice(index,1)
        }
        for(let i=0;i<pRows.length;i++){
          chartP._api.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: i})
          _this.selectKey.map(item=>{
            if(item===pRows[i].name){
              chartP._api.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: i})
            }
          })
        }
        // 列表展示的数据
        _this.listData = []
        _this.page = 0
        _this.loading = false
        _this.finished = false
        _this.refreshing = false
        //去后台查询数据
        _this.getNotChartData()
      }
    }
    return {
      // 加载模块需要的数据
      loading: false,
      finished: false,
      refreshing: false,
      size: 10,
      page: 0,
      count: null, // 总数据
      // 默认选中全部值
      selectKey: ['小学', '初中', '高中', '大学'],
      chartDataP: {
        columns: [],
        rows: []
      },
      listData: []
    }
  },
  created() {
    this.getData()
    this.$nextTick(() => {
      // 解决v-charts不显示问题
      this.$refs.chart_process.echarts.resize()
    })
  },
   mounted() {
      this.$nextTick(() => {
        let chartP = this.$refs.chart_process.echarts
        // 定时器是为了确保将环图所需的数据加载完
        setTimeout(()=>{
          let pRows = this.chartDataP.rows
          for(let i=0;i<pRows.length;i++){
            this.selectKey.map(item=>{
              // 根据后台返回的数据  设置默认的展示的块高亮突出显示
              if(item===pRows[i].name){
                chartP._api.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: i})
              }
            })
          }
        },500)
      })
    },
  methods: {
    // 获取所有数据
    // 根据实际情况   后台返回的数据来赋值
    getData() {
      this.count = 659
      this.chartDataP.columns = ['name', 'number']
      this.chartDataP.rows = [
        { name: "小学", number: 122 },
        { name: "初中", number: 145 },
        { name: "高中", number: 269 },
        { name: "大学", number: 123 }
      ]
    },
    getNotChartData() {
      // 去后台查询数据
      // .....
    }
  }
}
</script>
<style lang="less" scoped>
.content{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.2rem;
  margin-bottom: 1.33333rem;
  overflow-y: scroll;
  .top-content{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding-bottom: 4px;
  }
  // 环形图样式
  .chartBox{
    position: relative;
    top: 0;
    left: 0;
    width:100%;
    border: 1px solid #F2F2F2;
    border-radius: 0.2rem;
    margin-bottom: 0.2rem;
    .objCount{
      position: absolute;
      top: 46%;
      left: 37%;
      width:100px;
      font-size: 0.4rem;
      color: #666666;
    }
    .title{
      position: absolute;
      left: 40%;
      top: 30px;
      font-size: 0.4rem;
      font-weight: 600;
      color: #666666;
    }
  }
}
</style>

效果展示