Echarts 柱狀圖配置詳解
柱狀圖比如做成如下所示圖：
所有的基本配置如下：
// 指定圖表的配置項和資料 var option = { // ---- 標題 ----- title: { text: '主標題', textStyle: { color: 'red' }, subtext: '副標題', subtextStyle: { color: 'blue' }, padding: [0, 0, 10, 100] // 位置 }, // ---- legend ---- legend: { type: 'plain', // 圖列型別，預設為 'plain' top: '1%', // 圖列相對容器的位置 top\bottom\left\right selected: { // '銷量': true // 圖列選擇，圖形載入出來會顯示選擇的圖列，預設為true }, textStyle: { // 圖列內容樣式 color: '#fff', // 字型顏色 backgroundColor: 'black' // 字型背景色 }, tooltip: { // 圖列提示框，預設不顯示 show: true, color: 'red' }, data: [ // 圖列內容 { name: '銷量', icon: 'circle', textStyle: { color: 'red', // 單獨設定某一個圖列的顏色 backgroundColor: '#fff' // 單獨設定某一個圖列的字型背景色 } } ] }, // --- 提示框 ---- tooltip: { show: true, // 是否顯示提示框，預設為true trigger: 'item', // 資料項圖形觸發 axisPointer: { // 指示樣式 type: 'shadow', axis: 'auto' }, padding: 5, textStyle: { // 提示框內容的樣式 color: '#fff' } }, // ---- gird區域 --- gird: { show: false, // 是否顯示直角座標系網格 top: 80, // 相對位置 top\bottom\left\right containLabel: false, // gird 區域是否包含座標軸的刻度標籤 tooltip: { show: true, trigger: 'item', // 觸發型別 textStyle: { color: '#666' } } }, // ------ X軸 ------ xAxis: { show: true, // 是否顯示 position: 'bottom', // x軸的位置 offset: 0, // x軸相對於預設位置的偏移 type: 'category', // 軸型別， 預設為 'category' name: '月份', // 軸名稱 nameLocation: 'end', // 軸名稱相對位置 nameTextStyle: { // 座標軸名稱樣式 color: 'red', padding: [5, 0, 0, -5] }, nameGap: 15, // 座標軸名稱與軸線之間的距離 nameRotate: 0, // 座標軸名字旋轉 axisLine: { // 座標軸 軸線 show: true, // 是否顯示 symbol: ['none', 'arrow'], // 是否顯示軸線箭頭 symbolSize: [8, 8], // 箭頭大小 symbolOffset: [0, 7], // 箭頭位置 // ------ 線 --------- lineStyle: { color: 'blue', width: 1, type: 'solid' } }, axisTick: { // 座標軸 刻度 show: true, // 是否顯示 inside: true, // 是否朝內 length: 3, // 長度 lineStyle: { // 預設取軸線的樣式 color: 'red', width: 1, type: 'solid' } }, axisLabel: { // 座標軸標籤 show: true, // 是否顯示 inside: false, // 是否朝內 rotate: 0, // 旋轉角度 margin: 5, // 刻度標籤與軸線之間的距離 color: 'red' // 預設取軸線的顏色 }, splitLine: { // gird區域中的分割線 show: false, // 是否顯示 lineStyle: { // color: 'red', // width: 1, // type: 'solid' } }, splitArea: { // 網格區域 show: false // 是否顯示，預設為false }, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, // ------ y軸 ---------- yAxis: { show: true, // 是否顯示 position: 'left', // y軸位置 offset: 0, // y軸相對於預設位置的偏移 type: 'value', // 軸型別，預設為 ‘category’ name: '銷量', // 軸名稱 nameLocation: 'end', // 軸名稱相對位置value nameTextStyle: { // 座標軸名稱樣式 color: '#fff', padding: [5, 0, 0, 5] // 座標軸名稱相對位置 }, nameGap: 15, // 座標軸名稱與軸線之間的距離 nameRotate: 270, // 座標軸名字旋轉 axisLine: { // 座標軸 軸線 show: true, // 是否顯示 // ----- 箭頭 ----- symbol: ['none', 'arrow'], // 是否顯示軸線箭頭 symbolSize: [8, 8], // 箭頭大小 symbolOffset: [0, 7], // 箭頭位置 // ----- 線 ------- lineStyle: { color: 'blue', width: 1, type: 'solid' } }, axisTick: { // 座標軸的刻度 show: true, // 是否顯示 inside: true, // 是否朝內 length: 3, // 長度 lineStyle: { color: 'red', // 預設取軸線的顏色 width: 1, type: 'solid' } }, axisLabel: { // 座標軸的標籤 show: true, // 是否顯示 inside: false, // 是否朝內 rotate: 0, // 旋轉角度 margin: 8, // 刻度標籤與軸線之間的距離 color: 'red', // 預設軸線的顏色 }, splitLine: { // gird 區域中的分割線 show: true, // 是否顯示 lineStyle: { color: '#666', width: 1, type: 'dashed' } }, splitArea: { // 網格區域 show: false // 是否顯示，預設為false } }, // ------- 內容資料 ------- series: [ { name: '銷量', // 序列名稱 type: 'bar', // 型別 legendHoverLink: true, // 是否啟用圖列 hover 時的聯動高亮 label: { // 圖形上的文字標籤 show: false, position: 'insideTop', // 相對位置 rotate: 0, // 旋轉角度 color: '#eee' }, itemStyle: { // 圖形的形狀 color: 'blue', barBorderRadius: [18, 18, 0 ,0] }, barWidth: 20, // 柱形的寬度 barCategoryGap: '20%', // 柱形的間距 data: [3000, 4000, 4200, 4500, 6000, 5600, 4500, 5020, 4500, 5400, 4300, 1200] } ] };
html程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="./echarts4.x.js"></script> <script type="text/javascript" src="./zhuzhangtu.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;margin: 0 auto"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); </script> </body> </html>
2. 如何做摺疊柱狀圖？
比如如下效果的：
所有的基本配置如下：
// 指定圖表的配置項和資料 option = { title: { text: "", textStyle: { color: "#436EEE", fontSize: 17 } }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data:[ { name: '政策法規', icon: 'circle', textStyle: { color: 'red', // 單獨設定某一個圖列的顏色 backgroundColor: '#fff' // 單獨設定某一個圖列的字型背景色 } }, { name: '經辦規程', icon: 'circle', textStyle: { color: 'red', // 單獨設定某一個圖列的顏色 backgroundColor: '#fff' // 單獨設定某一個圖列的字型背景色 } }, { name: '業務場景模擬', icon: 'circle', textStyle: { color: 'red', // 單獨設定某一個圖列的顏色 backgroundColor: '#fff' // 單獨設定某一個圖列的字型背景色 } }, { name: '常見問題', icon: 'circle', textStyle: { color: 'red', // 單獨設定某一個圖列的顏色 backgroundColor: '#fff' // 單獨設定某一個圖列的字型背景色 } } ] }, //x軸顯示 xAxis: { data: [20180611, 20180612, 20180613, 20180614, 20180615, 20180616, 20180617], show: true, // 是否顯示 position: 'bottom', // x軸的位置 offset: 0, // x軸相對於預設位置的偏移 type: 'category', // 軸型別， 預設為 'category' name: '月份', // 軸名稱 nameLocation: 'end', // 軸名稱相對位置 nameTextStyle: { // 座標軸名稱樣式 color: 'red', padding: [5, 0, 0, -5] }, nameGap: 15, // 座標軸名稱與軸線之間的距離 nameRotate: 0, // 座標軸名字旋轉 axisLine: { // 座標軸 軸線 show: true, // 是否顯示 symbol: ['none', 'arrow'], // 是否顯示軸線箭頭 symbolSize: [8, 8], // 箭頭大小 symbolOffset: [0, 7], // 箭頭位置 // ------ 線 --------- lineStyle: { color: 'blue', width: 1, type: 'solid' } }, axisTick: { // 座標軸 刻度 show: true, // 是否顯示 inside: true, // 是否朝內 length: 3, // 長度 lineStyle: { // 預設取軸線的樣式 color: 'red', width: 1, type: 'solid' } }, axisLabel: { // 座標軸標籤 show: true, // 是否顯示 inside: false, // 是否朝內 rotate: 0, // 旋轉角度 margin: 5, // 刻度標籤與軸線之間的距離 color: 'red' // 預設取軸線的顏色 }, splitLine: { // gird區域中的分割線 show: false, // 是否顯示 lineStyle: { // color: 'red', // width: 1, // type: 'solid' } }, splitArea: { // 網格區域 show: false // 是否顯示，預設為false }, // show: false }, // ------ y軸 ---------- yAxis: { show: true, // 是否顯示 position: 'left', // y軸位置 offset: 0, // y軸相對於預設位置的偏移 type: 'value', // 軸型別，預設為 ‘category’ name: '銷量', // 軸名稱 nameLocation: 'end', // 軸名稱相對位置value nameTextStyle: { // 座標軸名稱樣式 color: '#fff', padding: [5, 0, 0, 5] // 座標軸名稱相對位置 }, nameGap: 15, // 座標軸名稱與軸線之間的距離 nameRotate: 270, // 座標軸名字旋轉 axisLine: { // 座標軸 軸線 show: true, // 是否顯示 // ----- 箭頭 ----- symbol: ['none', 'arrow'], // 是否顯示軸線箭頭 symbolSize: [8, 8], // 箭頭大小 symbolOffset: [0, 7], // 箭頭位置 // ----- 線 ------- lineStyle: { color: 'blue', width: 1, type: 'solid' } }, axisTick: { // 座標軸的刻度 show: true, // 是否顯示 inside: true, // 是否朝內 length: 3, // 長度 lineStyle: { color: 'red', // 預設取軸線的顏色 width: 1, type: 'solid' } }, axisLabel: { // 座標軸的標籤 show: true, // 是否顯示 inside: false, // 是否朝內 rotate: 0, // 旋轉角度 margin: 8, // 刻度標籤與軸線之間的距離 color: 'red', // 預設軸線的顏色 }, splitLine: { // gird 區域中的分割線 show: true, // 是否顯示 lineStyle: { color: '#666', width: 1, type: 'dashed' } }, splitArea: { // 網格區域 show: false // 是否顯示，預設為false } }, tooltip: { position: ['50%', '50%'], padding: [5, 10] }, grid: { left: '0%' }, series: [ { name: "政策法規", type: "bar", stack: "業務",//摺疊顯示 data: ["87.54", "88.54", "90", "91", "92", '95', '100'], barWidth : 25, //顯示顏色 itemStyle:{ normal:{color:"blue"} }, label: { // 圖形上的文字標籤 show: false, position: 'insideTop', // 相對位置 rotate: 0, // 旋轉角度 color: '#eee' } }, { name: "經辦規程", type: "bar", stack: "業務", data: ["87.54", "88.54", "90", "91", "92", '95', '100'], barWidth : 25, label: { // 圖形上的文字標籤 show: false, position: 'insideTop', // 相對位置 rotate: 0, // 旋轉角度 color: '#eee' }, itemStyle:{ normal:{color:"#FF8849"} } }, { name: "業務場景模擬", type: "bar", stack: "業務", data: ["87.54", "88.54", "90", "91", "92", '95', '100'], barWidth : 25, label: { // 圖形上的文字標籤 show: false, position: 'insideTop', // 相對位置 rotate: 0, // 旋轉角度 color: '#eee' }, itemStyle:{ normal:{color:"#3FBB49"} } }, { name: "常見問題", type: "bar", stack: "業務", data: ["87.54", "88.54", "90", "91", "92", '95', '100'], barWidth : 25, label: { // 圖形上的文字標籤 show: false, position: 'insideTop', // 相對位置 rotate: 0, // 旋轉角度 color: '#eee' }, itemStyle:{ normal:{color:"#56C4A5"} }, barCateGoryGap: 15 } ] };
HTML程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="./echarts4.x.js"></script> <script type="text/javascript" src="./histogram.js"></script> </head> <body> <!-- 為ECharts準備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;margin: 0 auto"></div> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 var myChart = echarts.init(document.getElementById('main')); // 使用剛指定的配置項和資料顯示圖表。 myChart.setOption(option); myChart.on('click', function (params) { // 控制檯列印資料的名稱 console.log(params); }); </script> </body> </html>