vue echarts饼图自动选中点击选中

最新推荐文章于 2024-09-09 14:08:32 发布

发根强劲

最新推荐文章于 2024-09-09 14:08:32 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/qq_42619759/article/details/121552148

版权

该博客介绍了如何在基于Ant Vue的前端项目中使用自定义饼图组件`clickPieChart`。组件实现了点击饼图块触发相应事件的功能，包括数据更新和重置。当用户点击饼图块时，会触发`chartClick`方法，改变高亮状态，并通过`$emit`传递数据。同时，组件还具备定时轮询效果，每3秒自动切换高亮的饼图块。

摘要由CSDN通过智能技术生成

请添加图片描述
UI框架为ant-vue
index.vue主页

<template>
  <div>
    <a-card style="margin-bottom: 20px;">
      <clickPieChart ref="chart1" @param="getParam1" :chartName="'chartName1'" />
      <clickPieChart ref="chart2" @param="getParam2" :chartName="'chartName2'" />
    </a-card>
  </div>
</template>

<script>
import clickPieChart from './echarts/click-pie-chart.vue'

export default {
  name: '',
  components: { clickPieChart },
  props: {},
  data() {
    return {
      chartData1: {},
      chartData2: {}
    }
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    getParam1(val) {
      this.chartData1 = val
      if (this.chartData2.reset) {
        this.$refs.chart2.chartClick()
        this.chartData2.reset = false
      }
    },
    getParam2(val) {
      this.chartData2 = val
      if (this.chartData1.reset) {
        this.$refs.chart1.chartClick()
        this.chartData1.reset = false
      }
    }
  }
}
</script>

<style scoped lang="less">
::v-deep {
  .ant-card-body{
    display: flex;justify-content: space-around;
  }
}
</style>

饼图组件click-pie-chart.vue

<template>
	<div class="pressure">
    <div style="width:100%;height:400px;" :id="chartName"></div>
	</div>
</template>

<script>
export default {
	name: 'Pressure',
	components: {},
  props: {
    chartName: {
      type: String,
      default: true
    },
  },
	data() {
		return {
      chartOption: {},
      chartData: [],
      chartIndex: -1,
      chartTimer: null,
      chartCurrentIndex: -1,
      myChart: {}
		}
	},
  computed: {
  },
	created() {},
	mounted() {
    this.getTestInfoCookie()
	},
  beforeDestroy() {
    this.chartTimer && clearInterval(this.chartTimer)
  },
	methods: {
    // 获取数据
    getTestInfoCookie() {
      let arr = [
        { name: '61-70', value: 2 },
        { name: '71-80', value: 6 },
        { name: '81-90', value: 10 },
        { name: '91-100', value: 9 },
        { name: '101-150', value: 14 },
        { name: '200+', value: 1 }
      ]
      this.chartData = arr
      this.myChart = this.$echarts.init(document.getElementById(this.chartName))
      this.chartOption = {
        title: {
          text: '7天龄期 各强度情况占比分布' ,
          left: 'center',
          bottom: '6%',
          textStyle: {
            color: '#8c9ead',
            fontSize: 14,
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let str = params.name + " : " + params.value + ' (' + params.percent + '%)'
            return str
          },
          // triggerOn: "mousemove",
          // alwaysShowContent: false,
        },
        legend: {
          show: true,
          right: '6%',
          top: '24%',
          bottom: '18%',
          orient: 'vertical',
          type: 'scroll',
          textStyle: {
            color: '#8c9ead'
          },
          selectedMode:false,
        },
        series: [{
          type: 'pie',
          name: '7',
          radius: ['0%', '50%'],
          center: ['30%', '50%'],
          label: {
            show: false,
          },
          data: this.chartData
        }]
      }
      this.myChart.setOption(this.chartOption, true)

      this.pieClick(this.myChart)
      const sevenDataLen = this.chartData.length
      this.playEcharts(this.myChart, sevenDataLen)
    },

    // 饼图点击
    pieClick(charts) {
      const that = this
      let dataIndex = -1
      charts.on("click", pieFun);
      function pieFun(param) {
        let sonData = JSON.parse(JSON.stringify(param.data))
        if (param.dataIndex === that.chartIndex) {
          that.chartClick()
          sonData.reset = false
          that.$emit('param', sonData)
        } else {
          if (that.chartCurrentIndex >= 0) {
            charts.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: that.chartCurrentIndex
            })
            that.chartCurrentIndex = -1
          } else {
            charts.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex
            })
          }
          dataIndex = param.dataIndex
          that.chartIndex = param.dataIndex
          charts.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex
          })
          // that.chartOption.tooltip.triggerOn = 'click'
          // that.chartOption.tooltip.alwaysShowContent = true
          clearInterval(that.chartTimer)
          sonData.reset = true
          that.$emit('param', sonData)
        }
      }
    },
    
    // 重置
    chartClick() {
      this.myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: this.chartIndex
      })
      this.myChart.dispatchAction({
        type: 'hideTip'
      })
      this.chartIndex = -1
      // this.chartOption.tooltip.triggerOn = 'mousemove'
      // this.chartOption.tooltip.alwaysShowContent = false
      const dataLen = this.chartData.length
      this.playEcharts(this.myChart, dataLen)
    },
    
    // 定时轮询
    playEcharts(chartRef, dataLen) {
      const that = this
      clearInterval(that.chartTimer)
      let dataIndex = -1
      that.chartTimer = setInterval(() => {
        if (chartRef) {
          chartRef.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex
          })
          dataIndex = (dataIndex + 1) % dataLen
          that.chartCurrentIndex = dataIndex
          chartRef.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex
          })
          // 显示 tooltip
          chartRef.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex
          })
        }
      }, 3000)
    },
	}
}
</script>

<style scoped lang="less">
.pressure {
  height: 100%;
  width: 100%;
}

</style>