有什么库直接使用echarts 水球图
时间: 2024-03-01 10:50:43 浏览: 126
echarts 官方已经支持水球图(Liquid Fill),您只需要在引入 echarts 库后,按照官方文档的要求配置数据即可使用。以下是一个简单的 echarts 水球图的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts liquid fill example</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart" style="width: 400px; height: 400px"></div>
<script>
var myChart = echarts.init(document.getElementById('chart'));
// 配置项
var option = {
series: [{
type: 'liquidFill',
data: [0.6, 0.5, 0.4, 0.3],
radius: '70%',
backgroundStyle: {
color: '#fff'
},
label: {
normal: {
textStyle: {
color: '#fff',
fontSize: 20
}
}
}
}]
};
// 使用配置项显示图表
myChart.setOption(option);
</script>
</body>
</html>
```
在这个示例中,我们配置了一个 `type` 为 `liquidFill` 的 series,`data` 属性是一个数组,表示需要显示的水球占比,`radius` 属性表示水球所占的半径大小,`backgroundStyle` 属性表示水球的背景颜色,`label` 属性表示水球中心的文本标签样式。当然,您可以根据自己的需求来调整这些属性的值。
阅读全文