彩虹坐标

描述:当前是关于Echarts图表中的 饼图 示例。
 
            let series = [
   {
      type: "bar",
      name: '房产',
      coordinateSystem: "polar",
      label: {
         show: false,
      },
      data: [
         {
            value: 5300,
            itemStyle: {
               color: "#00A0E7",
            },
         }
      ],
   },
   {
      type: "bar",
      name: '地产',
      coordinateSystem: "polar",
      label: {
         show: false,
      },
      data: [
         {
            value: 4700,
            itemStyle: {
               color: "#EB6B9E",
            },
         }
      ],
   }
];
let sum = 10000;
option = {
   backgroundColor: '#080b30',
   polar: {
      radius: [160, "70%"],
      center: ["50%", "50%"],//位置
   },
   title: {
      textStyle: {
         color: '#fff',
         rich: {
            a: {
               fontSize: 14,
               color: '#fff',
               padding: [0, 50, 10, 0]
            },
            b: {
               fontSize: 20,
               fontWeight: 700,
               padding: [0, 0, 10, 0]
            },
            c: {
               width: '100%',
               height: 2,
               backgroundColor: '#1E7393'
            }
         }
      },
      left: "42%",
      bottom: "40%",
      text: `{a|总计}{b|${sum.toLocaleString()}}\n{c|}`
   },
   color: ['#00A0E7', '#EB6B9E'],
   legend: {
      type: "plain",
      orient: "vertical",
      left: "42%",
      bottom: "30%",
      align: "left",
      itemGap: 10,
      icon: 'rect',
      itemWidth: 20, // 设置宽度
      itemHeight: 20, // 设置高度]
      symbolKeepAspect: false,
      selectedMode: false,
      textStyle: {
         color: "#fff",
         fontSize: 16,
         rich: {
            a: {
               color: '#fff',
               padding: [0, 30, 0, 10],
               fontSize: 14,
            },
            b: {
               color: '#fff',
               fontSize: 14
            }
         }
      },
      formatter: (name) => {
         const { data } = series.find(i => i.name === name)
         return `{a|${name}} {b|${data[0]['value']}}`
      },
   },
   angleAxis: {
      max: 11000, //最大值的两倍
      startAngle: 180,
      clockwise: true,
      show: false,
   },
   radiusAxis: {
      type: "category",
      show: false,
   },
   series,
}