CSDN开源夏令营 百度数据可视化实践 ECharts（2）
来源：互联网 发布：疯狂的美工手机端 编辑：程序博客网 时间：2024/06/05 14:28
将ECharts引入项目中的几种详细方法讲解
（1）打好基本功
首先感谢林峰老师！给我们的悉心指导。我们之所以学习ECharts和Zrender图表组件，为了就是能够将图表应用到我们的实际情况中 来，进而让图表的战士能给我们一种更加人性化的方式呈现给用户。所有我们必须熟悉ECharts中相关组件。下面的例子都以line为例。
（2）将ECharts引入项目共有三种方式
2.1)第一种方式-模块化包引入
模块化包引入模式也可以称为开发模式，是开发时最好的方法，不管是开发echarts还是用echarts都是，因为文件未被合并压缩，所以有错误的话能立马定位到出错的地方从而让你快速的知道可能问题会出在哪里。但是这个并不适合上线，文件太大，加载太慢。这样上网会被骂死的。
首先下载Zrender到本地，和ECharts放在同一目录下。
在echarts/doc/example/www文件中建立一个HTML文件，所使用的js文件都包含在js文件中。
包含echarts.js、echarts-map.js、esl.js三个，其实只用到两个，echarts-map.js并不用。
Html代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ECharts"> <title>ECharts · Example</title></head><body><div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <script src="js/esl.js"></script> <script type="text/javascript"> require.config({ packages: [ { name: 'echarts', location: '../../../src', main: 'echarts' }, { name: 'zrender', //location: 'http://ecomfe.github.io/zrender/src', location: '../../../../zrender/src', main: 'zrender' } ] }); var option = {//图表标题title:{text:"未来一周气温变化",subtext:"纯属虚构"}, tooltip : { trigger: 'axis' }, legend: { data:['蒸发量','降水量'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category',boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', axisLabel : {formatter: '{value} °C' }} ],series : [{name:'最高气温',type:'line',data:[11, 11, 15, 13, 12, 13, 10],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {data : [{type : 'average', name: '平均值'}]}},{name:'最低气温',type:'line',data:[1, -2, 2, 5, 3, 2, 0],markPoint : {data : [{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}]},markLine : {data : [{type : 'average', name : '平均值'}]}}] }; require( [ 'echarts', 'echarts/chart/line', 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(document.getElementById('main')); myChart.setOption(option); } ) </script></body></html> 2.2)第二种方式-模块化单文件引入（推荐）在这里我们只是用line图表，其他的不用，如果你不用的话打包在一起就非常浪费，这时候就可以通过build目录下的build.js文件来构建一个更加贴身的echarts单文件。
总结来说模块化如何引入ECharts，你都需要如下4步：
1、引入一个模块加载器，如esl.js或者require.js
2、为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）
3、为模块加载器配置echarts的路径，从当前页面链接到echarts.js，见上述说明
4、动态加载echarts然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）
首先下载node下载完成后，安装好node。
打开build文件夹，看到如下文件：
这里我已经建立了一个新的build01.bat 就是单一生成echarts.js
node build.js optimize=true plain=false exclude=map output=echarts.js
当然也可以在终端里通过命令行参数方式运行 node.js构建脚本。
具体语法：
node build.js optimize=true exclude=map,force,line output=echarts.js plain=true
config-tpl.js文件修改为：
{ // appDir: './', baseUrl: '../src', name: 'echarts', packages: [ { name: 'zrender', location: '../../zrender/src', main: 'zrender' }, { name: 'echarts', location: '.', main: 'echarts' } ], include:[ 'echarts/chart/line' ], out: 'echarts.js'}完成后，将echarts.js拷贝到doc/example/www/js文件中，并将原有的覆盖。
新建html文件，代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ECharts</title> <script src="js/esl.js"></script></head><body> <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <script type="text/javascript"> require.config({ paths:{ echarts:'./js/echarts', 'echarts/chart/line': './js/echarts' } }); require( [ 'echarts', 'echarts/chart/line' ], function (ec) { var myChart = ec.init(document.getElementById('main')); myChart.setOption({title:{text:"未来一周气温变化",subtext:"纯属虚构"}, tooltip : { trigger: 'axis' }, legend: { data:['蒸发量','降水量'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category',boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', axisLabel : {formatter: '{value} °C' }} ],series : [{name:'最高气温',type:'line',data:[11, 11, 15, 13, 12, 13, 10],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {data : [{type : 'average', name: '平均值'}]}},{name:'最低气温',type:'line',data:[1, -2, 2, 5, 3, 2, 0],markPoint : {data : [{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}]},markLine : {data : [{type : 'average', name : '平均值'}]}}] }); } ); </script></body></html>2.2)第三种方式-标签式单文件引入（推荐）自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require，srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入。
可以直接引入的单文件如下：
1、echarts-plain.js : 经过压缩，包含除地图外的全部图表
2、echarts-plain-original.js : 未压缩，可用于调试，包含除地图外的全部图表
3、echarts-plain-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
4、echarts-plain-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据
方法：还是在www文件夹下建立一个html文件，当然位置可以随意放，用到的js文件是在百度ECharts的服务器上的。代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>ECharts</title></head><body> <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)--> <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom--> <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div> <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div></body><!--Step:1 Import echarts-plain.js or echarts-plain-map.js--><!--Step:1 引入echarts-plain.js或者 echarts-plain-map.js--><script src="http://echarts.baidu.com/doc/example/www2/js/echarts-plain-map.js"></script><script type="text/javascript"> // Step:3 echarts & zrender as a Global Interface by the echarts-plain.js. // Step:3 echarts和zrender被echarts-plain.js写入为全局接口 var myChart = echarts.init(document.getElementById('main')); myChart.setOption({//图表标题title:{text:"未来一周气温变化",subtext:"纯属虚构"}, tooltip : { trigger: 'axis' }, legend: { data:['蒸发量','降水量'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category',boundaryGap : false, data : ['周一','周二','周三','周四','周五','周六','周日'] } ], yAxis : [ { type : 'value', axisLabel : {formatter: '{value} °C' }} ],series : [{name:'最高气温',type:'line',data:[11, 11, 15, 13, 12, 13, 10],markPoint : {data : [{type : 'max', name: '最大值'},{type : 'min', name: '最小值'}]},markLine : {data : [{type : 'average', name: '平均值'}]}},{name:'最低气温',type:'line',data:[1, -2, 2, 5, 3, 2, 0],markPoint : {data : [{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}]},markLine : {data : [{type : 'average', name : '平均值'}]}}] }); </script></html>总结：
三种方法的最终的运行结果都一样，如下图所示：
2 0
- CSDN开源夏令营 百度数据可视化实践 ECharts（2）
- CSDN开源夏令营 百度数据可视化实践 ECharts（1）
- CSDN开源夏令营 百度数据可视化实践 ECharts（3）
- CSDN开源夏令营 百度数据可视化实践 ECharts（4）
- CSDN开源夏令营 百度数据可视化实践 ECharts（5）
- CSDN开源夏令营 百度数据可视化实践 ECharts（6） 期中总结
- CSDN开源夏令营 百度数据可视化实践 ECharts（7）
- CSDN开源夏令营 百度数据可视化实践 ECharts（8）
- CSDN开源夏令营 百度数据可视化实践 ECharts（8）问题分析
- CSDN开源夏令营 百度数据可视化实践 ECharts 11 （期末总结）
- CSDN开源夏令营 百度数据可视化实践 前言
- 百度开源的数据可视化工具eCharts真心不错
- 可视化学习之百度echarts工具（2）
- 开源的数据可视化JavaScript图表库：ECharts
- 开源的数据可视化JavaScript图表库：ECharts
- 开源的数据可视化JavaScript图表库：ECharts
- 大数据可视化工具Echarts（2）初始化
- CSDN开源夏令营总结
- SVN中"<<<<<<< .mine“的问题
- hadoop编程小技巧（4）---全局key排序类TotalOrderPartitioner
- Win32消息处理API---GetMessage
- 60个常用linux 的命令
- UVA 11077 - Find the Permutations(递推)
- CSDN开源夏令营 百度数据可视化实践 ECharts（2）
- ruby on rails出现的问题ActiveModel::ForbiddenAttributesError
- 字符串
- 【Unity3D】【NGUI】如何动态给EventDelegate添加参数
- C# - CSV file reader
- OCP exam notes
- 数据挖掘笔记-分类-支持向量机SVM-1
- webApp前端开发技巧总结
- Azure编程笔记（5）：长时间的异步操作带来的问题
