經過 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
// 全圖默認背景 // 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: { 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: { 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: { 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: { 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: { 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: { 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 : [ { 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 : [ { 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
第一種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:[ //區域縮放 { 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: [ { 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
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 }] }); });
myChart.showLoading(); $.get('data.json').done(function (data) { myChart.hideLoading(); myChart.setOption(...); });
此文章部分搬運,部分原創,但因爲屢次修稿,搬運的地址遺失,若有侵權,麻煩聯繫個人郵箱。異步