Echarts大屏饼图（可自动轮播）

最新推荐文章于 2025-03-19 08:35:10 发布

原创最新推荐文章于 2025-03-19 08:35:10 发布 · 2.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #前端

Echarts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用Echarts实现大屏饼图的自动轮播效果，通过API的highlight和downplay方法控制高亮状态。同时强调在Vue组件复用时，需要正确传递Echarts实例到父组件，以便进行必要的操作，例如在子组件中创建图表后，通过on-send监听并执行相应方法。

API: highlight 启动高亮

downplay 关闭高亮

设置定时器：逐个开启饼块的高亮（注意：在开启下一个前将上一个高亮关闭）

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};
let count = 0;
setInterval(() => {
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
    dataIndex: count
  });
  count++;
  if (count === 5) {
    count = 0;
  }
  myChart.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: count
  });
}, 5000);

option && myChart.setOption(option);

提示:若在vue组件中复用组件引入option配置时，注意将与相关的echarts实例传给父组件，使用对应的实例myChart进行操作,如下案例：

chart.vue 可复用组件：挂载完成后将Echarts实例chart传给父组件

<script>
import * as echarts from 'echarts'
import 'zrender/lib/svg/svg'
import { debounce } from 'throttle-debounce'
export default {
  name: '',
  props: ['option', 'renderer', 'notMerge', 'lazyUpdate'],
  data () {
    return {
      width: '100%',
      height: '100%',
    }
  },
  watch: {
    option (val) {
      this.setOption(val)
    },
  },
  created () {
    this.chart = null
  },
  async mounted () {
    // 初始化图表
    await this.initChart(this.$el)
    // 向父组件传递chart实例
    this.$emit('send', this.chart)
    // 将传入的配置(包含数据)注入
    this.setOption(this.option)
    // 监听屏幕缩放，重新绘制 echart 图表
    window.addEventListener('resize', debounce(100, this.resize))
  },
  updated () {
    // 每次更新组件都重置
    this.setOption(this.option)
  },
  beforeDestroy () {
    // 组件卸载前卸载图表
    this.dispose()
  },
  methods: {
    initChart (el) {
      // renderer 用于配置渲染方式 可以是 svg 或者 canvas
      const renderer = this.renderer || 'canvas'
      return new Promise(resolve => {
        setTimeout(() => {
          this.chart = echarts.init(el, null, {
            renderer,
            width: 'auto',
            height: 'auto',
          })
          resolve()
        }, 0)
      })
    },
    setOption (option) {
      if (!this.chart) {
        return
      }

      const notMerge = this.notMerge
      const lazyUpdate = this.lazyUpdate

      this.chart.setOption(option, notMerge, lazyUpdate)
    },
    dispose () {
      if (!this.chart) {
        return
      }

      this.chart.dispose()
      this.chart = null
    },
    resize () {
      this.chart && this.chart.resize()
    },
    getInstance () {
      return this.chart
    },
  },
  render () {
    const { width, height } = this
    return (
      <div
        class='default-chart'
        style={{ width, height }}
      />
    )
  },
}
</script>

饼状图组件：on-send监听子组件触发的send方法，并执行相应的方法

<script>
import SubTitle from './SubTitle'
import Chart from '../Chart'
export default {
  name: '',
  data () {
    return {
      myChart: null,
      option: 省略...(与上文option设置相同 可复制于此)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.pieActive()
    })
  },
  methods: {
    // 饼状图轮播
    pieActive () {
      let count = 0
      let length = this.option.series[0].data.length
      setInterval(() => {
        this.myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: count,
        })
        count++
        if (count === length) {
          count = 0
        }
        this.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: count,
        })
      }, 5000)
    },
    getChart (chart) {
      this.myChart = chart
    },
  },
  render () {
    return (
      <div style="height:250px;width:480px;position:absolute;left:1402px;top:772px;display:flex;flex-direction: column;">
        <SubTitle title="省份销售占比图"/>
        <div style="flex: 1; position: relative;">
          <Chart option={this.option} on-send={this.getChart} style="position: absolute;top: 10px;"/>
        </div>
      </div>
    )
  },
}
</script>

<style lang="scss" scoped></style>