Echarts在线免费图表

 
            var blue = "/asset/get/s/data-1605255510124-QwqfBsT1P.png";
const red = 'data:image/png;base64,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'
let min = 0;
let max = 360
let title = '生均教学日常运行支出'
// 圆环
let barValue = [270,280]
// 指针
let pointValue = [120, 280]
// 指针
let picList = [red, blue]

let angleMax = max * 4 / 3

colorList = ['#FF5652', '#FFBD4B']


let zIndex = 100
let graphicData = pointValue.map((item, index) => {
    // 指针
    let rotate = parseInt(item/max*270)
    return {
        type: 'image',
        left: 'center',
        top: 'center',
        rotation: (Math.PI / 180 * 135) - Math.PI / 180 * rotate,
        position: [0, 0],
        style: {
            image: picList[index],
            height: 152,
            width: 32
        }
    }
})
let seriesData = barValue.map((item, index) => {
    return {
        type: 'bar',
        data: [, , item],
        coordinateSystem: 'polar',
        barWidth: 20,
        // barMaxWidth: '20%',
        z: 99 - index,
        name: '抢修项目',
        roundCap: true,
        color: colorList[index],
        barGap: '-100%',
    }
})
console.log('seriesData', seriesData)
var option = {
    backgroundColor:'#00070B',
    angleAxis: {
        axisLine: {
            show: false
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        min: 0,
        max: angleMax,
        boundaryGap: ['0', '100'],
        startAngle: 225
    },
    radiusAxis: {
        type: 'category',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: false
        },
        data: ['a', 'b', 'c'],
        z: 10
    },
    polar: {
        radius: '80%'
    },
    graphic: [{
        type: 'group',
        bottom: 120,
        left: 'center',
        width: 100,
        height: 300,
        z: 1000,
        children: [{
            type: 'text',
            bottom: 0,
            style: {
                fill: '#C3F0FF',
                text: title,
                font: 'bold 25px Microsoft YaHei',
            }
        }]

    },{
        type: 'group',
        bottom: 250,
        left: 'center',
        width: 100,
        height: 300,
        z: 1000,
        children: [{
            type: 'text',
            style: {
                fill: '#00BAFF',
                text: max,
                font: '400 30px Source Han Sans CN',
            }
        }]

    }, ...graphicData],
    series: [...seriesData,
        {
            type: 'bar',
            data: [, , max],
            z: 0,
            silent: true,
            coordinateSystem: 'polar',
            barWidth: 20,
            // barMaxWidth: '40%',
            name: 'C',
            roundCap: true,
            color: '#70D5FF',
            itemStyle: {
                normal: {
                    borderWidth: 20,
                    borderColor: 'rgba(59,186,255,0.2)'
                }
            },
        },
    ],
    legend: {
        show: false,
        icon: 'circle',
        itemWidth: 20,
        itemHeight: 20,
        textStyle: {
            fontSize: 16,
            color: '#c0c0c0'
        },
        bottom: 30,
        left: 'center',
        data: ['抢修项目', '警告事件']
    },
    tooltip: {
        show: false
    },

};