js echarts 水球图

向右看齐 2022-02-21 08:55 389阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWxvbmdfOTI3_size_16_color_FFFFFF_t_70][]

1、导入js文件

echarts.js

echarts-liquidfill.js

2、引入js文件到html

3、新建样式

4、创建div容器

5、初始化echarts

//初始化图表
    function initChart(){
    	chart = echarts.init(document.getElementById('container'));
    	var options = {
            series: [{
                type: 'liquidFill',
                radius: '90%',
                itemStyle: {
                    normal: {
                        color: '#43b3ef',
                        opacity: 0.8,
                        shadowColor: '#43b3ef',
                        shadowBlur: 20
                    }
                },
                backgroundStyle: {
                    shadowColor: 'rgba(255, 255, 255, 0.5)',
                    shadowBlur: 20
                },
                data: [{
                    value: 0.3,
                    waveLength: 180
                }],
                label: {
                    fontSize: 18,
                    color: '#43b3ef',
                    insideColor: '#ffffff'
                },
                outline: {
                    show: false
                }
            }]
        };
    	chart.setOption(options);
    }

//页面加载完执行
    $(function(){
    	//初始化图表
    	initChart();
    });

完！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYWxvbmdfOTI3_size_16_color_FFFFFF_t_70]: /images/20220221/84c43d5c06c74c51b34fd0f04bff24a8.png