Vue+Echarts饼状图展示

最新推荐文章于 2023-08-13 21:29:28 发布

coder_wangs

最新推荐文章于 2023-08-13 21:29:28 发布

阅读量653

点赞数 1

CC 4.0 BY-SA版权

文章标签： echarts vue.js javascript

本文链接：https://blog.youkuaiyun.com/web_wp/article/details/121786224

本文展示了如何在Vue中复用Echarts组件来创建饼图，并监听图表的点击事件。通过`PieChart.vue`组件，接收数据并设置图表样式，当点击饼图扇形时触发`chartClick`事件，传递扇形信息。同时，详细展示了组件的模板、样式和脚本部分，以及如何初始化Echarts实例和设置图表选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm install echarts -S

一，引用组件

<template>
  <div class="analysis">
    <PieChart :chartData="chartList"
              @chartClick="chartClick" />
  </div>
</template>

<script>
import PieChart from './PieChart.vue'

export default {
  name: 'IndexAnalysis',
  components: {
    PieChart,
  },
  data() {
    return {
      chartList: [
        {
          name: 'recall_error',
          value: 3,
          itemStyle: {
            color: '#9a60b4',
          },
        },
        {
          name: 'rank_error',
          value: 5,
          itemStyle: {
            color: '#fc8452',
          },
        },
        {
          name: 'qp_error-QP',
          value: 2,
          itemStyle: {
            color: '#5470c6',
          },
        },
      ],
    }
  },
  methods: {
    //接受echarts扇形信息传递
    chartClick(param) {
      console.log(param)
    },
  },
}
</script>

<style scoped>
</style>

二，复用 Echarts 组件

<template>
  <div id="chart"
       ref="chart">
  </div>
</template>

<style scoped>
#chart {
  width: 500px;
  height:300px;
  display: inline-block;
}
</style>

<script>
// 引入 ECharts 主模块
import * as ECharts from 'echarts'
export default {
  props: {
    chartData: {
      type: Array,
      default: [],
    },
  },
  methods: {
    echartTree() {
      this.myChart = ECharts.init(this.$refs.chart)
      this.myChart.setOption(
        (this.optionChart = {
          tooltip: {
            triggerOn: 'click',
            trigger: 'item',
          },
          series: [
            {
              type: 'pie',
              radius: '50%', //图形大小
              data: this.seriesData,
              center: ['50%', '50%'], // 图形位置 默认全局居中
              emphasis: {
                //设置鼠标放到哪一块扇形上面的时候，扇形样式、阴影
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'blue',
                  normal: {
                    color: ['#FE8463', 'red', 'green'],
                  },
                },
              },
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    //百分比展示
                    formatter: `{b} : {d}% - {c}`,
                    textStyle: {
                      fontSize: 14,
                      fontWeight: 'bolder',
                    },
                  },
                },
              },
            },
          ],
        })
      )
      this.myChart.off('click')
      // 饼状图点击扇形 数据传递
      this.myChart.on('click', (params) => {
        this.$emit('chartClick', params)
      })
    },
  },
  mounted() {
    console.log(this.seriesData)
    this.echartTree()
  },
  data() {
    return {
      myChart: null,
      seriesData: this.$props.chartData,
      optionChart: '',
    }
  },
  watch: {
    chartData(val) {
      if (val) {
        this.seriesData = val
      } else {
        this.seriesData = null
      }
      this.echartTree()
    },
  },
}
</script>