Echarts在线免费图表

 
            var colorLine = ['#00fdb8', '#ff8d28', '#ecc321', '#219dec', '#FDB36A', '#FECE43']
function getRich() {
    let result = {}
    colorLine.forEach((v, i) => {
        result[`hr${i}`] = {
            backgroundColor: colorLine[i],
            borderRadius: 3,
            width: 3,
            height: 3,
            padding: [3, 3, 0, -12]
        }
        result[`a${i}`] = {
            padding: [-11, 6, -20, 6],
            color: colorLine[i],
            backgroundColor: 'transparent',
            fontSize: 12
        }
    })
    return result
}
data = [{
    'name': '北京',
    'value': 25
}, {
    'name': '上海',
    'value': 20
}, {
    'name': '广州',
    'value': 18
}, {
    'name': '深圳',
    'value': 15
}].sort((a, b) => {
    return b.value - a.value
})
option = {
    backgroundColor: "#011d39",
    title: {
      text: '类 型\n占 比',
      textStyle: {
         color:'#fff'
      },
      x: "29%",
      y: "46%",
    },
    legend: {
        orient: 'vertical',
        top: 'center',
        left: '80%',
        itemGap: 30,
        itemHeight:12,
        itemWidth:12,
        formatter: params => {
            var aim = data.find( item => item.name == params)
            return `{name|${params}}{number| ${aim.value}}{unit|%}`
        },
        textStyle: {
            lineHeight: 20,
            color: '#fff',
            rich:{
                name:{
                    fontSize:16,
                    fontFamily:'PingFang-SC-Regular'
                },
                number:{
                    fontSize:14,
                    fontFamily:'DS-Digital-Bold',
                    padding: [0,5,0,8],
                },
                unit:{
                    fontSize:14,
                }
            }
        },
    },
    series: [{
        type: 'pie',
        radius: ['30%','45%'],
        center: ['32%', '50%'],
        clockwise: true,
        avoidLabelOverlap: true,
        label: {
            show: true,
            position: 'outside',
            formatter: function(params) {
                const name = params.name
                const percent = params.percent + '%'
                const index = params.dataIndex
                return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join('\n')
            },
            rich: getRich()
        },
        itemStyle: {
            normal: {
                color: function(params) {
                    return {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [{
                                offset: 0,
                                color: 'rgba(0,180,255,.05)' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: colorLine[params.dataIndex] // 100% 处的颜色
                            }
                        ],
                        globalCoord: false // 缺省为 false
                    }
                }
            }
        },
        data,
        // roseType: 'radius'//齿轮状
    },
    {
         name: "阴影圈",
         type: "pie",
         radius: ["0", "20%"],
         center: ["32%", "50%"],
         emphasis: {
            scale: false,
         },
         tooltip: {
            show: false,
         },
         itemStyle: {
            color: "rgba(204,225,255, 0.05)",
         },
         zlevel: 4,
         labelLine: {
            show: false,
         },
         data: [100],
      },]
}