echart饼图

饼图

<template>
  <div class="pie-chart">
    <div class="chart-sty" ref="main"></div>
  </div>
</template>

传过来的数据和默认数据

import * as echarts from "echarts";
export default {
  name: "PieChart",
  props: {
    reportsList: {
      type: Object,
      default: () => {
        return {
          title: {
            text: "饼图",
          },
          tooltip: {},
          xAxis: {
            show: false,
          },
          yAxis: {
            show: false,
          },
          series: [
            {
              name: "销量",
              type: "pie",
              radius: "40%",
              data: [
                {
                  value: 5,
                  name: "衬衫",
                },
                {
                  value: 20,
                  name: "羊毛衫",
                },
                {
                  value: 36,
                  name: "雪纺衫",
                },
                {
                  value: 10,
                  name: "裤子",
                },
                {
                  value: 10,
                  name: "高跟鞋",
                },
                {
                  value: 20,
                  name: "袜子",
                },
              ],
            },
          ],
        };
      },
    },
  },
  data(){
    return {
      lineList:{}
    }
  },

对数据进行合并展示相应的样式：

mounted() {
    //基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(this.$refs.main);
     /* 深拷贝一下 生成两个不同的对象 */
    this.lineList = JSON.parse(JSON.stringify(this.reportsList));
    /* 展示标题 */
    this.lineList.title = {
      text: "华东饼图数据",
    };
    /* 展示提示框组件 */
    this.lineList.tooltip = {
      /* a表示系列名 <br/>表示换行 b表示数据名 c表示数据值 d表示所占的百分比 */
      formatter: '{a} <br> {b} <br> {c} <br> ({d}%)'
    };
     /* 把图例的位置调整一下 */
    this.lineList.legend.top = '10%';
    this.lineList.legend.left = '0';

    /* 只显示华东的饼图数据 */
    this.lineList.series.splice(1)
    /* 先把图标的类型都改成饼图 */
    this.lineList.series[0].type = 'pie';
    /* 把图例中除了华东的图例都删掉 */
    this.lineList.legend.data.splice(1);
    /* 拿到时间集合用来展示饼图的name值 */
    let nameList = this.lineList.xAxis[0].data;
    /* 拿到数据用来展示饼图的value值 */
    let valueList = this.lineList.series[0].data;
    /*  let data = [{
      name:"2017-12-27",
      value:2999
    }] */
    let newArr = [];
    /* 下面的操作是为了把两个数组整合成上面的格式 */
    nameList.forEach((r,i)=>{
      let obj = {
        name:r,
        /* 因为两个数组的长度是一样的，
        索引对应的值也是一样的，key和value的值是相对应，
        所以直接使用如下方式取值 */
        value:valueList[i]
      }
      /* 把组装好的对象塞到新数组中 */
      newArr.push(obj)
    })
    /* 给华东的数据组转好格式后重新赋值，为了展示饼图线对应的名字 */
    this.lineList.series[0].data = newArr;
    /* 设置饼图的圆心的大小和圆的大小 */
    this.lineList.series[0].radius = ['10%', '45%'];
    /* 设置圆的上下左右的距离 */
    this.lineList.series[0].center = ['58%', '60%'];
    /* 把圆的形状设置成玫瑰形 */
    this.lineList.series[0].roseType = 'area';
    /* 给圆设置圆角 */
    this.lineList.series[0].itemStyle = {
      borderRadius: 5
    }
    /* 把x轴隐藏 */
    this.lineList.xAxis = {
      show:false
    }
    /* 把y轴隐藏 */
    this.lineList.yAxis = {
      show:false
    }
   
    // 绘制图表
    myChart.setOption(this.lineList);
    window.PieChart = myChart;
  },
};
</script>

<style scoped lang="scss">
.chart-sty {
  height: 300px;
}
</style>

展示提示框组件 a表示系列名
表示换行 b表示数据名 c表示数据值 d表示所占的百分比

    this.lineList.tooltip = {
     
      formatter: '{a} <br> {b} <br> {c} <br> ({d}%)'
    };