extjs4echarts的簡單介紹

本文目錄一覽：

• 1、用echarts網頁為什麼總是崩潰
• 2、ECharts 數據可視化按照文檔做了一個時間軸，怎麼把不同類型的圖表顯示出來？
• 3、vue使用Echarts4.X及5.0版本坑
• 4、extjs4 charts做柱狀圖怎麼設置柱子寬度
• 5、extjs結合echarts，怎麼實現數據的搜索功能

用echarts網頁為什麼總是崩潰

!DOCTYPE html

html lang=”en”

head

meta charset=”utf-8″

titleECharts/title

!–Step:1 Import a module loader, such as esl.js or require.js–

!–Step:1 引入一個模塊加載器，如esl.js或者require.js–

script src=”./js/esl.js”/script

/head

body

!–Step:2 Prepare a dom for ECharts which (must) has size (width hight)–

!–Step:2 為ECharts準備一個具備大小（寬高）的Dom–

div id=”main” style=”height:500px;border:1px solid #ccc;padding:10px;”/div

script type=”text/javascript”

// Step:3 conifg ECharts’s path, link to echarts.js from current page.

// Step:3 為模塊加載器配置echarts的路徑，從當前頁面鏈接到echarts.js，定義所需圖表路徑

require.config({

paths:{

echarts:’./build/echarts’,

‘echarts/chart/force’ : ‘./build/echarts’

}

});

// Step:4 require echarts and use it in the callback.

// Step:4 動態加載echarts然後在回調函數中開始使用，注意保持按需加載結構定義圖表路徑

require(

[

‘echarts’,

‘echarts/chart/force’

],

function(ec) {

var myChart = ec.init(document.getElementById(‘main’));

var option = {

title : {

text: ‘人物關係：喬布斯’,

subtext: ‘數據來自人立方’,

x:’right’,

y:’bottom’

},

tooltip : {

trigger: ‘item’,

formatter: ‘{a} : {b}’

},

legend: {

x: ‘left’,

data:[‘家人’,’朋友’]

},

series : [

{

type:’force’,

name : “人物關係”,

categories : [

{

name: ‘人物’,

itemStyle: {

normal: {

color : ‘#ff7f50’

}

}

},

{

name: ‘家人’,

itemStyle: {

normal: {

color : ‘#87cdfa’

}

}

},

{

name:’朋友’,

itemStyle: {

normal: {

color : ‘#9acd32’

}

}

}

],

itemStyle: {

normal: {

label: {

show: true,

textStyle: {

color: ‘#800080’

}

},

nodeStyle : {

brushType : ‘both’,

strokeColor : ‘rgba(255,215,0,0.4)’,

lineWidth : 1

}

},

emphasis: {

label: {

show: false

// textStyle: null // 默認使用全局文本樣式，詳見TEXTSTYLE

},

nodeStyle : {

//r: 30

},

linkStyle : {}

}

},

minRadius : 15,

maxRadius : 25,

density : 0.05,

attractiveness: 1.2,

linkSymbol: ‘arrow’,

nodes:[

{category:0, name: ‘喬布斯’, value : 10},

{category:1, name: ‘麗薩-喬布斯’,value : 2},

{category:1, name: ‘保羅-喬布斯’,value : 3},

{category:1, name: ‘克拉拉-喬布斯’,value : 3},

{category:1, name: ‘勞倫-鮑威爾’,value : 7},

{category:2, name: ‘史蒂夫-沃茲尼艾克’,value : 5},

{category:2, name: ‘奧巴馬’,value : 8},

{category:2, name: ‘比爾-蓋茨’,value : 9},

{category:2, name: ‘喬納森-艾夫’,value : 4},

{category:2, name: ‘蒂姆-庫克’,value : 4},

{category:2, name: ‘龍-韋恩’,value : 1},

],

links : [

{source : 1, target : 0, weight : 1},

{source : 2, target : 0, weight : 2},

{source : 3, target : 0, weight : 1},

{source : 4, target : 0, weight : 2},

{source : 5, target : 0, weight : 3},

{source : 6, target : 0, weight : 6},

{source : 7, target : 0, weight : 6},

{source : 8, target : 0, weight : 1},

{source : 9, target : 0, weight : 1},

{source : 10, target : 0, weight : 1},

{source : 3, target : 2, weight : 1},

{source : 6, target : 2, weight : 1},

{source : 6, target : 3, weight : 1},

{source : 6, target : 4, weight : 1},

{source : 6, target : 5, weight : 1},

{source : 7, target : 6, weight : 6},

{source : 7, target : 3, weight : 1},

{source : 9, target : 6, weight : 1}

]

}

]

};

var ecConfig = require(‘echarts/config’);

function focus(param) {

var data = param.data;

var links = option.series[0].links;

var nodes = option.series[0].nodes;

if (

data.source !== undefined

data.target !== undefined

) { //點擊的是邊

var sourceNode = nodes[data.source];

var targetNode = nodes[data.target];

console.log(“選中了邊 ” + sourceNode.name + ‘ – ‘ + targetNode.name + ‘ (‘ + data.weight + ‘)’);

} else { // 點擊的是點

console.log(“選中了” + data.name + ‘(‘ + data.value + ‘)’);

}

console.log(param);

myChart.on(ecConfig.EVENT.CLICK, focus)

};

myChart.setOption(option);

}

);

/script

/body

/html

ECharts 數據可視化按照文檔做了一個時間軸，怎麼把不同類型的圖表顯示出來？

最近有個朋友問了這樣一個關於ECharts圖表組件的問題，他想在一個頁面內創建多個圖表，不知道該如何做。最大的問題可能是受到了require([],function(){});的阻礙吧。

其實require無非就是一個模塊化加載借用其回調函數去創建圖表對象。

所以只要我們能夠將創建多個圖表對象的方法進行統一封裝形成一個方法放入require()的回調函數內即可。

一個頁面內創建多個ECharts圖表示例效果圖呈現

想要在一個頁面創建多個圖表對象需要準備如下幾個條件，也可以說是注意事項：

1、想要創建幾個圖表對象就需要預先設置多少個圖表容器

圖表容器作為圖表的載體，所以是必須的，且必須指定每一個容器的width和height為非零，否則會產生圖表無法呈現的結果。

div id=”main” style=”height: 400px; width: 500px; float: left; border: 1px solid #ccc;

padding: 10px;”

/div

div id=”mainLine” style=”height: 400px; width: 500px; float: left; border: 1px solid #ccc;

padding: 10px;”

/div

這裡準備了兩個容器。

2、引入相關的js文件

script src=”js/esl.js” charset=”utf-8″ type=”text/javascript”/script

script src=”js/echarts.js” charset=”utf-8″ type=”text/javascript”/script

3、編寫好創建不同圖表對象的方法

1）、創建一個柱狀圖的函數

//創建ECharts柱狀圖圖表

function DrawColumnEChart(ec) {

//— 柱狀圖 —

var myChart = ec.init(document.getElementById(‘main’));

//圖表顯示提示信息

myChart.showLoading({

text: “圖表數據正在努力加載…”

});

myChart.hideLoading();

myChart.setOption({

title: {

text: “柱狀圖”

},

tooltip: {

trigger: ‘axis’

},

legend: {

data: [‘stepday.com’, ‘tuiwosa.com’]

},

toolbox: {

show: false

},

calculable: true,

xAxis: [

{

type: ‘category’,

data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ’10月’, ’11月’, ’12月’]

}

],

yAxis: [

{

type: ‘value’,

splitArea: { show: true }

}

],

series: [

{

name: ‘stepday.com’,

type: ‘bar’, //序列展現類型為柱狀圖

data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]

},

{

name: ‘tuiwosa.com’,

type: ‘bar’,

data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

}

]

});

var ecConfig = require(‘echarts/config’);

//ECharts圖表的click事件監聽

myChart.on(“click”, function () {

alert(“你點擊我了!”);

});

}

2）、創建折線圖的函數

//創建ECharts折線圖圖表

function DrawLineEChart(ec) {

//— 折線圖 —

var myLineChart = ec.init(document.getElementById(‘mainLine’));

//圖表顯示提示信息

myLineChart.showLoading({

text: “圖表數據正在努力加載…”

});

myLineChart.hideLoading();

myLineChart.setOption({

title: {

text: “折線圖”

},

tooltip: {

trigger: ‘axis’

},

legend: {

data: [‘stepday.com’, ‘tuiwosa.com’]

},

toolbox: {

show: false

},

calculable: true,

xAxis: [

{

type: ‘category’,

data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ’10月’, ’11月’, ’12月’]

}

],

yAxis: [

{

type: ‘value’,

splitArea: { show: true }

}

],

series: [

{

name: ‘stepday.com’,

type: ‘line’, //序列展現類型為折線圖

data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]

},

{

name: ‘tuiwosa.com’,

type: ‘line’,

data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

}

]

});

var ecConfig = require(‘echarts/config’);

//ECharts圖表的click事件監聽

myLineChart.on(“click”, function () {

alert(“你點擊我了!”);

});

}

4、封裝一個統一調用創建不同圖表的函數

///將畫多個圖表的進行函數封裝

function DrawCharts(ec) {

DrawColumnEChart(ec);

DrawLineEChart(ec);

}

5、結合模塊加載函數require(requireArr,callbackFunction)創建圖表對象

require(

[

‘echarts’,

‘echarts/chart/bar’, //按需加載圖表關於bar圖的部分

‘echarts/chart/line’ //按需加載圖表關於線性圖的部分

],

DrawCharts

);

6、特別提醒

1）、創建不同圖表對象的時候需要注意方法內部關於init()初始化圖表方法的時候其id要與需要狀態當前圖表容器id保持一致。

7、完整示例代碼

!DOCTYPE html

html lang=”en”

head

titleECharts-基本線性圖/title

script src=”js/esl.js” charset=”utf-8″ type=”text/javascript”/script

script src=”js/echarts.js” charset=”utf-8″ type=”text/javascript”/script

/head

body

div id=”main” style=”height: 400px; width: 500px; float: left; border: 1px solid #ccc;

padding: 10px;”

/div

div id=”mainLine” style=”height: 400px; width: 500px; float: left; border: 1px solid #ccc;

padding: 10px;”

/div

div style=”clear: both;”

h3

STEP DAY/h3

p

我們只提供最直接、最具價值的信息，旨在：a href=”” target=”_blank”/a

/p

/div

script type=”text/javascript” language=”javascript”

// Step:4 require echarts and use it in the callback.

// Step:4 動態加載echarts然後在回調函數中開始使用，注意保持按需加載結構定義圖表路徑

require(

[

‘echarts’,

‘echarts/chart/bar’, //按需加載圖表關於bar圖的部分

‘echarts/chart/line’ //按需加載圖表關於線性圖的部分

],

DrawCharts

);

///將畫多個圖表的進行函數封裝

function DrawCharts(ec) {

DrawColumnEChart(ec);

DrawLineEChart(ec);

}

//創建ECharts柱狀圖圖表

function DrawColumnEChart(ec) {

//— 柱狀圖 —

var myChart = ec.init(document.getElementById(‘main’));

//圖表顯示提示信息

myChart.showLoading({

text: “圖表數據正在努力加載…”

});

myChart.hideLoading();

myChart.setOption({

title: {

text: “柱狀圖”

},

tooltip: {

trigger: ‘axis’

},

legend: {

data: [‘stepday.com’, ‘tuiwosa.com’]

},

toolbox: {

show: false

},

calculable: true,

xAxis: [

{

type: ‘category’,

data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ’10月’, ’11月’, ’12月’]

}

],

yAxis: [

{

type: ‘value’,

splitArea: { show: true }

}

],

series: [

{

name: ‘stepday.com’,

type: ‘bar’, //序列展現類型為柱狀圖

data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]

},

{

name: ‘tuiwosa.com’,

type: ‘bar’,

data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

}

]

});

var ecConfig = require(‘echarts/config’);

//ECharts圖表的click事件監聽

myChart.on(“click”, function () {

alert(“你點擊我了!”);

});

}

//創建ECharts折線圖圖表

function DrawLineEChart(ec) {

//— 折線圖 —

var myLineChart = ec.init(document.getElementById(‘mainLine’));

//圖表顯示提示信息

myLineChart.showLoading({

text: “圖表數據正在努力加載…”

});

myLineChart.hideLoading();

myLineChart.setOption({

title: {

text: “折線圖”

},

tooltip: {

trigger: ‘axis’

},

legend: {

data: [‘stepday.com’, ‘tuiwosa.com’]

},

toolbox: {

show: false

},

calculable: true,

xAxis: [

{

type: ‘category’,

data: [‘1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’, ‘7月’, ‘8月’, ‘9月’, ’10月’, ’11月’, ’12月’]

}

],

yAxis: [

{

type: ‘value’,

splitArea: { show: true }

}

],

series: [

{

name: ‘stepday.com’,

type: ‘line’, //序列展現類型為折線圖

data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]

},

{

name: ‘tuiwosa.com’,

type: ‘line’,

data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]

}

]

});

var ecConfig = require(‘echarts/config’);

//ECharts圖表的click事件監聽

myLineChart.on(“click”, function () {

alert(“你點擊我了!”);

});

}

/script

/body

/html

轉載

望採納！

vue使用Echarts4.X及5.0版本坑

之前的項目中一直用的是4.7.0及4.8.0版本的Echarts。引入的方式無非是全局引入和按需引入兩種

main.js中引入

按需引入新建個myecharts.js

後來，新建了個項目，由於沒有裝Echarts就重新cnpm install echarts -S

寫頁面的時候無論如何柱狀圖表也出不來。對比了下原來是版本不一樣，新項目裝上了5.0版本。

研究了半天才找見是版本的問題。怎麼解決呢。要不降級

要不改引入方法，因為之前的方法引入不可用了，echarts的源碼變了，不再支持“從’echarts/lib/echarts’導入echarts”，改用“import*as echarts from’echarts/lib/echarts’”

好了。記錄下自己的踩坑之旅。

extjs4 charts做柱狀圖怎麼設置柱子寬度

加樣式

例子

series: [

{

type: ‘column’,

axis: ‘left’,

highlight: true,

style: { width: 10 },//這裡是寬度

tips: {

trackMouse: true,

width: 140,

height: 28,

renderer: function (storeItem, item) {

this.setTitle(storeItem.get(‘name’) + ‘: ‘ + storeItem.get(‘data’) + ‘ $’);

}

},

label: {

display: ‘insideEnd’,

‘text-anchor’: ‘middle’,

field: ‘data’,

renderer: Ext.util.Format.numberRenderer(‘0’),

orientation: ‘vertical’,

color: ‘#333’

},

xField: ‘name’,

yField: ‘data’

}

]

});

extjs結合echarts，怎麼實現數據的搜索功能

ECharts提供用require作模塊化加載入口使用類似於RequireJS、SeaJS模塊化加載JS庫使用require()初始化ECharts

貼鏈接篇文章式介紹何使用模塊化加載ECharts使用模塊化ECharts提供相應初始化

首先載源碼頁面引入lib/echarts-plain-map.jsplain-map未壓縮版本

1

引入主文件直接使用init()實例化

1

2

3

4

5