建站
咨詢
售后
建站咨詢
新聞中心
ECharts，縮寫來自Enterprise Charts，商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級(jí)的Canvas類庫ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對數(shù)據(jù)進(jìn)行挖掘、整合的能力。
只為您設(shè)計(jì)更接底氣、較有營銷力的好網(wǎng)站，將營銷策劃與網(wǎng)頁設(shè)計(jì)互相結(jié)合的專業(yè)機(jī)構(gòu)，成都營銷網(wǎng)站建設(shè)公司中較早掌握H5技術(shù)技術(shù)的機(jī)構(gòu)。一個(gè)好的高端網(wǎng)站設(shè)計(jì)，不能只是一張名片，茫茫網(wǎng)海，想要快速吸引到您客戶的眼球，必須全方位的展現(xiàn)出企業(yè)突出的優(yōu)勢，以求達(dá)到主動(dòng)營銷的效果，最終促成成交！
dataZoom
dataZoom 組件可以實(shí)現(xiàn)通過鼠標(biāo)滾輪滾動(dòng)，放大縮小圖表的功能。 默認(rèn)情況下 dataZoom 控制 x 軸，即對 x 軸進(jìn)行數(shù)據(jù)窗口縮放和數(shù)據(jù)窗口平移操作。 實(shí)例
option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
dataZoom: [
{ // 這個(gè)dataZoom組件，默認(rèn)控制x軸。
type: 'slider', // 這個(gè) dataZoom 組件是 slider 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置。
}
],
series: [
{
type: 'scatter', // 這是個(gè)『散點(diǎn)圖』
itemStyle: {
opacity: 0.8
},
symbolSize: function (val) {
return val[2] * 40;
},
data: [["14.616","7.241","0.896"],["3.958","5.701","0.955"],["2.768","8.971","0.669"],["9.051","9.710","0.171"],["14.046","4.182","0.536"],["12.295","1.429","0.962"],["4.417","8.167","0.113"],["0.492","4.771","0.785"],["7.632","2.605","0.645"],["14.242","5.042","0.368"]]
}
]
}
嘗試一下 ? 上面的實(shí)例只能拖動(dòng) dataZoom 組件來縮小或放大圖表。如果想在坐標(biāo)系內(nèi)進(jìn)行拖動(dòng)，以及用鼠標(biāo)滾輪（或移動(dòng)觸屏上的兩指滑動(dòng)）進(jìn)行縮放，那么需要 再再加上一個(gè) inside 型的 dataZoom 組件。 在以上實(shí)例基礎(chǔ)上我們再增加 type: ‘inside’ 的配置信息： 實(shí)例
option = {
...,
dataZoom: [
{ // 這個(gè)dataZoom組件，默認(rèn)控制x軸。
type: 'slider', // 這個(gè) dataZoom 組件是 slider 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置。
},
{ // 這個(gè)dataZoom組件，也控制x軸。
type: 'inside', // 這個(gè) dataZoom 組件是 inside 型 dataZoom 組件
start: 10, // 左邊在 10% 的位置。
end: 60 // 右邊在 60% 的位置。
}
],
...
}
嘗試一下 ? 當(dāng)然我們可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個(gè)或哪些數(shù)軸。 實(shí)例
var data1 = [];
var data2 = [];
var data3 = [];
var random = function (max) {
return (Math.random() * max).toFixed(3);
};
for (var i = 0; i false,
legend: {
data: ['scatter', 'scatter2', 'scatter3']
},
tooltip: {
},
xAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
yAxis: {
type: 'value',
min: 'dataMin',
max: 'dataMax',
splitLine: {
show: true
}
},
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
left: '93%',
start: 29,
end: 36
},
{
type: 'inside',
xAxisIndex: [0],
start: 1,
end: 35
},
{
type: 'inside',
yAxisIndex: [0],
start: 29,
end: 36
}
],
series: [
{
name: 'scatter',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data1
},
{
name: 'scatter2',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data2
},
{
name: 'scatter3',
type: 'scatter',
itemStyle: {
normal: {
opacity: 0.8,
}
},
symbolSize: function (val) {
return val[2] * 40;
},
data: data3
}
]
}
嘗試一下 ?
當(dāng)前文章：簡單介紹一下ECharts數(shù)據(jù)圖表
網(wǎng)頁地址：http://www.dlmjj.cn/article/ccscjie.html
