Echarts+VUE实现普通饼图+玫瑰图+圆环图_vue简单的饼图

一、代码实现

饼状图跟柱状图有点不一样，大部分设置是在series里面的label中进行设置，可以通过改动某些设置实现以下三种图。

<template>
  <div id="main_pie" style="width: 100%; height: 450px"></div>
</template>
 
<script>
import * as echarts from 'echarts';
 
export default {
  name: "pie",
  data() {
    return {
      xy_data: [
        {name: '一', value: 100, value2: 190,},
        {name: '二', value: 180, value2: 110,},
        {name: '三', value: 120, value2: 170,},
        {name: '四', value: 160, value2: 160,},
        {name: '五', value: 140, value2: 130,},
        {name: '六', value: 280, value2: 240,},
        {name: '七', value: 320, value2: 300,},
      ],
    };
  },
  created() {
    this.initPie();
  },
  methods: {
    initPie() {
      this.$nextTick(() =>{
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main_pie'));
        // 指定图表的配置项和数据
        let option = {
          // 全局颜色配置
          color: [
            '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622',
          ],
          // echarts标题
          title: {
            text: '饼图'
          },
          tooltip: {},
          // legend中的data一定要跟series里面的data的name保持命名一致，否则无效，不会显示legend
          legend: {
            data:  this.xy_data.map(item => {
              return {
                name: item.name.concat('月'),
              };
            })
          },
          series: [
            {
              // 数据全为0也显示扇区
              stillShowZeroSum: true,
              // 是否高亮
              legendHoverLink: true,
              // 玫瑰图
              // roseType: 'area',
              name: '销量',
              // 如果有两个值，则为圆环图，第一个值为内半径，第二个值为外半径
              // radius: ['20%', '60%'],
              radius: '70%',
              // 饼状图标签
              label: {
                show: true,
                // 标签显示的位置，默认为outside
                // position: 'inside',
                // 字符串模板,可对文本标签内容进行设置
                //{a}：系列名。{b}：数据名。{c}：数据值。{d}：百分比。等等，详细见网站
                formatter: '{b}:{d}%',
              },
              // 此系列自己的调色盘。优先级高于全局颜色配置
              // color: [
              //   '#dd6b66',
              //   '#759aa0',
              //   '#e69d87',
              //   '#8dc1a9',
              //   '#ea7e53',
              //   '#eedd78',
              //   '#73a373',
              // ],
              type: 'pie',
              data: this.xy_data.map(item => {
                return {
                  name: item.name + '月',
                  value: item.value
                };
              })
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      })
    },
  }
};
</script>

二、基础饼图

基础饼图的实现效果如下：

 三、圆环图

给radius设定两个值，第一个值为内半径，第二个值为外半径，这样就实现了简单的圆环图。

 四、玫瑰图（南丁格尔图）

在series里面加上roseType: 'area'即可实现玫瑰图的效果。