VUE Echarts 饼图 - 组件化, 多饼图

前言: 由于有地方需要使用饼图展示, 就搜索了下, 发现Echarts 很好用. 就直接拿来用了.

• Echarts官网
  https://echarts.apache.org/zh/index.html
• Echarts安装

npm install echarts --save

• 饼图组件

<template>
  <div class="pieChart" :id="id"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  props: ["id", "pie_data"],
  data() {
    return {
      // items: [],
    };
  },
  methods: {
    draw_pie() {
      let charts = echarts.init(document.getElementById(this.id));
      charts.setOption({
        title: {
          text: this.pie_data.title, // 标题文本
          left: "center", //标题位置
        },
        //扇形区域的颜色
        // color: ["#FF6384", "#36A2EB", "#FF9F40", "#4BC0C0", "#FFCD56"], 
        // 鼠标划过时饼状图上显示的数据
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/> {b} :{c} ({d}%)", //饼图悬停图形区域后, 展示样式.  例如:  pay /r   日常消费: 100 (23%)
        },
        // 图例
        legend: {
          bottom: 20, //控制图例出现的距离,  默认左上角
          left: "left", //控制图例的位置
          data: this.pie_data.names, // 图例上显示的饼图各模块上的名字
          orient: "vertical", //名称显示位置, 默认横向
        },
        series: [
          {
            name: this.pie_data.title, // 提示框标题
            type: "pie", //echarts图的类型,   PIE代表饼图
            // radius: "65%", //饼图中饼状部分的大小所占整个父元素的百分比
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            // center: ["50%", "50%"], //整个饼图在整个父元素中的位置
            selectedMode: "single",
            data: this.pie_data.values, // 扇形区域数据, 每个模块的名字和值
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
      window.addEventListener("resize", function () {
        charts.resize();
      });
    },
  },
  mounted() {
    // 适合在mounted的时候就画饼图
    // this.draw_pie()
    this.$nextTick(function () {
      this.draw_pie();
      console.log("echarts mounted");
    });
  },
};
</script>
<style scoped>
.pieChart {
  height: 275px;
  /* width: 300px; */
  background-color: #fff;
}
</style>

• 组件的调用:

<piedemo id="pie_child" :pie_data="pay_pies"></piedemo>
<script>
import piedemo from "./comp/PieDemo.vue"  //引入组件
export default {
	components: {
    	piedemo
  	},
  	data: () => ({
  		pay_pies: {
      	title: "pie 1",
      	names: ["餐饮日常", "居家日常"],
      	values: [
        	{ name: "餐饮日常", value: 1218.37 },
        	{ name: "居家日常", value: 1967.98 },
      	],
    },
  	})
  }
</script>        

• 效果图
  
• 参考连接
  https://blog.csdn.net/weixin_43569405/article/details/102620973

遇到问题:

1. 多饼图实现:
   参考连接: https://www.cnblogs.com/bingchenzhilu/p/12883503.html

//组件中有一个地方是取ID的, 最开始直接写死ID, 后来改为从节点上取. 
let charts = echarts.init(document.getElementById(this.id));

2. 前端发现 [Vue warn]: Error in nextTick: “Error: Initialize failed: invalid dom.”
   原来是: 组件中将id 写错误.

<div class="pieChart" id="id"></div>
//改为
<div class="pieChart" :id="id"></div>