包含echartchina.js的詞條

本文目錄一覽：

• 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]