echartchina.js的简单介绍

本文目录一览：

• 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的版本号了