?代碼展示：文章來源地址http://www.zghlxwxcb.cn/news/detail-646952.html

  /**繪制儀表盤圖表 */
        function drawInstrument(id) {
            setTimeout(()=> {
                var chart = echarts.init(document.getElementById(id)); 
                var option = {
                    series: [
                        {
                            name: '風(fēng)險(xiǎn)指數(shù)',
                            type: 'gauge',
                            center: ['50%', '60%'],
                            radius: '90%',
                            min: chartData.min,
                            max: chartData.max,
                            startAngle: 180,
                            endAngle: 0,
                            splitNumber: 8,
                            axisLine: {
                               lineStyle: {
                                    color: [
                                        [0.25, '#f03b44'],
                                        [0.5, '#fbdd5e'],
                                        [0.75, '#58d9f9'],
                                        [1, '#7afeaf'],
                                    ],
                                    width: 10,
                                },
                            },
                            splitLine: {
                                // 分隔線
                                show: true,
                                length: 15,
                                distance: 10,
                                lineStyle: {
                                    width: 2,
                                    color: 'auto',
                                },
                            },
                            axisTick: {
                                // 刻度線樣式（及短線樣式）
                                show: true,
                                lineStyle: {
                                    width: 2,
                                    color: 'auto',
                                },
                                length: 10,
                                distance: 10,
                            },
                            axisLabel: false,
                                detail: {
                                    fontSize: '40',
                                    formatter: '{value}分',
                                    color: 'auto',
                                    offsetCenter: ['0', '0%'],
                            },
                            pointer: {
                                icon: 'triangle',
                                show: true,

                                offsetCenter: [0, '-50%'],
                                itemStyle: {
                                    color: 'auto',
                                },
                                length: '10%',
                                width: '7%',
                            },
                            title: {
                
                                // fontSize: 12,
                                // offsetCenter: [0, -20],
                            },
                            data: [
                                 {
                                    value: chartData.value,
                                    name: '匹配指數(shù)',
                                    title: {
                                        show: true,
                                        color: '#999999',
                                        offsetCenter: [0, '-25%'],
                                        fontSize: 18,
                                    },
                                  },
                            ],
                        },
                    ],
                };
                chart.setOption(option);
                window.addEventListener('resize', function(){
                    chart.resize()
                })              
            },1000)
        }

到了這里，關(guān)于echarts繪制儀表盤的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！