码迷,mamicode.com
首页 > 其他好文 > 详细

echarts高级使用

时间:2014-09-07 23:50:36      阅读:559      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   使用   ar   for   文件   

 上一篇文章中介绍了echarts中柱状图的使用,从demo中我们可以看到不管是柱状图还是饼状图或者是折线图,都是导入js,准备option参数。为了使用方便我们下一步要做的就是封装了。

  我们把图形类型和图形数据与图形显示分离开来,封装独立的js文件,只要传给他图形类型参数和图形数据参数就能显示出对应的图形,这样就不会出现太多的冗余代码。接下来我们说封装js文件。

  是柱状图封装柱状图的js饼状图封装饼状图的js呢,还是所有的图形封装成一个js呢?如果我们单独封装,就把option内容中变化的图形数据抽出来,如果我们封装一个js,不同种的图形option格式不同,封装的js就相当于单独封装的集合。具体哪种封装还需要根据项目实际需求,以方便使用为目的。

  单独封装js介绍:以柱状图为例。

1,初始化js

//jsonArray图形数据数组 reportName图形显示标题
function initEchartsBar(json, reportName) {
	require.config({
		paths : {
			echarts : 'js/echarts',// 这里是你引用的echarts文件的路径
			'echarts/chart/bar' : 'js/echarts',// 这里需要注意的是除了mapchart使用的配置文件为echarts-map之外,其他的图形引用的配置文件都为echarts,这也是一般的图形跟地图的区别
			'echarts/chart/line' : 'js/echarts',
			'echarts/chart/pie' : 'js/echarts'
		}
	});
	require([ 'echarts',// 这里定义项目中需要的类
	'echarts/chart/bar', ], function(ec) {
		var myChart = ec.init(document.getElementById('main'));// 图表初始化的地方,在页面中要有一个地方来显示图表,他的ID是main
		option = getOptionByArray(json, reportDesign);//得到option图形
		myChart.setOption(option); //显示图形
	});
}

2,获取option数据

function getOptionByArray(json, reportName) {
	var option = {
		title : {
			text: reportName,
			x:'center'
		},
		tooltip : {
			trigger: 'item',
			formatter: "{a} <br/>{b} : {c} ({d}%)"
		},
		legend: {
			orient : 'vertical',
			x : 'left',
			data:json.getText
		},
		toolbox: {
			show : true,
			feature : {
				mark : {show: true},
				dataView : {show: true, readOnly: false},
				restore : {show: true},
				saveAsImage : {show: true}
			}
		},
		calculable : true,
		series : [
			{
				name:json.getText,
				type:'pie',
				radius : '55%',
				center: ['50%', '60%'],
				data:json.getValue
			}
		]
	};
		return option;
}

3,在界面引用js

一个界面只显示一种图形的话,只需要在文件head标签中引用即可。如下:

bubuko.com,布布扣


如果界面中显示多种图形,需要在确定选中哪种图形后动态导入所需的封装好的js文件,如下:

bubuko.com,布布扣


  $.getScript():远程调用js,在程序运行时根据程序给出的js路径动态的将路径下的js文件加载进程序中,以便程序使用。

  手动写一个html文件,测试远程调用js方法,在火狐和谷歌浏览器下面无法通过,在ie浏览器下通过。所以如果测试不通过,请更换浏览器试试,或者在eclipse工具中创建一个web项目测试。

  


echarts高级使用

标签:des   style   blog   http   io   使用   ar   for   文件   

原文地址:http://blog.csdn.net/lishuangzhe7047/article/details/39123031

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!