Echarts 柱狀圖示例
阿新 • • 發佈:2020-10-29
把以下程式碼複製貼上到:https://gallery.echartsjs.com/editor.html 可以預覽看到效果圖。
option = { color: ['#298DFF', ' #33CA66', '#61a0a8'], backgroundColor: '#FFFFFF', barWidth: 10, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { left: '0%', icon: 'circle', textStyle: { //圖例文字的樣式 color: '#8C8C8C', fontSize: 12 }, data: ['圖例1', '圖例2'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', splitLine: { show: false // 去除網格線 }, axisLine: { lineStyle: { type: 'solid', color: '#BFBFBF', // 座標線的顏色 width: '1' } }, axisLabel: { textStyle: { color: '#595959' //座標值的顏色 }, formatter: function (params) { var newParamsName = '' var paramsNameNumber = params.length //總字數 var provideNumber = 5 //一行顯示幾個字 var rowNumber = Math.ceil(paramsNameNumber / provideNumber) if (paramsNameNumber > provideNumber) { for (var p = 0; p < rowNumber; p++) { var tempStr = '' var start = p * provideNumber var end = start + provideNumber if (p == rowNumber - 1) { tempStr = params.substring(start, paramsNameNumber) } else { tempStr = params.substring(start, end) + '\n' } newParamsName += tempStr } } else { newParamsName = params } return newParamsName } }, boundaryGap: [0, 0.01], data: ['事業部1', '事業部2', '事業部3', '事業部4', '事業部5'] }, yAxis: { type: 'value', splitLine: { // show: false // 去除網格線 lineStyle:{ color: '#E8E8E8', type: 'dashed' //設定間隔線為虛線 } }, axisTick: { show: false //小橫線 }, splitArea: { // show: true // 保留網格區域 }, axisLine: { show: false, // 去除縱向邊框線 lineStyle: { type: 'solid', color: '#BFBFBF', // 座標線的顏色 width: '1' } }, axisLabel: { textStyle: { color: '#595959' //座標值的顏色 } } }, series: [ { name: '圖例1', type: 'bar', label: { show: false, position: 'right', // 位置 color: '#298DFF', fontSize: 12, fontWeight: 'normal', // 加粗 distance: 5, // 距離 offset: [0, 1] // 偏移距離[橫向,縱向] }, // 柱子上方的數值 data: [175, 170, 330, 70, 250] }, { name: '圖例2', type: 'bar', label: { show: false, position: 'right', // 位置 color: '#33CA66', fontSize: 12, fontWeight: 'normal', // 加粗 distance: 5, // 距離 offset: [0, 2] // 偏移距離[橫向,縱向] }, // 柱子右方的數值 data: [140, 240, 270, 120, 220] } ] }