echarts堆疊柱狀圖柱子之間間隔開具體實(shí)現(xiàn)代碼
https://echarts.zhangmuchen.top/#/detail?cid=85095-9454-8a93-b33d7-999a76a3
itemStyle: { //柱子顏色 normal: { color: '#4e73de', borderColor: "#fff",// 用border做 borderWidth: 10, } },
具體:
option = { backgroundColor: '#fff', title: { text: "策略變更", top: 10, left: 15, textStyle: { color: "#35598d", fontSize: 16, fontWeight: 'normal' } }, tooltip: { trigger: 'axis', }, grid: { left: '5%', right: '6%', bottom: '3%', top: '20%', containLabel: true }, legend: { icon: 'rect', right: "3%", top: 13, itemWidth: 20, itemHeight: 10, textStyle: { color: '#555' }, data: ['新增', '修改', '刪除'] }, xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], axisLabel: { //坐標(biāo)軸字體顏色 textStyle: { color: '#9eaaba' } }, axisLine: { lineStyle: { color: "#e5e5e5" } }, axisTick: { //y軸刻度線 show: false }, splitLine: { //網(wǎng)格 show: false, } }, yAxis: { type: 'value', axisLabel: { //坐標(biāo)軸字體顏色 textStyle: { color: '#9eaaba' } }, axisLine: { show: false, }, axisTick: { //y軸刻度線 show: false }, splitLine: { //網(wǎng)格 show: true, lineStyle: { color: '#dadde4', type: "dashed" } } }, series: [{ name: '新增', type: 'bar', stack: '策略變更', barWidth: '40%', //柱子寬度 itemStyle: { //柱子顏色 normal: { color: '#4e73de', borderColor: "#fff", borderWidth: 10, } }, data: [232, 193, 240, 214, 239, 223, 202] }, { name: '修改', type: 'bar', stack: '策略變更', barWidth: '40%', //柱子寬度 itemStyle: { //柱子顏色 normal: { color: '#2dafeb', borderColor: "#fff", borderWidth: 10, } }, data: [320, 332, 301, 334, 390, 330, 320] }, { name: '刪除', type: 'bar', stack: '策略變更', barWidth: '40%', //柱子寬度 itemStyle: { //柱子顏色 normal: { color: '#35c68d', borderColor: "#fff", borderWidth: 10, } }, data: [60, 82, 51, 94, 100, 68, 74] }] };
總結(jié)
到此這篇關(guān)于echarts堆疊柱狀圖柱子之間間隔開的文章就介紹到這了,更多相關(guān)echarts堆疊柱狀圖柱子間隔開內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
addEventListener()與removeEventListener()解析
這篇文章主要為大家詳細(xì)介紹了addEventListener()與removeEventListener(),用于處理指定和刪除事件處理程序操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04理解 JavaScript Scoping & Hoisting(二)
這篇文章主要介紹了理解 JavaScript Scoping & Hoisting,盡管對于有經(jīng)驗(yàn)的程序員來說這只是小菜一碟,不過我還是順著初學(xué)者常見的思路做一番描述2015-11-11移動端Ionic App 資訊上下循環(huán)滾動的實(shí)現(xiàn)代碼(跑馬燈效果)
這篇文章主要介紹了移動端Ionic App 資訊上下循環(huán)滾動的實(shí)現(xiàn)代碼,實(shí)現(xiàn)方法需要借助jQuery庫的選擇器和動畫函數(shù),并且把jquery的操作封裝到指令里,具體指令代碼大家通過本文學(xué)習(xí)吧2017-08-08WebGL three.js學(xué)習(xí)筆記之陰影與實(shí)現(xiàn)物體的動畫效果
這篇文章主要介紹了WebGL three.js學(xué)習(xí)筆記 陰影與實(shí)現(xiàn)物體的動畫 ,需要的朋友可以參考下2019-04-04JS實(shí)現(xiàn)Cookie讀、寫、刪除操作工具類示例
這篇文章主要介紹了JS實(shí)現(xiàn)Cookie讀、寫、刪除操作工具類,涉及javascript針對cookie的讀、寫、刪除、清空等相關(guān)操作實(shí)現(xiàn)技巧,并附帶了簡單cookie操作插件供大家參考,需要的朋友可以參考下2018-08-08bootstrap網(wǎng)格系統(tǒng)使用方法解析
這篇文章主要為大家詳細(xì)解析了bootstrap網(wǎng)絡(luò)系統(tǒng)使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01