vue基于echarts實(shí)現(xiàn)立體柱形圖
更新時間：2021年09月03日 13:55:29 作者：小游-523
這篇文章主要為大家詳細(xì)介紹了vue基于echarts實(shí)現(xiàn)立體柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
立體柱形圖是由前面、右面、上面三部分組成，繪制時需要先繪制前面為一個圖形，右面和上面繪制為一個圖形，然后在echats中注冊，在option的series中renderItem中渲染
代碼如下：
（1）注冊繪制圖形
registry () {
let MyCubeRect = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 20,
zWidth: 8,
zHeight: 4
},
buildPath: function (ctx, shape) {
const api = shape.api
const xAxisPoint = api.coord([shape.xValue, 0])
const p0 = [shape.x, shape.y]
const p1 = [shape.x - shape.width / 2, shape.y]
const p4 = [shape.x + shape.width / 2, shape.y]
const p2 = [shape.x - shape.width / 2, xAxisPoint[1]]
const p3 = [shape.x + shape.width / 2, xAxisPoint[1]]
ctx.moveTo(p0[0], p0[1])
ctx.lineTo(p1[0], p1[1])
ctx.lineTo(p2[0], p2[1])
ctx.lineTo(p3[0], p3[1])
ctx.lineTo(p4[0], p4[1])
ctx.lineTo(p0[0], p0[1])
ctx.closePath()
}
})
let MyCubeShadow = this.$echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 20,
zWidth: 8,
zHeight: 4
},
buildPath: function (ctx, shape) {
const api = shape.api
const xAxisPoint = api.coord([shape.xValue, 0])
const p1 = [shape.x - shape.width / 2, shape.y]
const p4 = [shape.x + shape.width / 2, shape.y]
const p6 = [shape.x + shape.width / 2 + shape.zWidth, shape.y - shape.zHeight]
const p7 = [shape.x - shape.width / 2 + shape.zWidth, shape.y - shape.zHeight]
const p3 = [shape.x + shape.width / 2, xAxisPoint[1]]
const p5 = [shape.x + shape.width / 2 + shape.zWidth, xAxisPoint[1] - shape.zHeight]
ctx.moveTo(p4[0], p4[1])
ctx.lineTo(p3[0], p3[1])
ctx.lineTo(p5[0], p5[1])
ctx.lineTo(p6[0], p6[1])
ctx.lineTo(p4[0], p4[1])
ctx.moveTo(p4[0], p4[1])
ctx.lineTo(p6[0], p6[1])
ctx.lineTo(p7[0], p7[1])
ctx.lineTo(p1[0], p1[1])
ctx.lineTo(p4[0], p4[1])
ctx.closePath()
}
})
this.$echarts.graphic.registerShape('MyCubeRect', MyCubeRect)
this.$echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow)
}
（2）渲染圖形
barChartOption: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
containLabel: true,
top: '30px',
bottom: '0px',
left: '0px'
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
fontSize: fontSize(12)
},
axisLine: {
show: false,
lineStyle: {
color: '#98b9c5'
}
},
data: [] //通過后端傳入數(shù)據(jù)js傳入
},
yAxis: {
type: 'value',
axisLabel: {
fontSize: fontSize(12)
},
axisLine: {
show: false,
lineStyle: {
color: '#98b9c5'
}
},
splitLine: {
lineStyle: {
color: '#3a586a',
type: 'dashed'
}
}
},
series: [{
name: '單位面積能耗',
type: 'custom',
renderItem: (params, api) => {
let location = api.coord([api.value(0), api.value(1)])
return {
type: 'group',
children: [{
type: 'MyCubeRect',
shape: {
api,
xValue: api.value(0) - 0.5,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style()
},
{
type: 'MyCubeShadow',
shape: {
api,
xValue: api.value(0) - 0.5,
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
fill: api.style(),
text: ''
}
}]
}
},
stack: '單位面積能耗',
label: {
show: true,
position: 'top',
formatter: '{c}',
textStyle: {
fontSize: fontSize(12),
color: '#fff',
align: 'center'
}
},
itemStyle: {
color: new this.$echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#b1950d' },
{ offset: 0.5, color: '#aea20d' },
{ offset: 1, color: '#a5aa12' }
]
)
},
data: [] //后端傳入數(shù)據(jù)
}]
}
注意事項(xiàng)：
1）、在注冊圖形時style：只能使用 style: api.style();
text: ''后面才能使用label在圖形頂部放置value
2）、this.$echarts是經(jīng)過統(tǒng)一封裝之后的，具體情況還需具體考慮
3）、生成圖形
generateBarChart () {
let vm = this
if (this.$refs['uintEnergyConsume']) { //this.$refs是生成圖形區(qū)域的ref值
this.$echarts.graphic.registerShape('MyCubeRect', this.MyCubeRect)
this.$echarts.graphic.registerShape('MyCubeShadow', this.MyCubeShadow)
this.barChart = this.$echarts.init(this.$refs['uintEnergyConsume'])
this.barChart.setOption(this.barChartOption, false, true)
$(window).resize(function () { //屏幕自適應(yīng)
vm.handleResize()
})
}
}
（4）template中代碼
<div ref="uintEnergyConsume" id="uintEnergyConsume" class="chart-container" style="width: 100%;" element-loading-text="加載中..."></div> </div>
（5）效果如下：
參考圖形網(wǎng)址：Vue使用Echarts實(shí)現(xiàn)立體柱狀圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue?Echarts實(shí)現(xiàn)帶滾動效果的柱形圖
- vue+echarts實(shí)現(xiàn)3D柱形圖
- vue使用echarts實(shí)現(xiàn)水平柱形圖實(shí)例
- 使用D3.js+Vue實(shí)現(xiàn)一個簡單的柱形圖
- Vue使用Echarts實(shí)現(xiàn)立體柱狀圖
- vue echarts實(shí)現(xiàn)橫向柱狀圖
- vue echarts實(shí)現(xiàn)柱狀圖動態(tài)展示
- vue+echarts實(shí)現(xiàn)堆疊柱狀圖
- 如何在vue 中使用柱狀圖 并自修改配置
- vue使用echarts實(shí)現(xiàn)立體柱形圖
相關(guān)文章
今天小編就為大家分享一篇對vue中的事件穿透與禁止穿透實(shí)例詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vite性能優(yōu)化之分包策略的實(shí)現(xiàn)
本文主要介紹了Vite性能優(yōu)化之分包策略的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要介紹了typescript中this報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
使用VUE+iView+.Net Core上傳圖片的方法示例
這篇文章主要介紹了使用VUE+iView+.Net Core上傳圖片的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Vue.js組件tree實(shí)現(xiàn)省市多級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tree實(shí)現(xiàn)省市多級聯(lián)動的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue3之向echarts組件傳值的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Antd form表單的使用、設(shè)值、取值、清空值方式
這篇文章主要介紹了Antd form表單的使用、設(shè)值、取值、清空值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了基于vue實(shí)現(xiàn)的圓形菜單欄組件，本文通過實(shí)例代碼，圖文詳解的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
Vue.js響應(yīng)式數(shù)據(jù)的簡單實(shí)現(xiàn)方法(一看就會)
Vue最巧妙的特性之一是其響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue.js響應(yīng)式數(shù)據(jù)的簡單實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
Vue中addEventListener()?監(jiān)聽事件案例講解
這篇文章主要介紹了Vue中addEventListener()?監(jiān)聽事件案例講解，包括語法講解和事件冒泡或事件捕獲的相關(guān)知識，本文結(jié)合示例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-12-12