echarts 应用数个样例
- 应用一：环形图和饼图嵌套
先说明一下内部文件分布：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGV4dGJveQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
注意输入数组的格式（不是一般Javascript 的数组格式，而是有点像json 的样子），代码例如以下：
profiles_pie_weibo:function(event_id){
heats=[{name:'直达', value:335},{name:'营销广告', value:679},{name:'搜索引擎', value:1548}];
heats2 = [{name:'直达', value:335},{name:'邮件营销', value:310},{name:'联盟广告', value:234},{name:'视频广告', value:135},
{name:'百度', value:1048},{name:'谷歌', value:251},{name:'必应', value:147},{name:'谷歌', value:102}];
// echarts库文件路径配置
require.config({
paths: {
echarts: $base.appConfig.lib_scripts_path + '/echarts/'
}
});
// 使用图表
require(
[
'echarts',
'echarts/chart/pie'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('profiles_layout'));
var option = {
tooltip : { //鼠标hover时提示
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name: '訪问来源',
type:'pie',
radius: [0,'35%'], //内部饼图
itemStyle : {
normal : {
label : {
position : 'inner'
},
labelLine : {
show : false
}
}
},
data: heats
},
{
name: '訪问来源2',
type:'pie',
radius: ['50%','70%'], //数组形式，环形图
data: heats2
}
]
};
// 为echarts对象载入数据
myChart.setOption(option);
}
);//======end require=======
},
出来的效果图：
另：应用function到tooltips的样例：
tooltip : {
trigger: 'item',
formatter: function (params,ticket,callback) {
if ('titles' == params.seriesName) {
return "职位: " + params.name + "，个数：" + params.value;
} else
if ('names' == params.seriesName) {
return "姓名: " + params.name;
}
}
series : [
{
name:'titles',
type:'pie',
radius: [0,'35%'], //内部饼图
itemStyle : {
normal : {
label : {
show: false,
position : 'inner'
},
labelLine : {
show : false
}
}
},
data: titles
},
{
name: 'names',
type:'pie',
radius: ['50%','70%'], //数组形式，环形图
data: names
}
]
效果图（内圈 tooltips）：
（外圈 tooltips）：
- 应用二：SVG扩展-人体图（人物画像/用户画像的简化版）
这个东西代码不难，但那个SVG底图的相应代码起着关键的影响，所以搞这个之前最好学一点SVG代码编写规则。好吧。做echarts SVG扩展的人还是比較少的，网上差点儿找不到多少直接相关资料，仅仅能自己摸弄着过河了~
代码（有一点点无用代码。不影响阅读）：
//人物画像
profiles_weibo_3:function(event_id){
// echarts库文件路径配置
require.config({
paths: {
echarts: $base.appConfig.lib_scripts_path + '/echarts/'
}
});
// 使用图表
require(
[
'echarts',
'echarts/chart/map'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('profiles_layout')); // 自己定义扩展图表类型：mapType = body
require('echarts/util/mapData/params').params.bodyMale = {
getGeoJson: function (callback) {
$.ajax({
url: $base.appConfig.lib_scripts_path + "/echarts/svg/raw_man.svg",
dataType: 'xml',
success: function(xml) {
callback(xml);
},
error:function(XMLResponse){
alert(XMLResponse.responseText);
}
});
}
};
var option = {
title : {
text : '人体password',
subtext: '地图SVG扩展',
x:'center'
},
tooltip : {
trigger: 'item'
},
dataRange: {
min: 0,
max: 100,
x: 'center',
y: 'center',
calculable : true,
itemHeight:30,
color: ['orangered','yellow','lightskyblue']
},
series : [
{
name: '人体password-男',
type: 'map',
mapType: 'bodyMale', // 自己定义扩展图表类型
mapLocation: {
x:'left'
},
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name: 'head', value: 90},
{name: 'body', value: 60},
{name: 'left_hand', value: 70},
{name: 'right_hand', value: 50},
{name: 'left_leg', value: 40},
{name: 'right_leg', value: 30},
{name: 'bag', value: 90}
],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 5
}, data : [
[
{name:'男',geoCoord:[138, 126]},
{name:'女',value:90,geoCoord:[268, 56]}
]
]
}
}
]//======end series=======
};
myChart.setOption(option);
}
);//======end require=======
},
效果图：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGV4dGJveQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
SVG Reference:
echarts sample：http://echarts.baidu.com/doc/example/map16.html?qq-pf-to=pcqq.c2c
echarts sample 中用到的SVG文件：https://code.csdn.net/u013476464/baidu_data_visualization/tree/master/doc/example/svg/body-male.svg
SVG扩展其它样例：http://www.oschina.net/code/piece_full?code=38878
SVG在线编辑：http://editor.method.ac/
SVG 学习：http://www.w3cplus.com/html5/svg-transformations.html，http://www.tuicool.com/articles/yUZz2mu
上面的样例用到我做的SVG文件。
仅仅是图片编辑工具是不够的，还须要改动里面的代码。另外，stroke 和fill 是不能加在须要作色彩变化的项上的。不然dataRange中的着色会不成功。代码例如以下：
<? xml version="1.0"?>
<svg width="232" height="336" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="338" width="234" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<!-- <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>-->
</g>
</g>
<g>
<title>Layer 1</title>
<ellipse name="head" ry="39.5" rx="39" id="svg_1" cy="51" cx="116.5" stroke-width="1.5"/>
<ellipse name="body" ry="66" rx="15" id="svg_2" cy="158.5" cx="116.5" stroke-width="1.5"/>
<ellipse name="right_leg" ry="37.5" rx="10" id="svg_3" cy="268" cx="95.5" stroke-width="1.5"/>
<ellipse name="left_leg" ry="48" rx="9.5" id="svg_4" cy="270.5" cx="144" stroke-width="1.5"/>
<ellipse name="right_hand" ry="8.5" rx="41.5" id="svg_5" cy="144" cx="53" stroke-width="1.5"/>
<ellipse name="left_hand" ry="9" rx="40.5" id="svg_6" cy="142.5" cx="187" stroke-width="1.5"/>
<path id="svg_8" d="m91.5,43.5c12,2 18,-3 18,-3c0,0 -30,1 -18,3z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
<path id="svg_9" d="m127.5,39.5c15,4 15,3 14.5,2.5c0.5,0.5 -29.5,-6.5 -14.5,-2.5z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
<path id="svg_10" d="m99.5,68.5c0,-1 15,11 14.5,10.5c0.5,0.5 18.5,-9.5 18,-10" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/>
<path id="svg_11" name="bag" d="m22.5,161.5c-10,17 -11,61 -11.5,60.5c0.5,0.5 14.5,28.5 14,28c0.5,0.5 13.5,-25.5 13,-26l-15.5,-62.5z"/>
</g>
</svg>
- 应用三：等级金字塔图
内含图中节点点击事件样例
var bandTitleList=data.bandTitleList;
var bands = new Array(); if(bandTitleList && bandTitleList.length > 0){
$.each(bandTitleList, function(i, item){
bands.push({value:item.band, name: item.title});
});
// echarts库文件路径配置
require.config({
paths: {
echarts: $base.appConfig.lib_scripts_path + '/echarts/'
}
});
//绘制表
require(
[
'echarts',
'echarts/chart/funnel'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('bands_chart'));
var option = {
title : {
text: '级别图'
},
tooltip : {
trigger: 'item',
formatter: "{b}"
},
series : [
{
name:'级别',
type:'funnel',
x2:'50%',
sort : 'ascending',
data: bands
// [{value:20, name:'订单,订单2'}, {value:100, name:'展现'}]
}
]
};
myChart.setOption(option); var ecConfig = require('echarts/config');
// 实现节点点击事件
function focus(param) {
var data = param.data;
// 推断节点的相关数据是否正确
if (data != null && data != undefined) {
if (data.value != null && data.value != undefined) {
//弹出每一级包含的人员
$biosMain.showNamesByBand(name, data.value);
}
}
}
// 绑定图表节点的点击事件
myChart.on(ecConfig.EVENT.CLICK, focus);
}
);//======end require======= // first run
if (bands.length > 0) {
$biosMain.showNamesByBand(name, bands[0].value);
}
}else{
$("#bands_chart").html("<li style='color:#6EAFD7'>"+$.language.getText('WEIBO_NO_DATA')+"</li>");
}
效果图：
- 应用四：树形图（勉强也可作组织结构图）
1）数据source 订制
<pre name="code" class="javascript"> var titleNameList=data.titleNameList;
var lvl_3 = new Array();
var lvl_2 = new Array();
var lvl_1 = new Array();
var preTitle = ""; if(bandTitleList){
$.each(titleNameList, function(i, item){
if (preTitle != "" && preTitle != item.title) { // group by title
lvl_2.push({name:preTitle, value:20, children:lvl_3, level:2}); // custom label: level
lvl_3 = [];
}
preTitle = item.title;
lvl_3.push({name:item.name, value:20, level:3, itemStyle: {normal: {color: '#cc9999', label: {position: 'right'}}}});
});
lvl_1.push({name:"", value:20, children:lvl_2, level:1, itemStyle: {normal: {color: '#cc6666'}}});
2）option
//绘制表
require(
[
'echarts',
'echarts/chart/tree'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('names_chart'));
var option = {
title : {
text: '级别相应人员图'
},
tooltip : {
trigger: 'item',
formatter: function (params,ticket,callback) {
if (3 == params.data.level) {
return "姓名: " + params.data.name;
} else
if (2 == params.data.level) {
return "职位: " + params.data.name;
} else
if (1 == params.data.level) {
return "band";
}
}
// {b} // for testing
},
series : [
{
type:'tree',
name : "Force tree",
orient : "horizontal",
rootLocation : {x:'20%',y:'top'},
layerPadding : 160,
nodePadding : 23,
roam : true,
itemStyle: {
normal: {
label: {
show: true
},
nodeStyle : {
brushType : 'both',
strokeColor : 'rgba(255,215,0,0.6)',
lineWidth : 1
}
}
},
data : lvl_1
}
]
};
myChart.setOption(option);
}
);//======end require=======
3）效果图
经验：假设不出图又不报错。有可能是由于echarts js 之间不同版本号所造成。能够用src版的echarts 追踪进原码确定。我就试过tree 不出图。原因是用了新版的tree.js。旧版的echarts.js。
- 应用五：堆积条形图
option = {
title : {
text: '通过情况分析',
x:'center'
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默觉得直线，可选为：'line' | 'shadow'
}
},
legend: {
data:['不通过', '通过'],
x : 'left'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'category',
data : ['分期2','分期3','分期4','分期5','分期6', '贷1','贷2','贷3']
}
],
series : [
{
name:'不通过',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[20, 117, 5, 4, 44, 22, 9, 63]
},
{
name:'通过',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[19, 91, 4, 2, 27, 12, 13, 57]
}
]
};
效果：
http://echarts.baidu.com/doc/example/bar4.html
- 应用六：饼图（最普通也最经常使用）
option = {
title : {
text: '拒绝情况分析',
x:'center',
textStyle: {fontSize: 24}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:['客户原因','其它原因','综合推断']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
color:['#CC99FF','#FF9966','#9999FF'],
series : [
{
type:'pie',
radius : '55%',
center: ['50%', '60%'],
itemStyle : { normal: {
label : {textStyle: {fontSize: 16},show: true, formatter: '{b}: {d}%'}}},
data:[
{value:335, name:'客户原因'},
{value:310, name:'其它原因'},
{value:234, name:'综合推断'}
]
}
]
};
效果：
http://echarts.baidu.com/doc/example/pie1.html
echarts 应用数个样例的更多相关文章
- C语言结构体及函数传递数组參数演示样例
注:makeSphere()函数返回Sphere结构体,main函数中.调用makeSphere()函数,传递的第一个參数为数组,传递的数组作为指针.
- RPM安装包-Spec文件參数具体解释与演示样例分析
spec文件是整个RPM包建立过程的中心,它的作用就如同编译程序时的Makefile文件. 1.Spec文件參数 spec文件包括建立一个RPM包必需的信息,包括哪些文件是包的一部分以及它们安装在哪个 ...
- ECharts组件应用样例代码
一.从Echarts官网上下载最新版本组件 Echarts是百度开发的开源Web图表组件,界面美观,使用简单.组件下载地址:http://echarts.baidu.com/echarts2/doc/ ...
- 【scikit-learn】交叉验证及其用于參数选择、模型选择、特征选择的样例
内容概要¶ 训练集/測试集切割用于模型验证的缺点 K折交叉验证是怎样克服之前的不足 交叉验证怎样用于选择调节參数.选择模型.选择特征 改善交叉验证 1. 模型验证回想¶ 进行模型验证的一个重要目 ...
- 关于peersim样例配置文件的超详细解读（新手勿喷）
相信很多兄弟一开始接触peersim,对配置文件还是有点不适应,我看了好久的样例的配置文件,一层层去找对应的文件的方法,终于好像悟懂了一点,记下来以后回顾. 贴上代码,一点点分析. 首先要说下所谓的配 ...
- JDBC连接MySQL数据库及演示样例
JDBC是Sun公司制定的一个能够用Java语言连接数据库的技术. 一.JDBC基础知识 JDBC(Java Data Base Connectivity,java数据库连接)是一种用 ...
- hadoop学习；block数据块；mapreduce实现样例；UnsupportedClassVersionError异常；关联项目源代码
对于开源的东东,尤其是刚出来不久,我认为最好的学习方式就是能够看源代码和doc,測试它的样例 为了方便查看源代码,关联导入源代码的项目 先前的项目导入源代码是关联了源代码文件 block数据块,在配置 ...
- jbpm入门样例
1. jBPM的简介 jBPM是JBOSS下的一个开源java工作流项目,该项目提供eclipse插件,基于Hibernate实现数据持久化存储. 參考 http://www.jbos ...
- socket编程——一个简单的样例
从一个简单的使用TCP样例開始socket编程,其基本过程例如以下: server client ++ ...
随机推荐
- Android 仿360桌面小人
首先自定义FloatsWindowView,用于显示动画小人. import android.annotation.SuppressLint; import android.content.Conte ...
- 去掉iphone 的圆角样式
每次面对iphone这种丑丑的样式,我简直不能再愉快的写代码~~而且每次记不住那烦人的属性~~~必须记录下来~~ -webkit-appearance:none 为了下次不用再百度,终于背下来~~~
- Python正则表达式指南(转载)
转载自:http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html#3353540 1. 正则表达式基础 1.1. 简单介绍 正则表达式并不 ...
- Python中的isinstance函数
isinstance是Python中的一个内建函数 语法: isinstance(object, classinfo) 如果参数object是classinfo的实例,或者object是class ...
- SQL 时间戳
一直对时间戳这个概念比较模糊,相信有很多朋友也都会误认为:时间戳是一个时间字段,每次增加数据时,填入当前的时间值.其实这误导了很多朋友. 1.基本概念 时间戳:数据库中自动生成的唯一二进制数字,与时间 ...
- SQL Server 数据岸问题
create table t2(x int constraint pk_t2 primary key);go insert into t2(x) values(1),(2),(3),(5),(7),( ...
- WPF中如何获取ControlTemplate中的对象
原文 http://www.silverlightchina.net/html/study/WPF/2010/1116/3418.html 先看一段XAML代码: 1 2 3 4 5 6 7 8 9 ...
- 项目管理：关于SVN的实践
SVN是Subversion的简称,是一个开放源码的版本号控制系统. 合作开发的时候,对SVN的使用有3个软件:SVN的server端,SVNclient(也就是Tortoise SVN,寻常chec ...
- 远程登录阿里云上的MySQL
近期对云和server之类的感兴趣,想要将自己的数据什么的保存到远端server.研究了阿里云和百度云.今天算是有点进步吧. 我在阿里云上申请了个免费的云server(ECS),非常可惜仅仅能用5天. ...
- 对JAVA Bean使用PropertyDescriptor反射调用JAVA方法
对于符合JAVA Bean规范的bean,调用其方法应优先使用java.beans.PropertyDescriptor获取Method进行方法调用,以获得更大的可维护性. 示比例如以下: NonCo ...