Echarts +VUE 环形图绘制并让其中间显示数值总数

公司项目需要制作一个多个echarts图表的页面，其中有一个环形图，本人刚毕业实习分享一下自己做的。

先上原型图：

成果图：

 首先是HTML代码：

<template lang="">
    <div
                ref="myChart"
                id="myChart"
                :style="{ width: '100%', height: '290px' ,}"
              ></div>
</template>

然后实现代码：

<script>
import api from "@/api/sycharts"; //接口文件
export default {
  data() {
    return {

    };
  },
  methods: {
    //接口数据对接
    async drawLine() { 
      await api.findA().then(data => {
          data.map((item=>{
            item.value = item.totalWeight
            return item 
          }))
          this.data1 = data
        });

        //数据汇总算法
      const dataNum = this.data1.reduce((pre, cur) => {
        return pre*1 + cur.value*1
      },0);
        //数据取两位小数
      let zong = parseFloat(dataNum).toFixed(2);
        //初始化图表
      const dom = this.$refs["myChart"];
      const myChart = this.$echarts.init(dom);
        //绘制图表
      const option = {
        //使用标题来显示数据总和
        title: {
          x: "36%",     //X坐标   
          y: "29%",    //Y坐标
          text: "   总量",   //主标题
          subtext: zong,   //副标题
          textStyle: {    //标题样式
            fontSize: 18,
            fontWeight: "bolder",
            color: "#aaa",
            transform: "translate(-50%,-50%)",
            marginTop:"-50%",
            marginLeft:"-50%",
          },
          subtextStyle: {   //副标题样式
            fontSize: 26,
            fontWeight: "bolder",
            color: "#333",
            formatter: '', 
            marginTop:"-50%",
            marginLeft:"-50%",
            transfrom:"translate(-50%,-50%)"
          },
        },
        //提醒条
        tooltip: {
          trigger: "item",
          formatter: " {b}: {c} ({d}%)",
        },
        //图例
        legend: {
          top: "20%",
          orient: "vertical",
          right: "13%",
          backgroundColor: "rgb(245,247,249)",
          borderWidth: 30,
          borderColor: "rgb(245,247,249)",
        },
        //标签样式
        label: {
          formatter: "  {per|{d}%}  ",
          rich: {
            per: {
              color: "#000",
            },
          },
        },
        //内容
        series: [
          {
            center: ["41%", "40%"], //图表位置
            type: "pie",
            radius: ["40%", "60%"],  //圆环设置
            data: this.data1,    //数据
                //环形图数据颜色设置
            itemStyle: {      
              normal: {
                borderColor: "#fff", 
                borderWidth: 3,
                color: function (colors) {
                  var colorList = [
                    "rgb(243,145,78)",
                    "rgb(251,183,94)",
                    "rgb(255,219,98)",
                    "rgb(70,205,161)",
                    "rgb(2,140,141)",
                  ];
                  return colorList[colors.dataIndex];
                },
              },
            },

            label: {
              normal: {
                show: true,
                color: "#4c4a4a",
                formatter: "{active|{d}%}" + "\n\r" + "{total| {b} }",
                rich: {
                  total: {
                    fontSize: 15,
                    color: "#454c5c",
                  },
                  active: {
                    fontSize: 15,
                    color: "#6c7a89",
                    lineHeight: 30,
                  },
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawLine();
  },
};

</script>

这个项目已经对接数据了，可以改成假数据只需在series data里面写假数据即可。

标题需要调整位置可以根据自己需求改变位置。也可以改变series里面的label。

如果想修改其他样式可以到Echarts的官网查看Documentation - Apache ECarts