Echarts升级7：环状图+标题设置+legend属性

 效果

注意的点：

• title样式
• 颜色设置
• legend颜色设置
• legend   textStyle 样式设置；formatter样式设置，文字拆分

 代码：

<template>
  <div style="width: 100%; height: 100%;">
    <div id="siteStatusStatisticChart" style="width: 100%; height: 100%;"></div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        allItem: [{
            name: '在线',
            value: 1424,
          },
          {
            name: '离线',
            value: 314,
          },
          {
            name: '维护',
            value: 513,
          },
        ],
      }
    },
    mounted() {
      this.initChart()
    },
    methods: {
      // getSelectAreaData(obj) {
      //     this.getRealDatas(obj)
      //   },
      //初始化echart
      initChart() {
        let chartDom = document.getElementById("siteStatusStatisticChart");
        this.myChart = this.echarts.init(chartDom);
        let sum = this.allItem.reduce((cur, pre) => {
          return cur + pre.value;
        }, 0);
        let dataline = [];
        let legendData = [];
        var color = [
          '#00FFFF',
          '#006CED',
          '#FFE000',
        ];
        for (var i = 0; i < this.allItem.length; i++) {
          let name = this.allItem[i].name + '/' + this.allItem[i].value;
          legendData.push(name);
          dataline.push({
            value: this.allItem[i].value,
            name: name,
            itemStyle: {
              borderWidth: 0,
              borderRadius: 5,
              shadowBlur: 10,
              borderColor: color[i],
              shadowColor: color[i],
            },
          }, {
            value: sum / 100, // 控制每个环形之间的间隙
            name: '',
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0,
            },
          });
        }
        let option = {
          title: {
            text: `{title|${sum}}\n{subtitle|站点总数}`,
            x: '17%',
            y: 'center',
            textStyle: {
              rich: {
                title: {
                  color: '#00FFFF',
                  fontSize: 31,
                  fontWeight: 'normal',
                  fontWeight: 'bold',
                  align: 'center',
                },
                subtitle: {
                  fontSize: 14,
                  color: '#00FFFF',
                  fontFamily: 'HarmonyOS Sans SC',
                  fontWeight: '400',
                  align: 'center',
                },
              }
            }
          },
          // title: [{
          //     text: sum,
          //     x: '18%',
          //     top: '38%',
          //     textStyle: {
          //      color: '#00FFFF',
          //      fontSize: 31,
          //      fontWeight: 'normal',
          //      fontWeight: 'bold',
          //     },
          //   },
          //   {
          //     text: '站点总数',
          //     x: '19%',
          //     top: '53%',
          //     textStyle: {
          //       fontSize: 14,
          //       color: '#00FFFF',
          //       fontFamily: 'HarmonyOS Sans SC',
          //       fontWeight: '400',
          //     },
          //   },
          // ],
          color: color,
          tooltip: {
            show: false,
          },
          legend: {
            icon: 'rect',
            itemWidth: 5,
            itemHeight: 5,
            itemStyle: {
              borderWidth: 3
            },
            orient: 'vertical',
            data: legendData,
            right: '12%',
            top: 'center',
            align: 'left',
            textStyle: {
              rich: {
                numStyle0: {
                  padding: [3, 0, 0, 8],
                  fontSize:30,
                  color: '#00FFFF',
                  fontWeight: 600,
                },
                numStyle1: {
                  padding: [3, 0, 0, 8],
                  fontSize: 30,
                  color: '#006CED',
                  fontWeight: 600,
                },
                numStyle2: {
                  padding: [3, 0, 0, 8],
                  fontSize:30,
                  color: '#FFE000',
                  fontWeight: 600,
                },
                nameStyle: {
                  padding: [3, 0, 0, 8],
                  verticalAlign: 'right',
                  align: 'left',
                  width: 60,
                  fontSize: 12,
                  color: '#ffffff',
                  fontWeight: 400,
                },
              },
            },
            formatter: name => {
              for (let i = 0; i < legendData.length; i++) {
                if (name == legendData[i]) {
                  return `{numStyle${i}|${name.substring(name.indexOf("\/")+1,name.length)}}\n{nameStyle|${name.substring(0,name.indexOf("/"))}}`
                }
              }
            },
            itemGap: 20, // 图例之间的间隔
          },
          toolbox: {
            show: false,
          },
          series: {
            type: 'pie',
            clockwise: false, //旋转顺序
            radius: ['60%', '80%'],
            center: ['25%', '50%'],
            emphasis: {
              scale: false,
            },
            label: {
              show: false,
            }, //箭头
            data: dataline,
          },
        };
        this.myChart.setOption(option)
      },
    }
  }

</script>
<style scoped>

</style>