Echarts在线免费图表

 
            const colorLine = [
   '#1685FF',
   '#FF9B1E',
   '#FFD234',
   '#0FEFAB',
   '#1BB9FF',
   '#ca26ff',
   '#009D33'
]
const colorLegend = [
   '#1685FF',
   '#FF9B1E',
   '#FFD234',
   '#0FEFAB',
   '#1BB9FF',
   '#ca26ff',
   '#009D33'
]
const data = [
  { value: 1048, name: '文书卷/件' },
  { value: 735, name: '专业' },
  { value: 580, name: '科技' },
  { value: 484, name: '会计' },
  { value: 300, name: '干部（死亡）' },
  { value: 148, name: '实物' },
  { value: 135, name: '照片' },
]
// 右侧 标注 圆环 文字
const legendData = data.map((item, index) => {
   return {
   name: item.name,
   itemStyle: {
      color: 'transparent',
      borderWidth: 2,
      borderColor: colorLegend[index % colorLegend.length]
   }
   }
})

option = {
   backgroundColor: '#0c2d55',
   title: {
      text: '',
      textStyle: {
         color: '#fff'
      },
      x: "29%",
      y: "46%",
   },
   tooltip: {
      show: true,
      formatter: '{b}: {c}个 \t{d}%'
   },
   legend: {
      orient: 'vertical',
      // type: 'scroll',
      top: '30%',
      left: '75%',
      icon: 'circle',
      itemGap: 5,
      itemHeight: 8,
      itemWidth: 8,
      formatter: params => {
         const aim = data.find(item => item.name === params)
         return `{name|${params}}`
      },
      pageTextStyle: {
         color:'#fff'
      },
      textStyle: {
         lineHeight: 20,
         color: '#fff',
         rich: {
         name: {
            fontSize: 12,
            fontFamily: 'PingFang-SC-Regular'
         },
         number: {
            fontSize: 14,
            fontFamily: 'DS-Digital-Bold',
            padding: [0, 5, 0, 8],
         },
         unit: {
            fontSize: 14,
         }
         }
      },
      data: legendData
   },
   series: [{
      type: 'pie',
      // startAngle:45,
      radius: ['50%', '70%'],
      center: ['40%', '50%'],
      clockwise: true,
      avoidLabelOverlap: true,
      label: {
         color: '#ffffff',
         fontSize: 12,
         show: true,
         position: 'outside',
         // padding: [0, -2, 20, -20],
         formatter: function (params) {
         const percent = params.percent.toFixed(0) + '%'
         return params.value + '\n' + percent
         },
      },
      labelLine: {
         //label线的长度
         show: true, //数据标签引导线
         showAbove: true,
         length: 20,
         length2: 15,
         lineStyle: {cap: 'round'}
      },
      itemStyle: {
         normal: {
         // 设置渐变
         color: function (params) {
            return {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 1,
               y2: 1,
               colorStops: [{
               offset: 0,
               color: 'rgba(58, 87, 105, 1)' // 0% 处的颜色
               },
               {
                  offset: 1,
                  color: colorLine[params.dataIndex % colorLine.length],
                  // 100% 处的颜色
               }
               ],
               globalCoord: false // 缺省为 false
            }
         }
         }
      },
      data,
   },
   // 中间阴影圈
      {
         name: "阴影圈",
         type: "pie",
         radius: ["0", "40%"],
         center: ["40%", "50%"],
         emphasis: {
         scale: false,
         },
         tooltip: {
         show: false,
         },
         itemStyle: {
         color: "rgba(204,225,255, 0.05)",
         },
         zlevel: 4,
         labelLine: {
         show: false,
         },
         data: [100],
      },]
   };