文档章节

echart中饼图的简单使用

D
 DakeZhang
发布于 2017/08/30 18:29
字数 579
阅读 19
收藏 0

第一步:创建容器<div id="ec" style="width:600px; height: 400px;"></div>
第二步:引入js/echarts.min.js的js文件
第三步:// 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('ec'));
第四步:指定图表的配置项和数据
    var option = {
            tooltip : {
                trigger : 'item',
                formatter : "{b} ({d}%)"
            },
         /*tooltip的trigger的值可以有‘item’,‘axis’
        ‘item’:数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用
        ‘axis’:坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用
        formatter:
        折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
        散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
        地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
        饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)*/
            legend : {
                    //默认横向布局,纵向布局值为'vertical'
                    orient : 'horizontal',
                    x : '20',
                    y : '190',
                    data : []
                },
            series : [ {
                        type : 'pie',//指定为饼图
                        radius : [ '40%', '60%' ],//饼图的半径,数组的第一项是内半径,第二项是外半径。
                                       // 支持设置成百分比,相对于容器高宽中较小的一项的一半。
                                       // 可以将内半径设大显示成圆环图(Donut chart)。
                        center : [ '50%', '100' ],//饼图的中心(圆心)坐标,数组的第一项是横坐标,第二项是纵坐标。
                                        支持设置成百分比,设置成百分比时第一项是相对于容器宽度,第二项是相对于容器高度
                        avoidLabelOverlap : false,//是否启用防止标签重叠策略,默认开启,在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠。
                                        如果不需要开启该策略,例如圆环图这个例子中需要强制所有标签放在中心位置,可以将该值设为 false。
                        label : {          //饼图图形上的文本标签
                            normal : {
                                show : false,
                                position : 'center'
                            },
                            emphasis : {
                                show : true,
                                textStyle : {
                                    fontSize : '10',
                                    fontWeight : 'bold'
                                }
                            }
                        },
                        labelLine : {        //标签的视觉引导线样式
                            normal : {
                                show : false
                            }
                        },
                        data : [ {        //系列中的数据内容数组
                            value : 
                            name : 
                        } ]
                    } ]
                }
            /* 点击事件 */
                 myChart.on('click', function(params) {
                    gcxmToPage(params.name);
                });
            // 使用刚指定的配置项和数据显示图表。
                 myChart.setOption(option);        


        

© 著作权归作者所有

共有 人打赏支持
D
粉丝 0
博文 8
码字总数 1071
作品 0
合肥
私信 提问
EChart饼图数据的格式化问题

最近做一个项目用到EChart和现有的项目整合了,不过本人的js不是很好,后台查询生成一个MAP集合通过 JSONObject json = JSONObject.fromObject(mapArray); 获得的结果为{"8月":200,"6月":600,"...

沙漠飞鹰
2014/07/14
1K
1
Echart怎么和mysql连接,进行数据展示,使用php+mysql +Echart

最近在学习Echart,怎么将Echart和Mysql连接,不把数据写死在Echart中,显示在网页上?

图图0317
2015/04/23
425
0
javaweb项目获取echart图的一个方法上面加了@Cacheable注解,Echart图显示速度没有发生变化,感觉注解没用啊

javaweb 项目的一个Echart图因为后台数据处理量比较大,显示有点慢,于是我在获取echart图数据的方法上面加了@Cacheable注解,讲道理第二次由于缓存数据后echart图显示应该比较快一点,但实际...

Jordan裔
03/20
63
0
行者/ECharts-Helper

ECharts-Helper 项目介绍 echart-helper是什么? echart-helper是一款echarts辅助开发插件,能够帮助开发者快速构建echart图表。 安装教程 引入jquery、echarts及echarts.helper三个文件即可...

行者
06/25
0
0
javaweb项目获取echart图的一个方法上面加了@Cacheable注解,Echart图显示速度没有发生变化,感觉注解没用啊

javaweb 项目的一个Echart图因为后台数据处理量比较大,显示有点慢,于是我在获取echart图数据的方法上面加了@Cacheable注解,讲道理第二次由于缓存数据后echart图显示应该比较快一点,但实际...

Jordan裔
03/21
204
2

没有更多内容

加载失败,请刷新页面

加载更多

计算机系统要素 C5

本章值得一提的是组织计算机的结构。Hack 的指令和数据是分开存储的,因此它的 CPU 有两个 input: IN inM[16], // M value input (M = contents of RAM[A]) instruction[16],...

lionets
14分钟前
0
0
SpringSecurity404需要注意的地方

在使用@RequestMapping的时候路径的值如果写为("auth"),虽然用的时候前面加不加"/"没有区别,但是在配置了SpringSecurity的http.authorizeRequests().antMatchers()时就必须要注意了! 🌰1...

百萬馬力
17分钟前
0
0
10分钟读懂阿里巴巴高级专家在Flutter Live2018的分享

作者:闲鱼技术-宗心 12月4日,google flutter团队宣布第一个flutter正式版本发布。次日,Flutter Live Beijing 会议上,google flutter团队邀请了在这一技术方案中重要的合作伙伴闲鱼团队分...

阿里云官方博客
18分钟前
1
0
RxJava window操作符

原文:https://github.com/Froussios/Intro-To-RxJava/blob/master/Part%204%20-%20Concurrency/3.%20Sequences%20of%20coincidence.md Sequences of coincidence Rx试图避免管道(pipeline)外......

woshixin
24分钟前
1
0
05.Beetl标签函数以及定界符、占位符介绍---《Beetl视频课程》

本期视频实现了博客的详情页面; 内容简介:使用了标签函数layout完成详情功能 一起学beetl目录:https://my.oschina.net/u/1590490?tab=newest&catalogId=6214598 作者:GK #标签函数 layo...

Gavin-King
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部