文档章节

echart中饼图的简单使用

D
 DakeZhang
发布于 2017/08/30 18:29
字数 579
阅读 6
收藏 0
点赞 0
评论 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
合肥
Vue教程(五)在vue项目中使用echarts

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

凌雲木 ⋅ 04/20 ⋅ 0

vue之将echart封装为组件

最近的新项目里,有大量数据图表类的需求,为了增强代码的复用性,减少冗余,我开始思考如何将echart封装为组件调用。本文将会以雷达图为案例,一步步讲解在vue项目中如何使用echart,如何将...

四小七 ⋅ 05/21 ⋅ 0

echart 怎么直接用js代码触发用on绑定的click事件 我想在a屏幕点击地图 然后跟b屏幕通信 让b屏幕的动作跟a屏幕一样

echart中 用on绑定了click方法 然后我想用js代码触发click方法 官方api没有相应的说明 我想知道有没有方法 求大神指教

易言PK ⋅ 04/19 ⋅ 0

echart支持坐标轴支持中断吗

@Kener-林峰 你好,想跟你请教个问题: echart支持坐标轴支持中断吗 这样差异很大的数值都可以显示的好看一点,比如0.123和8000这两个数值,正常情况就看不到0.123的柱子啦...

13189464055 ⋅ 04/26 ⋅ 0

五十风/BeiJingSubwayFlows

BeiJingSubwayFlows 突然很好奇北京地铁每天的客流量变化,于是写了个爬虫。结果很有意思,每周7天的客流变化都很规律 结果: https://www.ikaze.cn/subflows.html 其他: 使用python3爬数据...

五十风 ⋅ 04/13 ⋅ 0

ssh结合echarts做图表展示

在日常的开发中,我们常常需要使用图表对数据进行展示,在这里作者使用百度的开源图表echarts动态的展示数据。 看过echarts的API都知道,要想使用某种类型的图表展示数据,必须封装好一个JSO...

_Artisan ⋅ 06/04 ⋅ 0

北京地铁客流量统计工具 - BeiJingSubwayFlows

北京地铁客流量统计(py爬虫+js统计图) 很好奇北京地铁每天的客流量变化,于是写了个爬虫。结果很有意思,每周7天的客流变化都很规律。 结果: https://www.ikaze.cn/subflows.html 其他: ...

五十风 ⋅ 04/13 ⋅ 0

EasyUi 动态tabs 在实际项目中遇到问题与解决方法

需求: 1、点击菜单列表新增tab 2、点击切换按钮,隐藏左侧列表,tab宽度100%,再次点击还原 3、tab标签页的内容会用到bootstrap table插件与echart插件 遇到的问题 1、新增的iframe 高度用百...

tianyawhl ⋅ 06/11 ⋅ 0

哈尔滨大数据培训课程哪个好?从内容教你如何判断

导读 随着大数据飞速发展,大数据将对人类生活产生深远影响,大数据是未来科技浪潮发展不容忽视的巨大推动力量,加上人工智能对大数据技术的需要,使越来越多的人想要从事大数据,但却不知道哈...

hxl0009 ⋅ 04/16 ⋅ 0

ECharts.js学习(一) 简单入门

EChart.js 简单入门 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示。网上搜索了一下,发现有几种统计图库。 MSChart 这个是Visual Studio里的自带控件,使用比较简单,不过数...

andrewniu ⋅ 2017/11/14 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

笔试题之Java基础部分【简】【一】

基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语法,集合的语法,io 的语法,虚拟机方面的语法,其他 1.length、length()和size() length针对...

anlve ⋅ 7分钟前 ⋅ 0

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 31分钟前 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 36分钟前 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 8

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部