小程序里echarts画的饼图在安卓手机上效果不正常？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序里echarts画的饼图在安卓手机上效果不正常？相关的知识，希望对你有一定的参考价值。
可以给个代码片段吗
标准饼图，中心，半径设置，如下图所示：百度echarts之饼图标准环形图，中心，半径设置，文本标签显示，如下图所示：百度echarts之饼图嵌套饼图，多个饼图，中心，半径设置，文本标签显示，如下图所示：百度echarts之饼图南丁格尔玫瑰图，半径，面积玫瑰图样式，如下图所示：百度echarts之饼图环形图，信息图样式，文本标签技巧，如下图所示：百度echarts之饼图环形图，信息图样式，额外内容添加，文本标签技巧，如下图所示：百度echarts之饼图搭配时间轴，时空维度数据展示，如下图所示：百度echarts之饼图千层饼，多层嵌套环形图，如下图所示：百度echarts之饼图饼图，多级控制，个性化填充，标签文本，视觉引导线样式等，如下图所示：百度echarts之饼图 参考技术A 是不是分辨率弄错了吖？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）
以上是关于小程序里echarts画的饼图在安卓手机上效果不正常？的主要内容，如果未能解决你的问题，请参考以下文章
Qt+ECharts开发笔记：ECharts的饼图介绍基础使用和Qt封装百分比图Demo
highcharts的饼图在IE浏览器上无法显示，提示‘undefined'为空或不是对象，其他的游览器都可正常显示