本文目录一览：
- 1、echart移动端优化
- 2、echarts3地图显示不正常是怎么回事
- 3、ECharts3 怎么加载 china.js 地图
- 4、echar_china_cities_pypkg中含有每个市的js文件,为什么画地图只有南海诸岛
- 5、如何使用echart中获取canvas绘制到自己的canvas上去
- 6、怎么查看echarts.js版本
echart移动端优化
做移动端数据可视化产品，需要封装echarts图表做子组件，并兼容原先pc端api请求格式，还引入了地图数据，支持省份下钻。完成所有功能后，vendor大小2.49M，build速度59s，首屏加载速度和webpack打包速度都很慢。
webpack: 3.6 echarts:4.1
优化1:echart按需加载
（echart整体画图数据包700KB，比highcharts和f2要大，技术选型上可以考虑一下其他方案。）
从全局引用，优化为按需引用。引用echarts压缩过的省份地图的js数据，json数据会大一些，还需要registerMap。
优化2:路由懒加载，vue异步组件，vendor分包，首屏加载速度加快。
将路由页面拆分chunk打包，所有路由页面打包在cube中。
按需加载省市js数据，打包到province中。
封装echart子组件，打包到echarts中。
分包结果：
npm run build --report
优化3:webpack打包速度
分包后build速度41s，先用 webpack-visualizer-plugin 分析一下当前打包的状况。
生产环境：
配置CommonsChunkPlugin
加速文件搜索
配置 resolve.modules
设置 test include exclude
使用并行压缩插件 webpack-parallel-uglify-plugin
配置externals（cdn）（会增加首屏加载时长）
DllPlugin和DllReferencePlugin （会加载首屏加载时长）
使用HappyPack来加速构建
npm run build:dll
npm run build
webpack 3.x版本，add-asset-html-webpack-plugin需要2.1.3版本。
报错： TypeError: Cannot read property 'compilation' of undefined
减少webpack打包时间，省份数据还编译。
加了cache-loader做缓存，用了 only-if-changed-webpack-plugin 插件，发现全局不动不编译，有一点动都编译。还和 html-webpack-plugin 有冲突。
巨大的echarts让人头大。
一开始想让打包好的dll，可以不首屏加载，动态加载。
发现有一个scriptjs的插件。
把echarts、地图数据拆到cdn里，scriptjs按需加载。
总结：
程序猿学好英语是件很重要的事情，github看的让人头大。
小师傅好厉害，哈哈哈。
相关链接：
echarts3地图显示不正常是怎么回事
显示什么问题？我之前遇到的就是引用echarts后地图不显示的问题。
这个问题是因为echarts3的地图的geo数据以前的中国地图是内置了，现在新版本需要自己下载的china的js或json数据，引用了之后就可以显示了。
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
echar_china_cities_pypkg中含有每个市的js文件,为什么画地图只有南海诸岛
可能是没有安装好以下程序。
检查是否安装了地图需要的这几个包：echarts-countries-pypkg/echarts-china-provinces-pypkg/echarts-china-cities-pypkgecharts-china-counties-pypkg/echarts-china-misc-pypkg/echarts-united-kingdom-pypkg检查已经安装了，最后查知是因为eharts3 不再内置地图文件尴尬，因此需要我们手动引入官网的js或者json文件，显示中国地图需要china.js文件。
如何使用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.js版本
在echarts.js文件中搜索version,找到如下格式位置：
此处应该就是echarts的版本号了
