Echarts在线免费图表

 
            var trafficWay = [{
    name: '客车',
    value: 30
},{
    name: '轮渡',
    value: 40
}];
var value=10;
var data = [];
var color=['#006ced','#ffe000','#ffa800','#ff5b00','#ff3000']
for (var i = 0; i < trafficWay.length; i++) {
    data.push({
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
            normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor:color[i],
                shadowColor: color[i]
            }
        }
    }, {
        value: 2,
        name: '',
        itemStyle: {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
            }
}
    });
}
var seriesOption = [{
    name: '',
    type: 'pie',
    clockWise: false,
    radius: [105, 109],
    hoverAnimation: false,
    itemStyle: {
        normal: {
            label: {
                show: false
            },
            labelLine: {
                show: false,
            }
        }
    },
    data: data
},
       {
             type: 'pie',
             radius: ['24%', '24.3%'],
             hoverAnimation: false,
             clockWise: false,
             itemStyle: {
                 normal: {
                     color: '#00cfff'
                 }
             },
             label: {
                 show: false
             },
             data: _dashed()
         }];
option = {
    backgroundColor: '#0A2E5D',
    color : color,
    title: {
         text: '{a|' + value + '}\n{c|交通方式}',
        top: '48%',
        textAlign: "center",
        left: "49%",
        textStyle: {
            color: '#fff',
            fontSize: 22,
            fontWeight: '400',
               rich: {
                a: {
                    fontSize: 30,
                    color: '#006ced',
                    fontWeight:'600',
                },
                c: {
                    fontSize:14,
                    color: '#ffffff',
                    padding: [5, 0]
                }
            }
        },
 

    },

    tooltip: {
        show: false
    },
    legend: {
        orient: 'vertical',
        data: ['火车','飞机','客车','轮渡'],
        itemWidth: 20,
        itemHeight: 20,
        top: '40%',
        left: '70%',
        itemGap: 20,
        textStyle: {
            color: "#ffffff"
        },
        itemGap: 20,
        textStyle: {
            fontSize: 15,
            lineHeight: 24,
            rich: {
                text: {
                    fontSize: 15,
                      color: "#ffffff"
                },
                number: {
                    fontSize: 17,
                    color: "#1890FF",
                    fontWeight: 'bold'
                },
                unit: {
                    fontSize: 13,
                      color: "#ffffff"
                },
            }
        },
        formatter(name) {
            const newData = trafficWay;
            let tarValue = 0;
            for (let i = 0; i < newData.length; i++) {
                if (newData[i].name === name) {
                    tarValue = newData[i].value;
                }
            }
            return `{text|${name}} {number|${tarValue}} {unit|个}`;
        },
    },
    toolbox: {
        show: false
    },
    series: seriesOption
}

 function _dashed() {
     let dataArr = [];
     for (var i = 0; i < 10; i++) {
         if (i % 2 === 0) {
             dataArr.push({
                 name: (i + 1).toString(),
                 value: 10,
                 itemStyle: {
                     normal: {
                         color: 'rgb(0,0,0,0)',
                     }
                 }
             })
         } else {
             dataArr.push({
                 name: (i + 1).toString(),
                 value: 20,
                 itemStyle: {
                     normal: {
                         color: 'rgb(0,0,0,0)',
                         borderWidth: 2,
                         borderColor: "rgba(255,215,0,1)"
                     }
                 }
             })
         }

     }
     return dataArr
 }

 function doing() {
     let option1 = myChart.getOption();
     option1.series[1].startAngle = option1.series[1].startAngle - 1;
     myChart.setOption(option1);
 }

 function startTimer() {
     timer = setInterval(doing, 100);
 }
 setTimeout(startTimer, 0);