Echarts在线免费图表

 
            let data = {
   primarySector:46036,
   primarySectorPercent:29,
   secondarySector:53942,
   secondarySectorPercent:35,
   tertiarySector:54107,
   tertiarySectorPercent:35.1
}
// 复制代码
const chartData = [
   {
      value: data.primarySector,
      percent: data.primarySectorPercent,
      name: "第一产业",
      itemStyle: {
         borderColor: "#F9DD8E",
         borderWidth: 5,
         shadowBlur: 20,
         shadowColor: '#3C4039',
         shadowOffsetx: 25,
         shadowOffsety: 20,
         color: "#B4A46F",
      },
   },
   {
      value: data.secondarySector,
      percent: data.secondarySectorPercent,
      name: "第二产业",
      itemStyle: {
         borderColor: "#33E3F6",
         borderWidth: 5,
         shadowBlur: 20,
         shadowColor: '#0C3E4E',
         shadowOffsetx: 25,
         shadowOffsety: 20,
         color: "#25ABBC",
      },
   },
   {
      value: data.tertiarySector,
      percent: data.tertiarySectorPercent,
      name: "第三产业",
      itemStyle: {
         borderColor: "#00EB91",
         borderWidth: 5,
         shadowBlur: 20,
         shadowColor: '#043E39',
         shadowOffsetx: 25,
         shadowOffsety: 20,
         color: "#02B978",
      },
   }
];
let textColors = [
   "rgb(204, 92, 248)",
   "rgb(33, 171, 119)",
   "rgb(58, 176, 252)",
   "rgb(250, 199, 94)",
]
const sum = chartData.reduce((per, cur) => per + cur.value, 0);
const gap = (1 * sum) / 100;
const pieData1 = [];
const gapData = {
   name: "",
   value: gap,
   itemStyle: {
      color: "transparent",
   },
};

//图标位置显示
let legendData = [];
let total = 0;
chartData.forEach((item) => {
   total += item.value;
});

for (let i = 0; i < chartData.length; i++) {
   // 第一圈数据
   pieData1.push({
      ...chartData[i],
   });
   pieData1.push(gapData);
}
option = {
   backgroundColor: '#031a40',
   title: {
      text: "行业占比",
      subtext: "353",
      x: "50%",
      y: "44%",
      itemGap: 15,
      textStyle: {
         color: "#F6F6F6",
         fontSize: 30,
         fontWeight: "bold",
      },
      subtextStyle: {
          color: "#f5f5f6",
          fontSize: 50,
          fontWeight: "bold",
      },
      textAlign: 'center'
   },
   tooltip: {
      show: true,
      textStyle: {
         color: '#000',
         fontSize: 32
      },
      backgroundColor: "rgba(255,255,255,1)",
      extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
      formatter(params) {
         if (params.name === '') {
            return '';
         }
         return `${params.name} : ${params.data.percent}%`;
      },
   },
   series: [
      {
         name: '',
         type: 'pie',
         roundCap: true,
         radius: ['40%', '55%'],
         center: "center",
         label: {
             show: false
         },
         labelLine: {
             show: false
         },
         data: pieData1,
         labelLine: {
            length: 60,
            length2: 80,
            lineStyle: {
               width: 2,
            },
         },
         label: {
            show: true,
            fontFamily: 'ysbth',
            formatter(params) {
               if (params.name === '') {
                  return '';
               }
               return `${params.data.percent}%`;
            },
            color: "#F6F6F6",
            fontSize: 41,
            lineHeight: 20
         },
      },
      {
         type: 'pie',
         radius: ['25%', '32%'],
         center: "center",
         animation: false,
         hoverAnimation: false,
         data: [
            {
               value: 100,
            },
         ],
         label: {
            show: false,
         },
         itemStyle: {
            normal: {
               color: '#3BC5EF'
            }
         }
      },
      {
         name: '',
         type: 'pie',
         startAngle: 90,
         radius: '20%',
         animation: false,
         hoverAnimation: false,
         center: "center",
         itemStyle: {
            normal: {
               labelLine: {
                  show: false,
               },
               color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                  {
                     offset: 1,
                     color: 'rgba(50,171,241, 0)',
                  },
                  {
                     offset: 0.5,
                     color: 'rgba(50,171,241, .4)',
                  },
                  {
                     offset: 0,
                     color: 'rgba(55,70,130, 0)',
                  },
               ]),
               shadowBlur: 60,
            },
         },
         data: [
            {
               value: 100,
            },
         ],
      },
   ],
};