Echarts如何画一个空心的饼图
问题描述当我们学习echarts时,教程里面有画饼图的源代码,但那些饼图都是实心的,我们应该如何画一个空心的饼图呢?解决方案我们画图是在HBuilder里面画图,所以就会用到echarts。有两种方法引用echarts里面的脚本,一是安装echarts,二是用script标签(标签里面的代码就是浏览器执行一些动作的脚本代码),使用src属性,它可以直接引用外部文件,例<scriptsrc="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>。我跟着教程学习代码后,发现仍不能解决中间是空心的问题,自己去查也没查出结果,最后我仔细去研究了那个源代码后,发现radius是设置饼图的大小的,百分比越大图越大,源代码这里只有一个百分比,如果设置两个百分比后就会出现空心的饼图,例radius:['50%’,’80%’],第一个百分比的意思是在饼图里从中心向外50%位置是空心,第二个百分比是饼图在规定的位置里面的大小占比。实验结果与讨论通过实验、实践等证明提出的方法是有效的,是能够解决开头提出的问题。代码清单<!DOCTYPE html><html><head><meta charset="utf-8"><title>饼图1</title><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script></head><body><!-- 为ECharts准备一个具备大小(宽高)的Dom --><div id="main" style="width: 600px;height:600px;"></div><script type="text/javascript">// 基于准备好的dom,初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {tooltip: {trigger: 'item'},legend: { //图例top: '85%', //距离顶部的位置left: 'center', //图例的位置orient:'vertical' //图例显示方式默认横向},series: [{name:'访问来源',type: 'pie',radius: ['20%','60%'],data:[{value:41, name:'农林牧渔'},{value:77, name:'采矿业'},{value:999, name:'制造业'},]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body></html>结语针对如何画一个空心的饼图的问题主要就是那个百分比的问题,所给的案例只有一个百分比,关键就是还要增加一个百分比来实现空心的那部分。实习编辑:衡辉稿件来源:深度学习与文旅应用实验室(DLETA)