使用Echart實(shí)現(xiàn)繪制立體的柱狀圖
效果圖:
實(shí)現(xiàn)代碼:
var xData3 = ["6", "7", "8", "9","10","11"]; var data3 = [1209, 1715, 2408, 1308, 1308, 1145]; var data5 = [4000, 4000, 4000, 4000, 4000,4000]; var option = { tooltip: { trigger: "axis", show: false, }, grid: { left: 50, bottom: 25, top: 30, right: 40, }, xAxis: { data: xData3, name: "(月)", // 坐標(biāo)軸刻度相關(guān)設(shè)置 axisTick: { show: false, }, // 坐標(biāo)軸線的相關(guān)設(shè)置 axisLine: { show: true, lineStyle: { color: "#414965", }, }, // 坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置 axisLabel: { // 可以設(shè)置成 0 強(qiáng)制顯示所有標(biāo)簽 interval: 0, textStyle: { color: "#7089ba", fontSize: 12, }, margin: 15, //刻度標(biāo)簽與軸線之間的距離。 }, }, yAxis: { name: "單位: 萬m3", nameTextStyle: { color: "#fff", }, // 坐標(biāo)軸在grid區(qū)域中的分隔線 splitLine: { show: true, lineStyle: { color: "#414965", opacity: 0.3, }, }, axisTick: { show: false, }, axisLine: { show: false, }, axisLabel: { textStyle: { color: "#7089ba", fontSize: 12, }, }, }, series: [ { //三個(gè)最低下的圓片 // 系列名稱,用于tooltip的顯示,legend 的圖例篩選,在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列 name: "", type: "pictorialBar", symbolSize: [20, 15], symbolOffset: [0, 10], z: 12, // 圖形樣式 itemStyle: { opacity: 1, normal: { show: true, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#2d6ac5",//0%處的顏色 }, { offset: 1, color: "#2d6ac5",//100%處的顏色 }, ]), barBorderRadius: 0, borderWidth: 0, }, }, // 顯示最底下的圓片 data: [1, 1, 1, 1, 1,1], }, //下半截柱狀圖 { name: "2020", type: "bar", barWidth: 20, barGap: "100%", itemStyle: { //lenged文本 opacity: 0.1, normal: { show: true, color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: "#51b1f9", }, { offset: 1, color: "#2f6ef6", }, ]), barBorderRadius: 0, borderWidth: 0, }, }, label: { show: true, position: "top", distance: 10, color: "#fff", }, data: data3, }, { name: "", //頭部 type: "pictorialBar", symbolSize: [20, 15], symbolOffset: [0, -10], z: 12, symbolPosition: "end", itemStyle: { color: "#22589f", opacity: 1, }, data: data5, }, { name: "", type: "pictorialBar", // 圖形的大小 symbolSize: [20, 15], // 圖形相對(duì)于原本位置的偏移 symbolOffset: [0, -10], z: 12, itemStyle: { opacity: 1, normal: { show: true, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: "#48a4f8", }, { offset: 1, color: "#7df4f9", }, ]), barBorderRadius: 0, borderWidth: 0, }, }, // 圖形的定位位置 symbolPosition: "end", data: data3, }, { name: "2019", type: "bar", barWidth: 20, // 如果想要兩個(gè)系列的柱子重疊,可以設(shè)置 barGap 為 '-100%'。這在用柱子做背景的時(shí)候有用。 barGap: "-100%", z: 0, itemStyle: { color: "#102a6f", opacity: 0.7, }, data: data5, }, ], }; //this.Chart_init = echarts.init(this.Chart_dom.current); //this.Chart_init.setOption(option);
上面的代碼就是實(shí)現(xiàn)效果圖的配置。
到此這篇關(guān)于使用Echart實(shí)現(xiàn)繪制立體的柱狀圖的文章就介紹到這了,更多相關(guān)Echart立體柱狀圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-04-04利用JS實(shí)現(xiàn)文字的聚合動(dòng)畫效果
這篇文章主要給大家介紹了利用JS如何實(shí)現(xiàn)文字的聚合動(dòng)畫效果,實(shí)現(xiàn)的效果非常不錯(cuò),類似粒子動(dòng)畫的效果,有需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01JS實(shí)現(xiàn)簡(jiǎn)單的星期格式轉(zhuǎn)換功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的星期格式轉(zhuǎn)換功能,涉及JavaScript基于Date()對(duì)象的日期時(shí)間操作技巧,需要的朋友可以參考下2018-07-07JavaScript forEach 方法跳出循環(huán)的操作方法
這篇文章主要介紹了JavaScript forEach 方法跳出循環(huán)的操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01JS從數(shù)組中隨機(jī)獲取一個(gè)值的常用寫法
這篇文章主要介紹了JS從數(shù)組中隨機(jī)獲取一個(gè)值的常用寫法,需要的朋友可以參考下2023-07-07javascript中String對(duì)象的slice()方法分析
這篇文章主要介紹了javascript中String對(duì)象的slice()方法,以實(shí)例形式分析了slice()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12js實(shí)現(xiàn)網(wǎng)頁定位導(dǎo)航功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁定位導(dǎo)航功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03