echarts-liquidfill

最新推荐文章于 2025-10-23 01:52:50 发布

原创最新推荐文章于 2025-10-23 01:52:50 发布 · 3.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用ECharts实现液态填充效果图表，包括JavaScript代码示例及必要的库文件引用方式。

这里写图片描述
一个简单案例：

function  initDrawing() {
    var myChart = echarts.init(document.getElementById('divId));
    var option = {
        series: [{
            type: 'liquidFill',
            data: [0.64,0.3,0.2],
            radius:'65%',
            center: ['50%', '50%'],
            roseType: 'radius',
            outline: {
                show: false
            }
        }],
        tooltip: {
            show: true
        }
    };
    myChart.setOption(option);
};


//引入js:
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script src='/static/produce/js/echarts.js'></script>
<script src='/static/produce/js/echarts-liquidfill.min.js'></script>