Echarts立體柱狀圖
echarts繪製漂亮的立體柱狀圖（超詳細）
為了做一個漂亮的立體柱狀圖，幾乎吧echarts所有的柱狀圖都看了一遍，一遍遍的改，終於繪製出我想要的效果，下面是程式碼：
HTML：
<div class="content bgBox">
<div class="firstTitle">
<p class="titleName">購買力最強</p>
</div>
<div id="buyTop" style="width: 100%;height:90%;"></div>
</div>
JS：
// 購買力最強
var buyTop = echarts.init(document.getElementById('buyTop')); //圖表容器
function fetchBuytop() { //定一個方法
$.ajax({ //傳送ajax請求資料
type: "POST",
url: url,
success: function (e) {
var areaData = e.data.area; //橫座標值
var payPersonNum = e.data.payPersonNum; //柱狀圖的值
const VALUE1 = [{ //每個柱子的顏色（可自行改變顏色）
value: payPersonNum[0],
itemStyle: {
color: 'rgba(0,137,255,1.0)'
}
},
{
value: payPersonNum[1],
itemStyle: {
color: 'rgba(0,25,255,1.0)'
}
},
{
value: payPersonNum[2],
itemStyle: {
color: 'rgba(115,5,255,1.0)'
}
},
{
value: payPersonNum[3],
itemStyle: {
color: 'rgba(215,1,255,1.0)'
}
},
{
value: payPersonNum[4],
itemStyle: {
color: 'rgba(182,105,86,1.0)'
}
}
]
const VALUE2 = [{ //最高值的柱子顏色 就是你所看到的透明那部分
value: Math.max.apply(null, payPersonNum), //這個value是柱狀圖的值裡的最大值
itemStyle: {
color: 'rgba(0,137,255,.1)'
}
},
{
value: Math.max.apply(null, payPersonNum),
itemStyle: {
color: 'rgba(0,25,255,.1)'
}
},
{
value: Math.max.apply(null, payPersonNum),
itemStyle: {
color: 'rgba(115,5,255,.1)'
}
},
{
value: Math.max.apply(null, payPersonNum),
itemStyle: {
color: 'rgba(215,1,255,.1)'
}
},
{
value: Math.max.apply(null, payPersonNum),
itemStyle: {
color: 'rgba(182,105,86,.1)'
}
}
]
// 繪製左側面
const CubeLeft = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
// 會canvas的應該都能看得懂，shape是從custom傳入的
const xAxisPoint = shape.xAxisPoint
const c0 = [shape.x, shape.y]
const c1 = [shape.x - 13, shape.y - 13]
const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13]
const c3 = [xAxisPoint[0], xAxisPoint[1]]
ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
}
})
// 繪製右側面
const CubeRight = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint
const c1 = [shape.x, shape.y]
const c2 = [xAxisPoint[0], xAxisPoint[1]]
const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
const c4 = [shape.x + 18, shape.y - 9]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
// 繪製頂面
const CubeTop = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0
},
buildPath: function (ctx, shape) {
const c1 = [shape.x, shape.y]
const c2 = [shape.x + 18, shape.y - 9]
const c3 = [shape.x + 5, shape.y - 22]
const c4 = [shape.x - 13, shape.y - 13]
ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
}
})
// 註冊三個面圖形
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const MAX = [300, 300, 300, 300, 300]
const VALUE = payPersonNum
buyTopOption = {
backgroundColor: "transparent",
tooltip: {
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontFamily: '微軟雅黑',
fontSize: 12,
},
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 255, 233,0)'
}, {
offset: 0.5,
color: 'rgba(255, 255, 255,1)',
}, {
offset: 1,
color: 'rgba(0, 255, 233,0)'
}],
global: false
}
},
},
formatter: function (params, ticket, callback) {
const item = params[1]
return item.name + ' : ' + item.value + '人';
}
},
grid: { //圖表的上下左右的距離
left: '1%',
right: '4%',
bottom: '10%',
top: '20%',
padding: '0 0 0 0',
containLabel: true,
},
xAxis: { //x軸的樣式設定
type: 'category',
data: areaData,
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255, 168, 1,1.0)'
}
},
offset: 20,
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
margin: 0,
textStyle: {
color: '#7B4D9F',
fontStyle: 'normal',
fontFamily: '微軟雅黑',
fontSize: 12,
}
}
},
yAxis: { //y軸的樣式設定
type: 'value',
name: "人數",
nameTextStyle: {
color: '#7B4D9F',
fontSize: 15,
offset: [2, -25]
},
axisLine: {
show: false,
lineStyle: {
color: '#7B4D9F'
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 16
},
boundaryGap: false
},
series: [{ //下面就是柱狀圖的每個柱的顏色設定
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: api.style().fill
},
{
offset: 1,
color: 'rgba(210, 218, 226,1.0)'
}
])
}
},
{
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: api.style().fill
},
{
offset: 1,
color: 'rgba(210, 218, 226,1.0)'
}
])
}
},
{
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: api.style().fill
},
{
offset: 1,
color: api.style().fill
}
])
}
}
]
}
},
data: VALUE2
}, {
type: 'custom',
renderItem: (params, api) => {
const location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'CubeLeft',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: api.style().fill
},
{
offset: 1,
color: 'rgba(210, 218, 226,1.0)'
}
])
}
},
{
type: 'CubeRight',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: api.style().fill
},
{
offset: 1,
color: 'rgba(210, 218, 226,1.0)'
}
])
}
},
{
type: 'CubeTop',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1],
xAxisPoint: api.coord([api.value(0), 0])
},
style: {
fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: api.style().fill
},
{
offset: 1,
color: api.style().fill
}
])
}
}
]
}
},
data: VALUE1
}, {
type: 'bar',
label: {
normal: {
show: true,
position: 'top',
fontSize: 14,
color: '#fff',
offset: [2, -25]
}
},
itemStyle: {
color: 'transparent'
},
tooltip: {
},
data: VALUE
}]
}
buyTop.setOption(buyTopOption);
},
error: function () {
console.log("介面調取失敗")
}
});
}
fetchBuytop() //最後呼叫下剛剛設定的方法
不要看程式碼多，其實都是基礎配置，都很簡單的，相信你能看的懂的，哈哈哈哈~~~
最後就是效果圖了，是不是很好看，哈哈哈！！！
相關文章
- Echarts 柱狀圖配置詳解Echarts
- echarts 設定柱狀圖寬度Echarts
- echarts 柱狀圖如何橫向展示Echarts
- echarts 柱狀圖 詳解與使用集合Echarts
- Echarts根據資料長度變換柱狀圖柱狀的顏色Echarts
- .net圖表之ECharts隨筆08-bar柱狀圖Echarts
- ECharts系列:玩轉ECharts之常用圖（折線、柱狀、餅狀、散點、關係、樹）Echarts
- 柱狀圖
- 九、柱狀圖和3D柱狀圖3D
- 如何基於 echarts 實現區間柱狀圖（包括橫向）？Echarts
- echarts柱狀圖示籤顯示不完全的問題Echarts
- echarts 3D圓柱圖Echarts3D
- Qt+ECharts開發筆記（一）：ECharts介紹、下載和Qt呼叫ECharts基礎柱狀圖DemoQTEcharts筆記
- PyQtGraph之柱狀圖QT
- oracle 柱狀圖（Histograms）OracleHistogram
- Highcharts 柱狀圖設定柱體偏移量使柱體緊靠在一起
- Echarts：10-5-2:柱狀圖（座標軸刻度與標籤對齊）Echarts
- Qt+ECharts開發筆記（三）：ECharts的柱狀圖介紹、基礎使用和Qt封裝DemoQTEcharts筆記封裝
- 資料視覺化：圖表篇（1）—— 基本柱狀圖、堆疊柱狀圖視覺化
- 【matplotlib 實戰】--柱狀圖
- JavaScript介面畫柱狀圖JavaScript
- 如何基於 echarts 在柱狀圖或條形圖上實現轉換率？（有想法嗎？）Echarts
- Quart2D 畫圖二 (餅狀圖、柱狀圖)
- 垂直柱狀圖（模擬+字串）字串
- Qt+ECharts開發筆記（五）：ECharts的動態排序柱狀圖介紹、基礎使用和Qt封裝DemoQTEcharts筆記排序封裝
- 柱狀圖與執行計劃
- R繪圖（06）——帶errorbar的柱狀圖繪圖ErrorORB
- 使用 Flutter 繪製圖表（一）柱狀圖?Flutter
- python-資料分析-Matplotlib-1-基礎圖形（曲線圖-散點-柱狀-堆疊柱狀-餅狀圖-直方圖）Python直方圖
- 柱狀圖、直方圖、散點圖、餅圖講解直方圖
- 微信小程式echarts-餅狀圖微信小程式Echarts
- amCharts繪製折線圖和柱狀圖混合
- MPAndroidChart繪製曲線圖、柱狀圖總結Android
- 84. 柱狀圖中最大的矩形
- echarts 柱狀圖的選中模式實現-被選中變色和再次選中為取消變色Echarts模式
- 繪製帶誤差分析的柱狀圖
- Android 自定義帶動畫的柱狀圖Android動畫
- Python 利用pandas 和 matplotlib繪製柱狀圖Python