本文目录一览：
- 1、ECharts3 怎么加载 china.js 地图
- 2、求echarts里面的china.js求一个百度云盘地址
- 3、ECharts3 怎么加载 chinajs 地图
- 4、如何使用echart中获取canvas绘制到自己的canvas上去
- 5、ECharts is not Loaded
- 6、ECharts3怎么加载china.js地图？
ECharts3 怎么加载 china.js 地图
script src="echarts.js"/script
script src="map/js/china.js"/script
script
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
series: [{
type: 'map',
map: 'china'
}]
});
/script
求echarts里面的china.js求一个百度云盘地址
echart在github上是开源的，china.js也同样能下载到；
github地址：网页链接；
china.js百度网盘地址：链接：
密码：9kf9
ECharts3 怎么加载 chinajs 地图
1、使用echarts之前先要引入echartsjs，js可以到官网下载 2、写一个div容器用来装echarts内容，这个容器必须有高度，不然看不到内容。 3、在script中获取div容器的id，根据需要写option中的参数（也许你现在还不知道option是干嘛用的，不要着急ECharts3 怎么加载 chinajs 地图
如何使用echart中获取canvas绘制到自己的canvas上去
获取echart的imgge：
[javascript] view plain copy
var img = new Image();
img.src = myChart.getDataURL({
pixelRatio: 2,
backgroundColor: '#fff'
});
这中方式是获取echart的图片
获取echart的canvas：
[javascript] view plain copy
var offcanvas= myChart.getRenderedCanvas({
pixelRatio: 2,
backgroundColor: '#fff'
});
有了种两种方式再实现离屏canvas就很简单了
下面给出一个简单的示例(获取canvas的)：
html页面：
[html] view plain copy
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
title/title
script type="text/javascript" src="../js/jquery/jquery-1.9.2.min.js"/script
script type="text/javascript" src="../js/echart/echarts.min.js"/script
script type="text/javascript" src="../js/echart/china.js"/script
script type="text/javascript" src="../js/effsctScatter-map.js"/script
/head
body
div id="main" style="width: 600px;height:400px;"/div
canvas id="canvas"/canvas
/body
/html
js文件：
[javascript] view plain copy
/**
* Created by se7en on 2016/2/4.
*/
$(document).ready(function () {
var option = {
legend: {
data:['sin','cos']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataZoom : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis : [
{
type : 'value',
scale:true
}
],
yAxis : [
{
type : 'value',
scale:true
}
],
series : [
{
name:'sin',
type:'scatter',
large: true,
symbolSize: 3,
data: (function () {
var d = [];
var len = 10000;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
d.push([
x,
//Math.random() * 10
(Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
//console.log(d)
return d;
})()
},
{
name:'cos',
type:'scatter',
large: true,
symbolSize: 3,
data: (function () {
var d = [];
var len = 10000;
var x = 0;
while (len--) {
x = (Math.random() * 10).toFixed(3) - 0;
d.push([
x,
//Math.random() * 10
(Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
]);
}
//console.log(d)
return d;
})()
}
]
};
var myChart = echarts.init(document.getElementById('main'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
$('#main').hide();
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var ctx = canvas.getContext('2d');
var offcanvas = myChart.getRenderedCanvas({
pixelRatio: 2,
backgroundColor: '#fff'
});
ctx.drawImage(offcanvas,0,0);
});
至于echart获取canvas中的参数大家可以自己尝试一下，可能会有不同的结果
ECharts is not Loaded
用echarts.js和china.js配置地图，结果显示不正常，打开浏览器后台，显示以上报错。
原因是在加载echarts.js前加载的china.js,这两个js文件加载顺序是需要注意的，必须先加载echarts.js才能加载其它的地图组件。
ECharts3怎么加载china.js地图？
echarts3加载map的方式和2不一样了，你必须得先注册地图才行，
“`js$.getJSON(‘./china.json’, function (data) { echarts.registerMap(‘china’
, data); var chart = echarts.init(document.getElementById(‘map’)); chart.setOp
tion({ series: [{ type: ‘map’, map: ‘china’ }] }); });“`
类似这样,你需要下载中国的地理矢量数据geojson
echarts3与echarts2区别：
1、js文件：
首先是js文件，echarts3做了很大的优化，在echarts2中，对各种控件的类库管理的较为详
细，有专门的目录结构来存放相关的js文件及相关资源，但是在引入文件的时候往往会很不
方便，可能会一不小心就漏掉一个文件，而echarts3可以根据需要在下载项下直接根据所需
的功能构架类库，使用时只要导入一个echarts.min.js文件就可以；
2、文件导入：
在echarts2中，require是作为模块化加载的入口，在使用过程中关于路径配置经常会出现
问题，特别是制作地图的时候，而在echarts3中只需要在开头加一句[html] view plain copy
script src="js/echarts.js"/script 接下去只要调用接口就可以了；
3、离线地图：
echarts2中离线地图的精确度存在很大的问题，特别是下钻到区县一级，边界线存在
模糊、交叉、空白等问题，并且经常出现飞地，与实际地图出入较大，个人认为基本没
什么用，在echarts3中对此做了很大的改进，基本解决了以上问题，市与市之间、区县
与区县之间基本上不存在衔接问题；另外，在echarts3中可以根据需要自主构建地图，
这个服务给实际使用提供了很大的便利；
4、工具栏：
在echarts3的toolbox里面把辅助线功能取消掉了，图标变小了，总体上感觉echarts3
里面的toolbox更丑了；
5、地图漫游工具：
在echarts3里面把地图漫游工具取消掉了，说实话，echarts2里面的地图漫游工具看着
还是挺不错的，虽然并没有什么用；
6、坐标系:
echarts3中，数据结构进行了统一化抽象，最常用的数据结构有：线性表、树、图。例
如，线性表以及树、图的节点列表的结构可以归一化为这样的二维数组；echarts3中另
一个重要的数据结构抽象是独立出了“坐标系”概念；事实上在 ECharts2 中已经有
grid、polar配置项存在，但是并不是按一个“坐标系”的理解去实现的；echarts3中，
支持了直角坐标系（catesian，兼容 echarts2中的grid）、极坐标系（polar）、地理
坐标系（geo）；
7、Option变动：
1）组件位置想x、y等变成了left、top,可以使用像素和百分比，适应性更强。
2）为了让结构更合理，echarts3中label被移出来和itemStyle平级。
根据官方说法，在echarts3中以前的用法也是兼容的，只是不推荐。
参考资料
echarts3与echarts2区别.CSDN[引用时间2018-1-22]
