ECharts繪制立體柱狀圖(圓柱體)詳細示例
更新時間：2023年11月23日 11:19:00 作者：開發(fā)那點事兒~
echarts實現(xiàn)平面的柱狀圖很順利,但是用戶為了美觀立體感,用到圓柱體圖,下面這篇文章主要給大家介紹了關(guān)于ECharts繪制立體柱狀圖(圓柱體)的相關(guān)資料,需要的朋友可以參考下
繪制這個立體的圓柱體柱狀圖主要由三塊組成: 底部 主體 頂部
實現(xiàn)這種效果主要是: ECharts中的 series 屬性,通過兩種不同類型的圖表組合而成.
其中里面的柱體漸變色是通過 ECharts中內(nèi)置的漸變色生成器 echarts.graphic.LinearGradient
可以用來設(shè)置漸變色.
itemStyle: { // 圖形樣式
// echarts.graphic.LinearGradient(echarts內(nèi)置的漸變色生成器)
// 4個參數(shù)用于配置漸變色的起止位置,這4個參數(shù)依次對應右 下 左 上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 這里 offset: 0 1 ,表示從下往上的漸變色
{
offset: 0, // 0%處的顏色
color: "rgba(31,155,255,1)"
},
{
offset: 1, // 100%處的顏色
color: "rgba(0,229,255,1)"
}
])
}在柱狀圖中我們也可以使用下面來實現(xiàn)漸變色:
Documentation - Apache ECharts
itemStyle: { // 圖形樣式
// color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持漸變色和紋理填充)
// 下面就是使用線性漸變
color: {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0, // 0%處的顏色
"color": "rgba(0,229,255,0.5)"
},
{
"offset": 1, // 100%處的顏色
"color": "#1F9BFF"
}]
}
}完整代碼:
<div id="fftjChart"></div>
let fftjChart = null;
onMounted(()=>{
fftjChart = echarts.init(document.getElementById('fftjChart'));
drawFftjChart();
window.addEventListener('resize', () => {
fftjChart.resize();
})
})
function drawFftjChart() {
let yData = [300, 498, 778, 382, 299, 372];
fftjChart.setOption({
grid: {
left: '5%',
right: '5%',
top: '5%',
bottom: '5%',
containLabel: true
},
tooltip: {
trigger: 'item',
formatter: function (parms) {
return parms.marker + " " + parms.name + "：" + parms.value + "萬元";
}
},
xAxis: {
type: 'category', // category(坐標軸類型)
data: ['建安區(qū)', '魏都區(qū)', '長葛市', '禹州市', '襄城縣', '鄢陵縣'],
axisTick: { // 坐標軸刻度相關(guān)配置
show: false // 是否顯示坐標軸刻度
},
axisLine: { // 坐標軸軸線相關(guān)配置
lineStyle: { // 坐標軸軸線樣式
color: 'rgba(255,255,255,0.15)' // 坐標軸軸線顏色
}
},
axisLabel: { // 坐標軸刻度標簽相關(guān)配置
color: '#ffffff',
fontSize: 14,
margin: 20
}
},
yAxis: {
type: 'value', // value(數(shù)值軸,適用于連續(xù)數(shù)據(jù))
axisTick: { // 坐標軸刻度相關(guān)配置
show: false // 是否顯示坐標軸刻度
},
axisLine: { // 坐標軸軸線相關(guān)配置
show: false // 是否顯示坐標軸軸線
},
axisLabel: { // 坐標軸刻度標簽相關(guān)配置
color: '#ffffff',
fontSize: 14
},
splitLine: { // 坐標軸在 grid 區(qū)域中的分隔線
lineStyle: { // 分割線配置
color: 'rgba(255,255,255,0.15)' // 分割線顏色
}
}
},
series: [
// 底部的橢圓形(象形柱圖):pictorialBar
{
type: "pictorialBar", // pictorialBar(象形柱圖)
label: { // 圖形上的文本標簽,可用于說明圖像的一些數(shù)據(jù)信息,比如值,名稱等
show: true, //是否顯示標簽
position: ['17', '-30'], // 標簽的位置(可以是絕對的像素值或者百分比['50%','50%',也可以是top,left等])
color: '#01E4FF',
fontSize: 14
},
symbolSize: [40, 20], // 圖形的大小用數(shù)組分別比表示寬和高,也樂意設(shè)置成10相當于[10,10]
symbolOffset: [0, 10], // 圖形相對于原本位置的偏移
z: 12, // 象形柱狀圖組件的所有圖形的 z 值.控制圖形的前后順序.z 值小的圖形會被 z 值大的圖形覆蓋.
itemStyle: { // 圖形樣式
// echarts.graphic.LinearGradient(echarts內(nèi)置的漸變色生成器)
// 4個參數(shù)用于配置漸變色的起止位置,這4個參數(shù)依次對應右 下 左 上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 這里 offset: 0 1 ,表示從下往上的漸變色
{
offset: 0, // 0%處的顏色
color: "rgba(31,155,255,1)"
},
{
offset: 1, // 100%處的顏色
color: "rgba(0,229,255,1)"
}
])
},
data: yData
},
// 中間的長方形柱狀圖(柱狀圖):bar
{
type: 'bar', // 柱狀圖
barWidth: 40, // 柱條的寬度,不設(shè)時自適應
barGap: '0%', // 柱子與柱子之間的距離
itemStyle: { // 圖形樣式
// color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持漸變色和紋理填充)
// 下面就是使用線性漸變
color: {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0, // 0%處的顏色
"color": "rgba(0,229,255,0.5)"
}, {
"offset": 1, // 100%處的顏色
"color": "#1F9BFF"
}]
}
},
data: yData
},
// 頂部的橢圓形(象形柱圖):pictorialBar
{
type: "pictorialBar",
symbolSize: [40, 20],
symbolOffset: [0, -10],
z: 12,
symbolPosition: "end",
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgba(31,155,255,1)"
},
{
offset: 1,
color: "rgba(0,229,255,1)"
}
], false)
},
data: yData
}
]
});
}總結(jié)
到此這篇關(guān)于ECharts繪制立體柱狀圖(圓柱體)的文章就介紹到這了,更多相關(guān)ECharts繪制立體柱狀圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇layui輸入框只允許輸入中文且判斷長度的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
讓JavaScript中setTimeout支持鏈式操作的方法
這篇文章主要介紹了讓JavaScript中setTimeout支持鏈式操作的方法,本文直接給出代碼實例,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了javascript表單控件實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了小程序數(shù)據(jù)緩存機制應用實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
JavaScript 實現(xiàn)普通數(shù)組數(shù)據(jù)轉(zhuǎn)化為樹形數(shù)據(jù)結(jié)構(gòu)的步驟說明
在 JavaScript 中,將普通數(shù)組數(shù)據(jù)轉(zhuǎn)化為樹形結(jié)構(gòu)的數(shù)據(jù)是一個常見的任務,特別是在處理層級數(shù)據(jù)（例如分類、組織結(jié)構(gòu)等）時,本文展示如何將一個扁平的數(shù)組轉(zhuǎn)化為樹形數(shù)據(jù)結(jié)構(gòu),感興趣的朋友一起看看吧2024-12-12
詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權(quán)的實現(xiàn)
這篇文章主要介紹了詳解微信開發(fā)中snsapi_base和snsapi_userinfo及靜默授權(quán)的實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-03-03
你知道JavaScript中的結(jié)果值是什么嗎？這篇文章主要介紹了JavaScript結(jié)果值，感興趣的小伙伴們可以參考一下2016-10-10
Javascript中克隆一個數(shù)組的實現(xiàn)代碼
這篇文章主要是對在Javascript中克隆一個數(shù)組的實現(xiàn)代碼進行了介紹。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JavaScript數(shù)據(jù)結(jié)構(gòu)yocto queue隊列鏈表代碼分析
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)yocto queue隊列鏈表代碼分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要為大家詳細介紹了Openlayers實現(xiàn)地圖全屏顯示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09