百度Echarts+JQuery 一页多图动态加载实现(可拆分)

大概的发一下一页多图的加载方法，可以拆分，可以合并。动态取数据显示。

效果图如下：

JS引用代码;

    <link href="assets/css/echartsHome.css" rel="stylesheet">
    <script src="assets/js/esl.js"></script>
    <script src="assets/js/codemirror.js"></script>

 <div id="maincharts" class="main" style="width:850px;"></div>
 <div id="chartArea2" class="main" style="width:850px;"></div>

   <script src="assets/js/jquery-1.8.2.min.js"></script>
   <script src="assets/js/echarts-map.js"></script>

JS实现代码：

	<script type="text/javascript">
		  	 function needMap() {
		  	 	 var href = location.href;
		  	 	 return href.indexOf('map') != -1
						|| href.indexOf('mix3') != -1
						|| href.indexOf('mix5') != -1
						|| href.indexOf('dataRange') != -1;

		  	 }

		  	 var fileLocation = needMap() ? 'assets/js/echarts-map' : 'assets/js/echarts';
		  	 require.config({
		  	 	 paths: {
		  	 	 	 echarts: fileLocation,
		  	 	 	 'echarts/assets/js/pie': fileLocation,
		  	 	 	 'echarts/assets/js/map': fileLocation,
		  	 	 }
		  	 });

		  	 require(
						[
							'echarts',
							'echarts/chart/pie',
							needMap() ? 'echarts/chart/map' : 'echarts'
						],

					 DrawCharts
			    );
		  	 function DrawCharts(ec) {

		  	 	 DrawMapPieCharts(ec);
		  	 	 DrawBarCharts(ec);
		  	 }
		  	 function DrawMapPieCharts(ec) {
		  	 	 //--- 柱状图 ---
		  	 	 var myChart = ec.init(document.getElementById('maincharts'));

		  	 	 myChart.showLoading({
		  	 	 	 text: "正在加载中...请稍后"
		  	 	 });
		  	 	 myChart.hideLoading();
		  	 	 myChart.setOption({
		  	 	 	 title: {
		  	 	 	 	 text: '2014全国每月销售量（单）',
		  	 	 	 	 subtext: '数据来自WMS统计'
		  	 	 	 },
		  	 	 	 tooltip: {
		  	 	 	 	 trigger: 'item'
		  	 	 	 },
		  	 	 	 legend: {
		  	 	 	 	 x: 'right',
		  	 	 	 	 selectedMode: false,
		  	 	 	 	 data: ['山东', '上海', '广东', '江苏']
		  	 	 	 },
		  	 	 	 dataRange: {
		  	 	 	 	 orient: 'horizontal',
		  	 	 	 	 min: 0,
		  	 	 	 	 max: 55000,
		  	 	 	 	 text: ['购买力强', '低'],           // 文本，默认为数值文本
		  	 	 	 	 splitNumber: 0
		  	 	 	 },
		  	 	 	 toolbox: {
		  	 	 	 	 show: true,
		  	 	 	 	 orient: 'vertical',
		  	 	 	 	 x: 'right',
		  	 	 	 	 y: 'center',
		  	 	 	 	 feature: {
		  	 	 	 	 	 mark: { show: true },
		  	 	 	 	 	 dataView: { show: true, readOnly: false }
		  	 	 	 	 }
		  	 	 	 },
		  	 	 	 series: [
					 {
					 	 name: '2014全国每月订单销售量',
					 	 type: 'map',
					 	 mapType: 'china',
					 	 mapLocation: {
					 	 	 x: 'left'
					 	 },
					 	 selectedMode: 'multiple',
					 	 itemStyle: {
					 	 	 normal: { label: { show: true } },
					 	 	 emphasis: { label: { show: true } }
					 	 },
					 	 data: [
                         { name: '西藏', value: 605.83 },
                         { name: '青海', value: 1670.44 },
                         { name: '宁夏', value: 2102.21 },
                         { name: '海南', value: 2522.66 },
                         { name: '甘肃', value: 5020.37 },
                         { name: '贵州', value: 5701.84 },
                         { name: '新疆', value: 6610.05 },
                         { name: '云南', value: 8893.12 },
                         { name: '重庆', value: 10011.37 },
                         { name: '吉林', value: 10568.83 },
                         { name: '山西', value: 11237.55 },
                         { name: '天津', value: 11307.28 },
                         { name: '江西', value: 11702.82 },
                         { name: '广西', value: 11720.87 },
                         { name: '陕西', value: 12512.3 },
                         { name: '黑龙江', value: 12582 },
                         { name: '内蒙古', value: 14359.88 },
                         { name: '安徽', value: 15300.65 },
                         { name: '北京', value: 16251.93 },
                         { name: '福建', value: 17560.18 },
                         { name: '上海', value: 19195.69 },
                         { name: '湖北', value: 19632.26 },
                         { name: '湖南', value: 19669.56 },
                         { name: '四川', value: 21026.68 },
                         { name: '辽宁', value: 22226.7 },
                         { name: '河北', value: 24515.76 },
                         { name: '河南', value: 26931.03 },
                         { name: '浙江', value: 32318.85 },
                         { name: '山东', value: 45361.85 },
                         { name: '江苏', value: 49110.27 },
                         { name: '广东', value: 53210.28 }
					 	 ]
					 }
					 ,
					 {
					 	 name: '2014全国每月订单销售量',
					 	 type: 'pie',
					 	 roseType: 'area',
					 	 tooltip: {
					 	 	 trigger: 'item',
					 	 	 formatter: "{a} <br/>{b} : {c} ({d}%)"
					 	 },
					 	 center: [document.getElementById('maincharts').offsetWidth - 250, 225],
					 	 radius: [30, 120],
					 	 data: [
                         { name: '山东', value: 26251.93 },
                         { name: '上海', value: 19195.69 },
                         { name: '广东', value: 33210.28 },{ name: '江苏', value: 23210.28 }
					 	 ]
					 }
		  	 	 	 ],
		  	 	 	 animation: false

		  	 	 });
		  	 }

		  	 function DrawBarCharts(ec) {
		  	 	 //--- 柱状图 ---
		  	 	 var myChart = ec.init(document.getElementById('chartArea2'));
		  	 	 myChart.showLoading({
		  	 	 	 text: "正在加载中...请稍后"
		  	 	 });
		  	 	 myChart.hideLoading();
		  	 	 myChart.setOption({

		  	 	 	 tooltip: {
		  	 	 	 	 trigger: 'axis'
		  	 	 	 },
		  	 	 	 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 }
		  	 	 	 	 }
		  	 	 	 },

		  	 	 	 xAxis: {
		  	 	 	 	 data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		  	 	 	 },
		  	 	 	 yAxis: {
		  	 	 	 	 type: 'value'
		  	 	 	 },
		  	 	 	 series: [
						 {
						 	 name: '坐标轴触发1',
						 	 type: 'bar',
						 	 data: [320, 332, 301, 334, 390, 330, 320]
						 },
						 {
						 	 name: '坐标轴触发2',
						 	 type: 'bar',
						 	 data: [862, 1018, 964, 1026, 1679, 1600, 157]
						 },
						 {
						 	 name: '鼠标移动触发显示1',
						 	 type: 'bar',
						 	 tooltip: {             // Series config.
						 	 	 trigger: 'item',
						 	 	 backgroundColor: 'black',
						 	 	 position: [0, 0],
						 	 	 formatter: "Series formatter: <br/>{a}<br/>{b}:{c}"
						 	 },
						 	 stack: '数据源',
						 	 data: [
								 120, 132,
								 {
								 	 value: 301,
								 	 itemStyle: { normal: { color: 'red' } },
								 	 tooltip: {     // Data config.
								 	 	 backgroundColor: 'blue',
								 	 	 formatter: "Data formatter: <br/>{a}<br/>{b}:{c}"
								 	 }
								 },
								 134, 90,
								 {
								 	 value: 230,
								 	 tooltip: { show: false }
								 },
								 210
						 	 ]
						 },
						 {
						 	 name: '鼠标移动显示2',
						 	 type: 'bar',
						 	 tooltip: {
						 	 	 show: false,
						 	 	 trigger: 'item'
						 	 },
						 	 stack: '数据源',
						 	 data: [150, 232, 201, 154, 190, 330, 410]
						 }
		  	 	 	 ]
		  	 	 });
		  	 }

		  </script>

整理好的Echarts文件地址如下：

http://files.cnblogs.com/kongwei521/Echarts%E8%A6%81%E7%94%A8%E5%88%B0%E7%9A%84js_css_dll.zip