在echarts官网中也有详细的介绍:点击跳转
其次下载官方项目可以在github中下载(百度一下即可)
在下载好官方github项目后即可操作(相信看此篇文章的都是有一定前端基础的同仁,就不再赘述下载方式)
首先相关文件(在官方github项目中dist目录下获取到这两个js文件):
<script src="./js/echarts.js"></script> <script src="./js/echarts-liquidfill.js"></script>
准备一个容器:
<div id="box"></div>
js代码:
var myChart = echarts.init(document.getElementById('orderNum')); var option = { series: [{ type: 'liquidFill', radius: '98%', data: [88] }] }; option && myChart.setOption(option);
这就是水球图插件的基础使用方法:
echarts水球图还有许多的样式可以修改,比如更改波纹数量,水球形态等 ( ง⁼̴̀ω⁼̴́)ง⁼³₌₃