Echarts在线免费图表

 
            let angle = 0;//角度，用来做简单的动画效果的

var color = ['#E5913C', '#885DFF', '#2DF3E2', '#F5D527', '#0BA0FF'];

var legend = ['与村委会共建', '位于建档立卡贫困村', '农村综合服务中心', '位于建党立卡贫困村', '生产性为农服务中心'];

var seriesData = [
    { name: '与村委会共建', value: 60 },
    { name: '位于建档立卡贫困村', value: 10 },
    { name: '农村综合服务中心', value: 15 },
    { name: '位于建党立卡贫困村', value: 23 },
    { name: '生产性为农服务中心', value: 10 },
];

option = {
    backgroundColor: "#050e31",
    color: color,
    legend: {
      itemHeight: 14,
      itemWidth: 14,
      icon: "rect",
      orient: 'vertical',
      top: 'center',
      right: 0,
      textStyle: {
         align: 'left',
         verticalAlign: 'middle',
         rich: {
            name: {
               color: '#A0C2BF',
               fontSize:14,
            },
            value: {
               color: '#A0C2BF',
               fontSize: 14,
            },
            rate: {
               color: '#A0C2BF',
               fontSize: 14,
            },
         },
      },
      data: legend,
      formatter: (name) => {
         if (seriesData.length) {
            const item = seriesData.filter((item) => item.name === name)[0];
            return `{name|${name}：}{rate| ${item.value}%} {value| |} {value| ${item.value}}`;
         }
      },
   },
    series: [{
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function (params, api) {
            return {
                type: 'arc',
                shape: {
                    cx: api.getWidth() / 2,
                    cy: api.getHeight() / 2,
                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                    startAngle: (0 + angle) * Math.PI / 180,
                    endAngle: (90 + angle) * Math.PI / 180
                },
                style: {
                    stroke: "#0CD3DB",
                    fill: "transparent",
                    lineWidth: 1.5
                },
                silent: true
            };
        },
        data: [0]
    }, {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function (params, api) {
            return {
                type: 'arc',
                shape: {
                    cx: api.getWidth() / 2,
                    cy: api.getHeight() / 2,
                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.6,
                    startAngle: (180 + angle) * Math.PI / 180,
                    endAngle: (270 + angle) * Math.PI / 180
                },
                style: {
                    stroke: "#0CD3DB",
                    fill: "transparent",
                    lineWidth: 1.5
                },
                silent: true
            };
        },
        data: [0]
    }, {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function (params, api) {
            return {
                type: 'arc',
                shape: {
                    cx: api.getWidth() / 2,
                    cy: api.getHeight() / 2,
                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                    startAngle: (270 + -angle) * Math.PI / 180,
                    endAngle: (40 + -angle) * Math.PI / 180
                },
                style: {
                    stroke: "#0CD3DB",
                    fill: "transparent",
                    lineWidth: 1.5
                },
                silent: true
            };
        },
        data: [0]
    }, {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function (params, api) {
            return {
                type: 'arc',
                shape: {
                    cx: api.getWidth() / 2,
                    cy: api.getHeight() / 2,
                    r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
                    startAngle: (90 + -angle) * Math.PI / 180,
                    endAngle: (220 + -angle) * Math.PI / 180
                },
                style: {
                    stroke: "#0CD3DB",
                    fill: "transparent",
                    lineWidth: 1.5
                },
                silent: true
            };
        },
        data: [0]
    }, {
        name: "ring5",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function (params, api) {
            let x0 = api.getWidth() / 2;
            let y0 = api.getHeight() / 2;
            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
            let point = getCirlPoint(x0, y0, r, (90 + -angle))
            return {
                type: 'circle',
                shape: {
                    cx: point.x,
                    cy: point.y,
                    r: 2
                },
                style: {
                    stroke: "#0CD3DB",//粉
                    fill: "#0CD3DB"
                },
                silent: true
            };
        },
        data: [0]
    }, {
        name: "ring5",  //绿点
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function (params, api) {
            let x0 = api.getWidth() / 2;
            let y0 = api.getHeight() / 2;
            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65;
            let point = getCirlPoint(x0, y0, r, (270 + -angle))
            return {
                type: 'circle',
                shape: {
                    cx: point.x,
                    cy: point.y,
                    r: 2
                },
                style: {
                    stroke: "#0CD3DB",      //绿
                    fill: "#0CD3DB"
                },
                silent: true
            };
        },
        data: [0]
    }, {
         name: '占比',
         type: 'pie',
         center: ['50%', '50%'],
         radius: ['40%', '50%'],
         label: {
            normal: {
               show: false,
               position: 'center',
               formatter: '{value|{c}}\n{label|{b}}',
            },

         },
         labelLine: {
            show: false,
            length: 0,
            length2: 0,
         },
         itemStyle: {//间隔
            normal: {
               borderWidth: 3,
               borderColor: '#050e31',
            },
         },
         data: seriesData,
      },
    ]
};
//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
    let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
    let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
    return {
        x: x1,
        y: y1
    }
}
function draw() {
    angle = angle + 3
    myChart.setOption(option, true)
}
setInterval(function () {
    //用setInterval做动画感觉有问题
    draw()
}, 100);