ECharts饼图制作分析
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--为ECharts准备一个具备大小(宽高)的Dom-->
<div id="main" style="height:400px;"></div>
<!--ECharts单文件引入-->
<script src="echarts-all.js"></script>
<script type="text/javascript">
//基于准备好的dom,初始化echarts图表
var myChart=echarts.init(document.getElementById('main')); //图表使用
var option = {
tooltip : {//提示框,鼠标悬浮交互时的信息提示
trigger: 'item',//触发类型,默认数据触发,可选为:'axis'
formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框的提示内容格式
},
legend: {//图例,每个图表最多仅有一个图例
orient : 'vertical',//布局方式,默认为水平布局,可选为:'horizontal'|'vertical'
x : 'left',//水平安放位置,默认为全图居中,可选为:'center'|'left'|'right'|{number}(x坐标,单位px)
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']//图例内容数组,数组项通常为{string},每一项代表一个系列的name，默认布局到达边缘会自动分行(列),传入空字符串''可实现手动分行(列)
},
toolbox: {//工具箱,每个图表最多仅有一个工具箱
show : true,//显示策略,默认只是false.可选为:true显示|false隐藏
feature : {//启用功能,目前支持feature，工具箱自定义功能回调处理.
mark : {show: true},//辅助线标志,此处启用.
dataView : {//打开数据视图，可设置更多属性
show: true,
readOnly: false//readOnly默认数据视图为只读,可指定readOnly为false打开编辑功能
},
magicType : {//动态类型切换,支持直角系下的折线图,柱状图,堆积,平铺转换
show: true,
type: ['pie', 'funnel'],//饼图,漏斗图
option: {//图表选项,包含图表实例任何可配置选项:公共选项,组件选项,数据选项
funnel: {//漏斗图配置
x: '25%',
width: '50%',
funnelAlign: 'center',
max: 1548
}
}
},
restore : {show: true},//还原,复位原始图表
saveAsImage : {show: true}//保存图片IE8-不支持,上图icon最右,可设置更多属性.
}
},
calculable : true,//是否启用拖拽重计算特性,默认关闭
series : [//驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据
{
name:'访问来源',//系列名称
type:'pie',//图表类型,折线图line,散点图scatter,柱状图bar,饼图pie,雷达图radar
radius : ['50%', '70%'],//半径,支持绝对值px和百分比,百分比计算比,min(width, height)/2*75%,传数组实现环形图,[内半径,外半径]
itemStyle : {//图形样式,可设置图表内图形的默认样式和强调样式（悬浮时样式）
normal : {//默认样式
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {//强调样式
label : {
show : true,
position : 'center',//标签显示位置,地图标签不可指定位置
textStyle : {
fontSize : '30',
fontWeight : 'bold'
}
}
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
}; //为echats对象加载数据
myChart.setOption(option);
</script>
</body>
</html>
ECharts饼图制作分析的更多相关文章
- ECharts饼图试玩
处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...
- 将数据动态加载到Echarts饼图中
需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...
- Vue Echarts 饼图设置默认选中一个
Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...
- ECharts饼图自定义
[本文出自天外归云的博客园] 实现: 1.饼块可点击(点击饼块跳转到百度) 2.饼块自定义标签显示(显示个数.占比) 3.自定义标签连接线样式(虚线) 前端php代码如下: <!DOCTYPE ...
- echarts饼图
1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...
- 百度ECHARTS 饼图使用心得 处理data属性
做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...
- echarts饼图--数据交互
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- echarts饼图配置模板
var option = { title:{ text:'完成人构成分析--申报', //标题的样式 textSytle:{ //颜色 color : '#FF0000', //粗细 // fontW ...
- echarts饼图不显示数据为0的数据
首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...
随机推荐
- MyEclipse格式化JSP代码，其中Javascript无法格式化的原因
MyEclipse格式化JSP代码,其中Javascript无法格式化的原因: 可能是JSP页面代码有错误的地方,而且可能是一个很微小的错误,比如多写了一个标点符号,这个需要仔细检查,包括HTML.C ...
- NPOI追加内容到xlsx报错，用Epplus往excle xlsx追加数据
问题的现象就是,只要不修改xlsx,一直写入或者再次写入xlsx,追加内容都是不会有问题的.但是只要你修改了xlsx,用excle2010或者2007修改了xlsx的内容里面的列宽,或者行高,或者进行 ...
- C调用约定__cdecl、__stdcall、__fastcall、__pascal分析
参考原文地址:https://www.cnblogs.com/yenyuloong/p/9626658.html C/C++ 中不同的函数调用规则会生成不同的机器代码,产生不同的微观效果,接下来让我们 ...
- Mina 组件介绍之 IoAcceptor 与 IoConnector
在网络通信中,Socket通信的双方分为服务端与客户端,在Java NIO 的实现中采用Socket/ServerSocket, SocketChannel/ServerSocketChannel分别 ...
- 微信小程序关于tabbar点击切换数据不刷新问题
微信小程序中经常遇到的需求就是我提交了一个表单或者进行了一个操作,需要在我的个人中心页面中实时显示出来,但是小程序中的tabbar切换类似于tab切换 并不会进行页面刷新请求 所以总是会造成一些数据更 ...
- Bad escape character ‘ygen’ 错误原因!
ssh-keygen -t rsa -C “邮箱” ssh-keygen 命令中间没有空格,如果在ssh后面加上空格,会得到Bad escape character ‘ygen’.的错误.
- spark-day1
#!/usr/bin/python # -*- coding: utf_8 -*- from pyspark import SparkConf, SparkContext import os, tim ...
- Go语言使用百度翻译api
Go语言使用百度翻译api 之前做过一个使用百度翻译api的工具,这个工具用于用户的自动翻译功能,是使用C#调用百度翻译api接口,既然在学习Go语言,那必然也是要使用Go来玩耍一番.这里我是这么安排 ...
- 【Leetcode】804. Unique Morse Code Words
Unique Morse Code Words Description International Morse Code defines a standard encoding where each ...
- BZOJ2693: jzptab(莫比乌斯反演)
Time Limit: 10 Sec Memory Limit: 512 MBSubmit: 2068 Solved: 834[Submit][Status][Discuss] Descripti ...