文档章节

echart中饼图的简单使用

D
 DakeZhang
发布于 2017/08/30 18:29
字数 579
阅读 12
收藏 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
合肥
行者/ECharts-Helper

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

行者
06/25
0
0
Vue教程(五)在vue项目中使用echarts

1安装Echart cnpm install echarts --save 2项目页面引用Echart import echarts from 'echarts' 3启动项目 npm run dev...

凌雲木
04/20
0
0
Echarts使用心得总结(二)

Echarts使用心得总结(二) 前言: 前一段时间一直都挺忙的,各种事,也没来得及每周的总结,趁着晚上的一点时间把项目中用的Echart中常用的各种图表给抽象总结了一下,趁着周末跟大家分享一...

双月通天
2014/07/14
0
0
js-xlsx + handsontable + echarts实现excel上传编辑然后显示成图表

js-xlsx + handsontable + echarts 实现在前端导入excel数据并生成echart报表 前言 最近都在做类似 ERP 的项目,所以呢,又碰到一个比较变态的需求(至少对我来说是),在前端导入 excel 文件, 然...

noahlam
09/12
0
0
Echart里面的事件的使用总结

1.引言 在我们的项目中会使用的Echart,但是很多的时候我们并不是简简单单的就是显示数据,很多的时候,我们希望有一些交互效果,希望可以自己根据一些事件来做一些措施。 比如说:我们希望点...

双月通天
2015/07/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何通过 J2Cache 实现分布式 session 存储

做 Java Web 开发的人多数都会需要使用到 session (会话),我们使用 session 来保存一些需要在两个不同的请求之间共享数据。一般 Java 的 Web 容器像 Tomcat、Resin、Jetty 等等,它们会在...

红薯
39分钟前
1
0
C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
今天
2
0
Nignx缓存文件与动态文件自动均衡的配置

下面这段nginx的配置脚本的作用是,自动判断是否存在缓存文件,如果有优先输出缓存文件,不经过php,如果没有,则回到php去处理,同时生成缓存文件。 PHP框架是ThinkPHP,最后一个rewrite有关...

swingcoder
今天
1
0
20180920 usermod命令与用户密码管理

命令 usermod usermod 命令的选项和 useradd 差不多。 一个用户可以属于多个组,但是gid只有一个;除了gid,其他的组(groups)叫做扩展组。 usermod -u 1010 username # 更改用户idusermod ...

野雪球
今天
1
0
Java网络编程基础

1. 简单了解网络通信协议TCP/IP网络模型相关名词 应用层(HTTP,FTP,DNS等) 传输层(TCP,UDP) 网络层(IP,ICMP等) 链路层(驱动程序,接口等) 链路层:用于定义物理传输通道,通常是对...

江左煤郎
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部