vue使用echarts實(shí)現(xiàn)立體柱形圖
更新時(shí)間：2022年04月02日 14:38:25 作者：小游-523??于?2020-11-06?18:39:30?發(fā)布??1775
這篇文章主要為大家詳細(xì)介紹了vue使用echarts實(shí)現(xiàn)立體柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue使用echarts實(shí)現(xiàn)立體柱形圖的具體代碼，供大家參考，具體內(nèi)容如下
立體柱形圖是由前面、右面、上面三部分組成，繪制時(shí)需要先繪制前面為一個(gè)圖形，右面和上面繪制為一個(gè)圖形，然后在echats中注冊(cè)，在option的series中renderItem中渲染
代碼如下：
（1）注冊(cè)繪制圖形
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)、在注冊(cè)圖形時(shí)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)立體柱狀圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Vue?Echarts實(shí)現(xiàn)帶滾動(dòng)效果的柱形圖
- vue+echarts實(shí)現(xiàn)3D柱形圖
- vue基于echarts實(shí)現(xiàn)立體柱形圖
- vue使用echarts實(shí)現(xiàn)水平柱形圖實(shí)例
- 使用D3.js+Vue實(shí)現(xiàn)一個(gè)簡(jiǎn)單的柱形圖
- Vue使用Echarts實(shí)現(xiàn)立體柱狀圖
- vue echarts實(shí)現(xiàn)橫向柱狀圖
- vue echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)展示
- vue+echarts實(shí)現(xiàn)堆疊柱狀圖
- 如何在vue 中使用柱狀圖 并自修改配置
相關(guān)文章
本篇文章主要介紹了vue-router：嵌套路由的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
VUE-Table上綁定Input通過render實(shí)現(xiàn)雙向綁定數(shù)據(jù)的示例
今天小編就為大家分享一篇VUE-Table上綁定Input通過render實(shí)現(xiàn)雙向綁定數(shù)據(jù)的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Element實(shí)現(xiàn)動(dòng)態(tài)增加多個(gè)輸入框并校驗(yàn)
本文主要介紹了Element實(shí)現(xiàn)動(dòng)態(tài)增加多個(gè)輸入框并校驗(yàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
本文以click為例給大家介紹vue.js中常用v-指令，可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript代碼，本文通過示例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2021-10-10
實(shí)例詳解vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法
這篇文章主要介紹了vue.js淺度監(jiān)聽和深度監(jiān)聽及watch用法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了vue2-elementUI部分組件樣式修改,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
vue商城中商品“篩選器”功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue商城中商品“篩選器”功能的實(shí)現(xiàn)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
vue實(shí)現(xiàn)上傳圖片添加水印(升級(jí)版)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)上傳圖片添加水印的升級(jí)版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
詳解Vue2+Echarts實(shí)現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard（附源碼）
本篇文章主要介紹了詳解Vue2+Echarts實(shí)現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard（附源碼），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
詳解element-ui 組件el-autocomplete使用踩坑記錄
最近使用了el-autocomplete組件，本文主要介紹了element-ui 組件el-autocomplete使用踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03