vue项目中饼图的渲染

最新推荐文章于 2024-03-01 22:50:26 发布

慢慢の成长

最新推荐文章于 2024-03-01 22:50:26 发布

阅读量746

点赞数

分类专栏： echarts 前端助手文章标签： vue

本文链接：https://blog.csdn.net/weixin_44537264/article/details/107381298

版权

前端助手同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

echarts

5 篇文章 0 订阅

订阅专栏

注意：后台返回的数据字段可能会和echarts实例对应的字段不一样，需要我们处理

<template>
  <div>
    <section ref="pieChart" style="width: 100%;height:400px"></section>
  </div>
</template>

效果展示：

在这里插入图片描述

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
    	pieEchartsData: {
        total_count: 49,
        data_list: [{legend_name: '服务态度', count: 23}, {legend_name: '运输及时性', count: 4}, {legend_name: '运输清洁密封情况', count: 7}, {legend_name: '车容状况', count: 7}, {legend_name: '收费情况', count: 8}]
      }
     }
  },
  mounted() {
    this.drawPieChart(this.pieEchartsData)
  },
  created() {},
  methods: {
    setColorArr() {
      const arr = ['#1fca3f', '#f90f1b', '#989898', '#0c23f5', '#c23531']
      return arr
    },
    drawPieChart(item) {
      let pieData = []
      // 将数据格式转换成echarts固定格式
      item.data_list.map(e => {
        var temp = {}
        temp.value = e.count
        temp.name = e.legend_name
        pieData.push(temp)
      })
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        graphic: { // 圆心中间文字
          type: 'text',
          left: 'center',
          top: 'center',
          style: {
            text: '总量：' + item.total_count + '件',
            textAlign: 'center',
            fill: '#000',
            width: 30,
            height: 30,
            fontSize: 12
          }
        },
        color: this.setColorArr(),
        series: [
          {
            name: '总量',
            type: 'pie',
            radius: ['50%', '70%'],
            label: {
              formatter: '{b}：{c}个  (占{d}%)'
            },
            data: pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      let pieChart = echarts.init(this.$refs.pieChart)
      pieChart.setOption(option, true)
      window.addEventListener('resize', function() {
        pieChart.resize()
      })
    }
  }
}
</script>