Echarts3的饼图自定义标注怎么设置

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Echarts3的饼图自定义标注怎么设置相关的知识,希望对你有一定的参考价值。

参考技术A markPoint :
symbol :'circle',
label:
normal :
show : true,

,
itemStyle : ,
data: [
name: '某个屏幕坐标',
x: 10,
y: 10
],
本回答被提问者采纳

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)

以上是关于Echarts3的饼图自定义标注怎么设置的主要内容,如果未能解决你的问题,请参考以下文章

echart的饼图里面的字太多怎么换行

tableau的饼图的格子线怎么显示

excel中数据饼图按个数不按数值

如何在饼图上显示文字

powerbi中没有复合饼图怎么办?

echarts插件的饼图怎么把外围边框去掉