echarts高级使用

落日映苍穹つ 2022-08-12 00:21 151阅读 0赞

上一篇文章中介绍了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标签中引用即可。如下：

![SouthEast][]

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

![SouthEast 1][]

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

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

[SouthEast]: /images/20220810/58496efabe2d4c4f9e3673b44e806412.png
[SouthEast 1]: /images/20220810/8bef65aa9c4d48b8a4be3ef0f81285a6.png