本文是根据自己的实践进行总结过来的，是不完全的所有升级注意事项。 如果想直接看结果，请移步到第4部分内容
EChart 3是在2015年12月发布的新版本,相比较EChart 2,主要的变化总结如下： - 1) 支持了直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo） - 2) 移动端的优化,说明白就是将源码体积减小 - 3) 新增更多图表类型，增加了一些动态效果 - 4) 更丰富的交互模式 - 5) EChart 2推荐使用模块化单文件引入，EChart 3可以选择独立文件或者在webpack中使用模块化(在第2部分说明) - 6) 异步数据加载与更新(在第3部分说明)。
EChart 2自带有模块化机制，不用使用其它AMD/CMD库就可以require进来echarts提供的模块 EChart 2 引入进来的目录结构： 示例代码：
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:400px"></div> <!-- ECharts单文件引入 --> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data:['销量'] }, xAxis : [ { type : 'category', data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] } ], yAxis : [ { type : 'value' } ], series : [ { "name":"销量", "type":"bar", "data":[5, 20, 40, 10, 10, 20] } ] }; // 为echarts对象加载数据 myChart.setOption(option); } ); </script> </body>通过npm命令安装
npm install echarts --save按需引入 ECharts 图表和组件
// 引入 ECharts 主模块 var echarts = require('echarts/lib/echarts'); // 引入柱状图 require('echarts/lib/chart/bar'); // 引入提示框和标题组件 require('echarts/lib/component/tooltip'); require('echarts/lib/component/title'); // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 绘制图表 myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] });同2.2类似
<script src="echarts.min.js"></script> ``` # 3.异步数据加载与更新 由于地图模块分辨率变高，为了不增大源码的体积，地图模块采用按照需要下载引入 在[地图下载页面](http://echarts.baidu.com/download-map.html),下载需要的世界地图/中国地图/中国分省地图，下载后的格式有js和json两种。 对应js格式的，引入的方式是通过script标签 var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); 通过JSON格式引入就可以实现异步数据加载与更新 ```javascript $.get('map/json/china.json', function (chinaJson) { echarts.registerMap('china', chinaJson); var chart = echarts.init(document.getElementById('main')); chart.setOption({ series: [{ type: 'map', map: 'china' }] }); }); <div class="se-preview-section-delimiter"></div>一个网格中(示例4.1-2)| | addData , setSeries 方法设置配置项|统一使用setOption(示例4.1-3)| |级联this.myChart = ec.init(dom).showLoading({effect:’bubble’}).hideLoading();|不支持| | myChart.component.tooltip.showTip 这种形式调用相应的接口触发图表行为|dispatchAction(示例4.1-4)| 示例4.1-1
dataRange: { realtime: false, itemHeight: 80, splitNumber:6, borderWidth:1, textStyle: { color: '#333333' }, text: ['高', '低'], calculable: true }, //======================================================= visualMap: { min: 0, max: 1000000, text: ['High', 'Low'], realtime: false, calculable: true, inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } }, <div class="se-preview-section-delimiter"></div>示例4.1-2 图略，官网例子：http://echarts.baidu.com/gallery/editor.html?c=scatter-anscombe-quartet 部分配置属性变化，需要修改
示例4.1-3
myChart.setOption({ visualMap: { inRange: { color: ... } } })//注意最后一定要再次setOption(option);option是配置对象 <div class="se-preview-section-delimiter"></div>示例4.1-4
myChart.on('brushselected', renderBrushed); setTimeout(function() { self.myChart.dispatchAction({ type: 'brush', areas: [{ geoIndex: 0, brushType: 'polygon', coordRange: [ [119.72, 34.85], [117.05, 34.06], [117.49, 33.75], [123.16, 29.92], [121.64, 34.08] ] }] }); }, 0); function renderBrushed(params) { //... ... } <div class="se-preview-section-delimiter"></div>EChart 2:
chart.setOption({ series: [{ type: 'map', map: 'china'//'world' }] });EChart 3，需要下载地图，使用方式见第3部分。
