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