Echars講解分析
安裝與引入
經過 npm 安裝 EChartsjavascript
經過命令npm install echarts --save安裝獲得ECharts 和 zrender，存放在 node_modules 目錄，直接在項目中運行代碼 require('echarts')獲得 Echarts。css
var echarts = require('echarts');
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 繪製圖表
myChart.setOption({
title: { text: 'ECharts 入門示例' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
也能夠按需引入java
Echarts元素
全局背景
// 全圖默認背景
// backgroundColor: 'rgba(0,0,0,0)',
// 默認色板
color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
'#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
'#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
'#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
title
title: {
x: 'left', // 水平安放位置，默認爲左對齊，可選爲：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x座標，單位px）
y: 'top', // 垂直安放位置，默認爲全圖頂端，可選爲：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y座標，單位px）
//textAlign: null // 水平對齊方式，默認根據x設置自動調整
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 標題邊框顏色
borderWidth: 0, // 標題邊框線寬，單位px，默認爲0（無邊框）
padding: 5, // 標題內邊距，單位px，默認各方向內邊距爲5，
// 接受數組分別設定上右下左邊距，同css
itemGap: 10, // 主副標題縱向間隔，單位px，默認爲10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主標題文字顏色
},
subtextStyle: {
color: '#aaa' // 副標題文字顏色
}
}
legend
legend: {
orient: 'horizontal', // 佈局方式，默認爲水平佈局，可選爲：
// 'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置，默認爲全圖居中，可選爲：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x座標，單位px）
y: 'top', // 垂直安放位置，默認爲全圖頂端，可選爲：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y座標，單位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 圖例邊框顏色
borderWidth: 0, // 圖例邊框線寬，單位px，默認爲0（無邊框）
padding: 5, // 圖例內邊距，單位px，默認各方向內邊距爲5，
// 接受數組分別設定上右下左邊距，同css
itemGap: 10, // 各個item之間的間隔，單位px，默認爲10，
// 橫向佈局時爲水平間隔，縱向佈局時爲縱向間隔
itemWidth: 20, // 圖例圖形寬度
itemHeight: 14, // 圖例圖形高度
textStyle: {
color: '#333' // 圖例文字顏色
}
}
grid
grid: {
x: 80,
y: 60,
x2: 80,
y2: 60,
// width: {totalWidth} - x - x2,
// height: {totalHeight} - y - y2,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
}
dataRange（值域）
dataRange: {
orient: 'vertical', // 佈局方式，默認爲垂直佈局，可選爲：
// 'horizontal' ¦ 'vertical'
x: 'left', // 水平安放位置，默認爲全圖左對齊，可選爲：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x座標，單位px）
y: 'bottom', // 垂直安放位置，默認爲全圖底部，可選爲：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y座標，單位px）
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 值域邊框顏色
borderWidth: 0, // 值域邊框線寬，單位px，默認爲0（無邊框）
padding: 5, // 值域內邊距，單位px，默認各方向內邊距爲5，
// 接受數組分別設定上右下左邊距，同css
itemGap: 10, // 各個item之間的間隔，單位px，默認爲10，
// 橫向佈局時爲水平間隔，縱向佈局時爲縱向間隔
itemWidth: 20, // 值域圖形寬度，線性漸變水平佈局寬度爲該值 * 10
itemHeight: 14, // 值域圖形高度，線性漸變垂直佈局高度爲該值 * 10
splitNumber: 5, // 分割段數，默認爲5，爲0時爲線性漸變
color:['#1e90ff','#f0ffff'],//顏色
//text:['高','低'], // 文本，默認爲數值文本
textStyle: {
color: '#333' // 值域文字顏色
}
}
toolbox（工具欄）
toolbox: {
orient: 'horizontal', // 佈局方式，默認爲水平佈局，可選爲：
// 'horizontal' ¦ 'vertical'
x: 'right', // 水平安放位置，默認爲全圖右對齊，可選爲：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x座標，單位px）
y: 'top', // 垂直安放位置，默認爲全圖頂端，可選爲：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y座標，單位px）
color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景顏色
borderColor: '#ccc', // 工具箱邊框顏色
borderWidth: 0, // 工具箱邊框線寬，單位px，默認爲0（無邊框）
padding: 5, // 工具箱內邊距，單位px，默認各方向內邊距爲5，
// 接受數組分別設定上右下左邊距，同css
itemGap: 10, // 各個item之間的間隔，單位px，默認爲10，
// 橫向佈局時爲水平間隔，縱向佈局時爲縱向間隔
itemSize: 16, // 工具箱圖形寬度
featureImageIcon : {}, // 自定義圖片icon
featureTitle : {
mark : '輔助線開關',
markUndo : '刪除輔助線',
markClear : '清空輔助線',
dataZoom : '區域縮放',
dataZoomReset : '區域縮放後退',
dataView : '數據視圖',
lineChart : '折線圖切換',
barChart : '柱形圖切換',
restore : '還原',
saveAsImage : '保存爲圖片'
}
}
tooltip（提示框）
tooltip: {
trigger: 'item', // 觸發類型，默認數據觸發，見下圖，可選爲：'item' ¦ 'axis'
showDelay: 20, // 顯示延遲，添加顯示延遲能夠避免頻繁切換，單位ms
hideDelay: 100, // 隱藏延遲，單位ms
transitionDuration : 0.4, // 動畫變換時間，單位s
backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景顏色，默認爲透明度爲0.7的黑色
borderColor: '#333', // 提示邊框顏色
borderRadius: 4, // 提示邊框圓角，單位px，默認爲4
borderWidth: 0, // 提示邊框線寬，單位px，默認爲0（無邊框）
padding: 5, // 提示內邊距，單位px，默認各方向內邊距爲5，
// 接受數組分別設定上右下左邊距，同css
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'line', // 默認爲直線，可選爲：'line' | 'shadow'
lineStyle : { // 直線指示器樣式設置
color: '#48b',
width: 2,
type: 'solid'
},
shadowStyle : { // 陰影指示器樣式設置
width: 'auto', // 陰影大小
color: 'rgba(150,150,150,0.3)' // 陰影顏色
}
},
textStyle: {
color: '#fff'
}
}
xAxis
xAxis : [
{
type : 'category',
axisLine: {
symbol: ['none', 'arrow'], //設置x軸或y軸箭頭
lineStyle: {
color: '#B5B5B5',
width: 2, //這裏是爲了突出顯示加上的
}
},
//刻度是向內仍是向外
axisTick:{
inside:true,
length:1,
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color:'#FCFCFC',//網格顏色
}
},
axisLabel:{ //調整x軸的lable
//interval:0, //按x軸的長度顯示的刻度的個數 例如：原本顯示20個刻度，由於x軸端只顯示了10個，
rotate:0, //實現x軸的刻度的標識實現旋轉，
textStyle:{
fontSize:10,// 讓字體變大
color:"#B5B5B5"
}
},
name: "(日期)",
nameTextStyle: {
color: "#B5B5B5",
verticalAlign: "bottom",
fontSize:'10',
padding:[35,50,10,-2] //設置x軸的標題的位置
},
boundaryGap : false,
data:['2016-01','2016-07','2016-08','2016-09']
// data : ['週一','週二','週三','週四','週五','週六','週日']
}
]
yAxis
yAxis : [
{
type : 'VALUE',
splitNumber:2,//因此將 splitNumber設成3
axisLine: {
symbol: ['none', 'arrow'],
lineStyle: {
color: '#B5B5B5',
width: 2, //這裏是爲了突出顯示加上的
}
},
splitLine: {
show: true,
lineStyle: {
type: 'solid',//
color:'#FCFCFC'///網格顏色
}
},
//刻度是向內仍是向外
axisTick:{
inside:true,
length:1,
},
axisLabel:{ //調整x軸的lable
textStyle:{
fontSize:10,// 讓字體變大
color:"#B5B5B5"
}
},
name: "(人數)",
nameLocation:"end", //實現標題顯示的位置
nameTextStyle:{
color: "#B5B5B5",
fontSize:10,
// verticalAlign: 'top',
// align:"left",
padding:[50,0,-6,0]
},
//axisLine : {onZero: false},
/* boundaryGap : false,
axisLabel : {
formatter: '{value} '
},
data:['AA-','AA','AA+']*/
}
]
相似溫溼度的兩個y軸能夠採用如下代碼node
yAxis: [ //Y軸（這裏我設置了兩個Y軸，左右各一個）
{
//第一個（左邊）Y軸，yAxisIndex爲0
type: 'value',
name: '溫度',
max: 120,
min: 0,
axisLabel: {
formatter: '{value} ℃' //控制輸出格式
},
splitLine: {
show: false
}
},
{
//第二個（右邊）Y軸，yAxisIndex爲1
type: 'value',
name: '溼度',
max: 100,
min: 0,
scale: true,
axisLabel: {
formatter: '{value} %'
},
splitLine: {
show: false
}
}
]
在series屬性中插入如下的代碼yAxisIndex: '1'便可準確表示。npm
timeLine（時間軸）
第一種json
timeline:{
axisType :'category',
orient:'vertical',
autoPlay :true,
playInterval :15000,
right: '5',
left:'320',
top:'0',
bottom:'0',
label:{
interval:0,
formatter: function (item) {
var str = item.split("-")[1];
return parseInt(str)+'月';
}
},
data:monthArr,
currentIndex : index,
controlStyle:{
showPlayBtn :false
}
}
第二種數組
timeline: {
show: true,
axisType: 'category',
autoPlay: true,
currentIndex: 5,
playInterval: 5000,
symbolSize: 12,
checkpointStyle: {
symbol: 'circle',
symbolSize: 18,
color: '#00d3e7',
borderWidth: 2,
borderColor: "#00d3e7"
}
dataZoom組件
dataZoom:[ //區域縮放
{
id: 'dataZoomX',
show:true, //是否顯示 組件。若是設置爲 false，不會顯示，可是數據過濾的功能還存在。
backgroundColor:"rgba(47,69,84,0)", //組件的背景顏色
type: 'slider', //slider表示有滑動塊的，inside表示內置的
dataBackground:{ //數據陰影的樣式。
lineStyle:mylineStyle, //陰影的線條樣式
areaStyle:myareaStyle, //陰影的填充樣式
},
fillerColor:"rgba(167,183,204,0.4)", //選中範圍的填充顏色。
borderColor:"#ddd", //邊框顏色。
filterMode: 'filter', //'filter'：當前數據窗口外的數據，被 過濾掉。即 會 影響其餘軸的數據範圍。每一個數據項，只要有一個維度在數據窗口外，整個數據項就會被過濾掉。
//'weakFilter'：當前數據窗口外的數據，被 過濾掉。即 會 影響其餘軸的數據範圍。每一個數據項，只有當所有維度都在數據窗口同側外部，整個數據項纔會被過濾掉。
//'empty'：當前數據窗口外的數據，被 設置爲空。即 不會 影響其餘軸的數據範圍。
//'none': 不過濾數據，只改變數軸範圍。
xAxisIndex:0, //設置 dataZoom-inside 組件控制的 x軸,能夠用數組表示多個軸
yAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 y軸,能夠用數組表示多個軸
radiusAxisIndex:3, //設置 dataZoom-inside 組件控制的 radius 軸,能夠用數組表示多個軸
angleAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 angle 軸,能夠用數組表示多個軸
start: 30, //數據窗口範圍的起始百分比,表示30%
end: 70, //數據窗口範圍的結束百分比,表示70%
startValue:10, //數據窗口範圍的起始數值
endValue:100, //數據窗口範圍的結束數值。
orient:"horizontal", //佈局方式是橫仍是豎。不只是佈局方式，對於直角座標系而言，也決定了，缺省狀況控制橫向數軸仍是縱向數軸。'horizontal'：水平。'vertical'：豎直。
zoomLock:false, //是否鎖定選擇區域（或叫作數據窗口）的大小。若是設置爲 true
則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。
throttle:100, //設置觸發視圖刷新的頻率。單位爲毫秒（ms）。
zoomOnMouseWheel:true, //如何觸發縮放。可選值爲：true：表示不按任何功能鍵，鼠標滾輪能觸發縮放。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標滾輪能觸發縮放。'ctrl'：表示按住 ctrl 和鼠標滾輪能觸發縮放。'alt'：表示按住 alt 和鼠標滾輪能觸發縮放。
moveOnMouseMove:true, //如何觸發數據窗口平移。true：表示不按任何功能鍵，鼠標移動能觸發數據窗口平移。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標移動能觸發數據窗口平移。'ctrl'：表示按住 ctrl 和鼠標移動能觸發數據窗口平移。'alt'：表示按住 alt 和鼠標移動能觸發數據窗口平移。
left:"center", //組件離容器左側的距離,'left', 'center', 'right','20%'
top:"top", //組件離容器上側的距離,'top', 'middle', 'bottom','20%'
right:"auto", //組件離容器右側的距離,'20%'
bottom:"auto", //組件離容器下側的距離,'20%'
},
{
id: 'dataZoomY',
type: 'inside',
filterMode: 'empty',
disabled:false, //是否中止組件的功能。
xAxisIndex:0, //設置 dataZoom-inside 組件控制的 x軸,能夠用數組表示多個軸
yAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 y軸,能夠用數組表示多個軸
radiusAxisIndex:3, //設置 dataZoom-inside 組件控制的 radius 軸,能夠用數組表示多個軸
angleAxisIndex:[0,2], //設置 dataZoom-inside 組件控制的 angle 軸,能夠用數組表示多個軸
start: 30, //數據窗口範圍的起始百分比,表示30%
end: 70, //數據窗口範圍的結束百分比,表示70%
startValue:10, //數據窗口範圍的起始數值
endValue:100, //數據窗口範圍的結束數值。
orient:"horizontal", //佈局方式是橫仍是豎。不只是佈局方式，對於直角座標系而言，也決定了，缺省狀況控制橫向數軸仍是縱向數軸。'horizontal'：水平。'vertical'：豎直。
zoomLock:false, //是否鎖定選擇區域（或叫作數據窗口）的大小。若是設置爲 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。
throttle:100, //設置觸發視圖刷新的頻率。單位爲毫秒（ms）。
zoomOnMouseWheel:true, //如何觸發縮放。可選值爲：true：表示不按任何功能鍵，鼠標滾輪能觸發縮放。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標滾輪能觸發縮放。'ctrl'：表示按住 ctrl 和鼠標滾輪能觸發縮放。'alt'：表示按住 alt 和鼠標滾輪能觸發縮放。
moveOnMouseMove:true, //如何觸發數據窗口平移。true：表示不按任何功能鍵，鼠標移動能觸發數據窗口平移。false：表示鼠標滾輪不能觸發縮放。'shift'：表示按住 shift 和鼠標移動能觸發數據窗口平移。'ctrl'：表示按住 ctrl 和鼠標移動能觸發數據窗口平移。'alt'：表示按住 alt 和鼠標移動能觸發數據窗口平移。
}
]
series
series: [
{
name: '溫度（℃）',
type: 'line', //折線圖表示（生成溫度曲線）
symbol: 'emptycircle', //設置折線圖中表示每一個座標點的符號；emptycircle：空心圓；emptyrect：空心矩形；circle：實心圓；emptydiamond：菱形
stack: 總量, //寫同樣會有累加的效果
areaStyle: {},
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}//面積的陰影
data: [110, 20, 56, 36, 96, 58, 25], //數據值經過Ajax動態獲取
},
{
name: '溼度（%）',
yAxisIndex: '1', //定位到第二個座標軸
type: 'line',
symbol: 'emptyrect',
data: [45, 63, 10, 62, 35, 88, 66]
},]
Echarts 設置
異步數據加載
第一種echarts
var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
myChart.setOption({
title: {
text: '異步數據加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
});
第二種dom
var myChart = echarts.init(document.getElementById('main'));
// 顯示標題，圖例和空的座標軸
myChart.setOption({
title: {
text: '異步數據加載示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
});
// 異步加載數據
$.get('data.json').done(function (data) {
// 填入數據
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根據名字對應到相應的系列
name: '銷量',
data: data.data
}]
});
});
loading動畫
myChart.showLoading();
$.get('data.json').done(function (data) {
myChart.hideLoading();
myChart.setOption(...);
});
此文章部分搬運，部分原創，但因爲屢次修稿，搬運的地址遺失，若有侵權，麻煩聯繫個人郵箱。異步
相關文章
- 1. echars
- 2. AQS源碼分析講解
- 3. SWOT分析法講解
- 4. echars 樹 圖標
- 5. 簡單echars Demo
- 6. EChars 餅狀圖
- 7. 主成分分析(PCA)詳細講解
- 8. Echars示例總結
- 9. Echars——碼錶指針
- 10. echars顏色修改
- 更多相關文章...
- • XML DOM 解析器 - XML DOM 教程
- • TCP報文格式解析 - TCP/IP教程
- • 常用的分佈式事務解決方案
- • 爲了進字節跳動，我精選了29道Java經典算法題，帶詳細講解
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. echars
- 2. AQS源碼分析講解
- 3. SWOT分析法講解
- 4. echars 樹 圖標
- 5. 簡單echars Demo
- 6. EChars 餅狀圖
- 7. 主成分分析(PCA)詳細講解
- 8. Echars示例總結
- 9. Echars——碼錶指針
- 10. echars顏色修改