Echarts在线免费图表

 
            const data = [{
      name: "0-14岁",
      value: 100,
      percent: 33,
    },
    {
      name: "15-59岁",
      value: 100,
      percent: 33,
    },
    {
      name: "60岁以上",
      value:180,
      percent: 33,
    }]

const color = ['#45F4F5', '#07A6FF', '#FFD076']
let startAngle = [-10, 50, 260, 150]
    // let startAngle = [ -20, -70, -40, -60]
    let radiusPercent = data.map((item, ind) => {
      return [(30 + ind * 10) + '%', (35 + ind * 10) + '%']
    })
        let total = 0
    data.map((item) => {
      total = total + Number(item.value);
    });
    let newOption = {
      backgroundColor: '#0b293d',
      // 1.鼠标移入提示
      tooltip: {
        trigger: 'item'
      },
      // 2.图例组件
      legend: {
        top: '5%',
        left: 'center',
        // 文本样式
        textStyle: {
          color: '#fff'
        }
      },
      // 2.图例组件
      /*  legend: {
          icon: 'none',
          orient: 'vertical',
          data: data.map((dItem, dIndex) => {
            return {
              ...dItem,
              textStyle: {
                rich: {
                  iconName: {
                    width: 4,
                    height: 16,
                    borderRadius: 5,
                    backgroundColor: color[dIndex],
                  },
                  percent: {
                    color: color[dIndex],
                  },
                }
              },

            }
          }),
          right: '0%',
          top: '20%',
          itemGap: 30,
          itemWidth: 12,
          itemHeight: 12,
          selectedMode: false, // 关闭图例选择
          textStyle: {
            color: '#fff',
            fontSize: 13,
            fontFamily: 'Source Han Sans CN',
            rich: {
              // iconName: {
              //   width: 5,
              //   height: 8,
              //   backgroundColor: '#ff00ff'
              // },
              name: {
                color: '#FFF',
                fontSize: 38,
                width: 200,
                padding: [0, 0, 0, 10],
              },
              value: {
                color: '#2BDFD4',
                fontFamily: 'PangMenZhengDao',
                fontSize: 38,
                // width: 80,
                padding: [0, 0, 0, 30]
              },
              percent: {
                color: '#2BDFD4',
                fontFamily: 'PangMenZhengDao',
                fontSize: 38,
                padding: [0, 0, 0, 30]
              },
              unit: {
                color: '#ACDCE4',
                fontSize: 28,
                padding: [0, 0, 0, 5]
              }
            }
          },
          formatter: name => {
            let obj = data.find(item => item.name === name);
            let datas = data;
            let total = 0;
            let target = obj.value
            for (let i = 0; i < datas.length; i++) {
              total += datas[i].value;
            }
            const arr = [
              `{iconName|}{name|${name}}{value|${obj.value}}{unit|人}{percent|${((target / total) * 100).toFixed(0)}}{unit|%}`
            ];
            return arr.join('')
          }
        },*/

      // 3.图表内容
      series: data.map((dItem, dInd) => getItem({
        name: dItem.name,
        radius: radiusPercent[dInd],
        startAngle: startAngle[dInd],
        value: dItem.value,
        color1: color[dInd],
        color2: '#3d13fd',
        total: total
      }))
      /*  series: [
          getItem({ name: 'AAAA景区', radius: ['30%', '35%'], startAngle: -10, value: 70, color1: '#8915f9', color2: '#3d13fd' }),
          getItem({ name: '免费景区', radius: ['40%', '45%'], startAngle: 50, value: 50, color1: '#f72f48', color2: '#f44179' }),
          getItem({ name: '度假村', radius: ['50%', '55%'], startAngle: 260, value: 50, color1: '#1686f3', color2: '#32b8fc' }),
          getItem({ name: '文化古城', radius: ['60%', '65%'], startAngle: 150, value: 60, color1: '#2648f7', color2: '#2d8af9' }),
        ]*/
    };

    /* { name:标题 , radius:[内圆直径,外圆直径] ,
    startAngle:圆心角  value:数据 ,
    color1: 颜色, color2: 颜色 } */
    function getItem(data) {
      return {
        name: '受益人员分布',
        type: 'pie',
        center: ['50%', '60%'],
        radius: data.radius,
        startAngle: data.startAngle,
        avoidLabelOverlap: false,
        label: {
          show: true,
          color: '#ffffff'
          // position: 'center'
        },
        // 鼠标移入时文本状态
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true,
          length: 60,
          length2: 20
        },
        data: [
          {
            value: data.value,
            name: data.name,
            itemStyle: {
              //环形间隔 白色
              borderRadius: 10,
              // 渐变颜色
              // color:data.color1
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: data.color1
                  },
                  {
                    offset: 1,
                    color: data.color2
                  }
                ]
              }
            },
          },
          {
            value: 200 - data.value,
            //  value: (data.total / 1) - data.value,
            name: data.name,//设置name防止legend错位
            itemStyle: {
              // 颜色设置为none,则该片段不渲染
              color: 'none'
            },
            label: { show: false }
          },

        ]
      }
    }

option = newOption