echarts 应用数个样例

  • 应用一：环形图和饼图嵌套

先说明一下内部文件分布：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGV4dGJveQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

注意输入数组的格式（不是一般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" >

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
				


				
时间： 2024-10-06 01:04:37 

		


		


	

	
	

		


		
echarts 应用数个样例的相关文章


								

		

			

                C语言结构体及函数传递数组參数演示样例
			

		

		

									

				注:makeSphere()函数返回Sphere结构体,main函数中.调用makeSphere()函数,传递的第一个參数为数组,传递的数组作为指针.			

		

	

				

		

			

                【scikit-learn】交叉验证及其用于參数选择、模型选择、特征选择的样例
			

		

		

									

				?? 内容概要? 训练集/測试集切割用于模型验证的缺点 K折交叉验证是怎样克服之前的不足 交叉验证怎样用于选择调节參数.选择模型.选择特征 改善交叉验证 1. 模型验证回想? 进行模型验证的一个重要目的是要选出一个最合适的模型,对于监督学习而言,我们希望模型对于未知数据的泛化能力强,所以就须要模型验证这一过程来体现不同的模型对于未知数据的表现效果. 最先我们用训练精确度(用所有数据进行训练和測试)来衡量模型的表现,这样的方法会导致模型过拟合:为了解决这一问题,我们将所有数据分成训练集和測试集两部			

		

	

				

		

			

                Python Socket 编程——聊天室演示样例程序
			

		

		

									

				上一篇 我们学习了简单的 Python TCP Socket 编程,通过分别写服务端和client的代码了解主要的 Python Socket 编程模型.本文再通过一个样例来加强一下对 Socket 编程的理解. 聊天室程序需求 我们要实现的是简单的聊天室的样例,就是同意多个人同一时候一起聊天.每一个人发送的消息全部人都能接收到,类似于 QQ 群的功能,而不是点对点的 QQ 好友之间的聊天.例如以下图: 图来自:http://www.ibm.com/developerworks/linux/tu			

		

	

				

		

			

                Java向上转型和向下转型（附具体样例）
			

		

		

									

				                                            Java向上转型和向下转型(附具体样例) 熬夜整理的关于Java向上和向下转型的样例,很的通俗易懂哦~~~~ 一.向上转型 package com.sheepmu; class Animal { public void eat() { System.out.println("父类的 eating..."); } } class Bird extends Animal { @Override publ			

		

	

				

		

			

                Relation Extraction中SVM分类样例unbalance data问题解决 -松弛变量与惩罚因子
			

		

		

									

				转载自:http://blog.csdn.net/yangliuy/article/details/8152390 1.问题描述 做关系抽取就是要从产品评论中抽取出描述产品特征项的target短语以及修饰该target的opinion短语,在opinion mining里面属于很重要的task,很多DM.NLP相关的paper在做这方面的工作.基本的思路是: (1)从sentence的parse tree(比如stanford parser)中选取候选target结点和候选opinion结点,然			

		

	

				

		

			

                LoadRunner性能测试样例分析
			

		

		

									

				LR性能测试结果样例分析 测试结果分析 LoadRunner性能测试结果分析是个复杂的过程,通常可以从结果摘要.并发数.平均事务响应时间.每秒点击数.业务成功率.系统资源.网页细分图.Web服务器资源.数据库服务器资源等几个方面分析,如图1- 1所示.性能测试结果分析的一个重要的原则是以性能测试的需求指标为导向.我们回顾一下本次性能测试的目的,正如 所列的指标,本次测试的要求是验证在30分钟内完成2000次用户登录系统,然后进行考勤业务,最后退出,在业务操作过程中页面的响应时间不超过3秒,并且服			

		

	

				

		

			

                Linux crontab 命令格式与具体样例
			

		

		

									

				基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示月份1-12 第5列标识号星期0-6(0表示星期天) 第6列要执行的命令 crontab文件的一些样例: 30 21 * * * /usr/local/etc/rc.d/lighttpd restart 上面的样例表示每晚的21:30重新启动apache. 45 4 1,10,22 * * /usr			

		

	

				

		

			

                关于peersim样例配置文件的超详细解读（新手勿喷）
			

		

		

									

				相信很多兄弟一开始接触peersim,对配置文件还是有点不适应,我看了好久的样例的配置文件,一层层去找对应的文件的方法,终于好像悟懂了一点,记下来以后回顾. 贴上代码,一点点分析. 首先要说下所谓的配置文件,其实就是一个txt文件,语法也是非常简单,类似java里的给类里的变量赋值,这也正对应了配置文件的作用,配置文件,当然就是为实验的参数进行配置用的,所以配置文件的主要功能就是配置各类参数,定义一些协议类.控制类.初始化类以及一些常数. 1 # PEERSIM EXAMPLE 1 #配置文件中			

		

	

				

		

			

                最简单的视音频播放演示样例4：Direct3D播放RGB（通过Texture）
			

		

		

									

				===================================================== 最简单的视音频播放演示样例系列文章列表: 最简单的视音频播放演示样例1:总述 最简单的视音频播放演示样例2:GDI播放YUV, RGB 最简单的视音频播放演示样例3:Direct3D播放YUV,RGB(通过Surface) 最简单的视音频播放演示样例4:Direct3D播放RGB(通过Texture) 最简单的视音频播放演示样例5:OpenGL播放RGB/YUV 最简单的视音频播放演示样例