Vue使用Echarts實現(xiàn)立體柱狀圖
更新時間：2022年04月02日 13:41:56 作者：仲夏今天也在寫前端
這篇文章主要為大家詳細介紹了Vue使用Echarts實現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue使用Echarts實現(xiàn)立體柱狀圖的具體代碼，供大家參考，具體內(nèi)容如下
預覽：
代碼：
頁面部分:
<template>
<div class="roadnum-all" ref="roadnumall">
<div id="roadnum" ref="dom"></div>
</div>
</template>CSS部分:
.roadnum-all {
width: 100%;
height: 100%; /*填滿父級容器*/
}JS部分:
import echarts from 'echarts' // 引入Echarts
export default {
name: "ltzzt",
data() {
return {
data: [],
dom: null
}
},
mounted() {
this.$nextTick(() => { // 給圖標寬高 使圖標填滿容器
document.getElementById('roadnum').style.width = this.$refs.roadnumall.offsetWidth + 'px';
document.getElementById('roadnum').style.height = this.$refs.roadnumall.offsetHeight + 'px';
this.draw();
})
},
methods: {
// 畫圖
draw() {
// 網(wǎng)絡請求 假裝從后端拿回來的數(shù)據(jù)
this.data = [
{ name: '京哈高速', value: 10 },
{ name: '京哈高速1', value: 20 },
{ name: '京哈高速2', value: 30 },
{ name: '京哈高速3', value: 40 },
{ name: '京哈高速4', value: 50 },
{ name: '京哈高速5', value: 60 },
{ name: '京哈高速6', value: 70 },
{ name: '京哈高速7', value: 80 },
{ name: '京哈高速8', value: 90 },
{ name: '京哈高速9', value: 100 },
{ name: '京哈高速10', value: 110 },
{ name: '京哈高速11', value: 120 }
];
// 拼軸顯示和數(shù)據(jù)的數(shù)組
let xAxisText = [];
let dataList = [];
this.data.forEach(item => {
xAxisText.push(item.name);
dataList.push(item.value)
})
// 從這里開始 創(chuàng)建自定義圖形 —— 長方體的正面
var MyCubeRect = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 180, // 長方體寬度
zWidth: 8, // 陰影折角寬
zHeight: 4 // 陰影折角高
},
buildPath: function (ctx, shape) {
console.log(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 / xAxisText.length, shape.y];
const p4 = [shape.x + shape.width / xAxisText.length, shape.y];
const p2 = [xAxisPoint[0] - shape.width / xAxisText.length, xAxisPoint[1]];
const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];
ctx.moveTo(p0[0], p0[1]); //0
ctx.lineTo(p1[0], p1[1]); //1
ctx.lineTo(p2[0], p2[1]); //2
ctx.lineTo(p3[0], p3[1]); //3
ctx.lineTo(p4[0], p4[1]); //4
ctx.lineTo(p0[0], p0[1]); //0
ctx.closePath();
}
})
// 創(chuàng)建第二個自定義圖形 —— 長方體的上面和側面
var MyCubeShadow = echarts.graphic.extendShape({
shape: {
x: 0,
y: 0,
width: 180,
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 / xAxisText.length, shape.y];
const p4 = [shape.x + shape.width / xAxisText.length, shape.y];
const p6 = [shape.x + shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
const p7 = [shape.x - shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];
const p5 = [xAxisPoint[0] + shape.width / xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight];
ctx.moveTo(p4[0], p4[1]); //4
ctx.lineTo(p3[0], p3[1]); //3
ctx.lineTo(p5[0], p5[1]); //5
ctx.lineTo(p6[0], p6[1]); //6
ctx.lineTo(p4[0], p4[1]); //4
ctx.moveTo(p4[0], p4[1]); //4
ctx.lineTo(p6[0], p6[1]); //6
ctx.lineTo(p7[0], p7[1]); //7
ctx.lineTo(p1[0], p1[1]); //1
ctx.lineTo(p4[0], p4[1]); //4
ctx.closePath();
}
});
echarts.graphic.registerShape('MyCubeRect', MyCubeRect);
echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);
const option = {
color: ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'],
title: {
text: '驗算路線排行榜',
left: 20,
top: 20
},
legend: {
show: true,
top: 25
},
grid: {
left: '3%',
right: '4%',
top: '15%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: xAxisText,
boundaryGap: true,
interval: 0,
axisLabel: {
color: '#333',
// 讓x軸文字方向為豎向
interval: 0,
formatter: function (value) {
return value.split('').join('\n')
}
}
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
},
series: [{
name: '次數(shù)',
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),
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: api.style(), // api.style()——繼承原本的樣式
}, {
type: 'MyCubeShadow',
shape: {
api,
xValue: api.value(0),
yValue: api.value(1),
x: location[0],
y: location[1]
},
style: {
fill: api.style(),
text: '' // 繼承原本樣式的基礎上將label清空 如果不清空生成的圖上會顯示兩個重疊的label
}
}]
}
},
stack: '總量',
label: {
show: true,
position: 'top',
color: '#333',
formatter: `{c}次`,
fontSize: 16,
distance: 15
},
itemStyle: {
normal: {
color: (params) => {
// 使每根柱子顏色都不一樣
let colorList = ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'];
if (params.dataIndex + 1 <= colorList.length) {
return colorList[params.dataIndex]
} else {
// 如果柱子的數(shù)量超過顏色數(shù)組 就從頭再來一遍
return colorList[params.dataIndex - colorList.length]
}
}
}
},
data: dataList
}]
};
this.dom = echarts.init(this.$refs.dom);
this.dom.setOption(option, true)
window.addEventListener("resize", () => {
if (document.getElementById('roadnum') && this.$refs.roadnumall) {
document.getElementById('roadnum').removeAttribute('_echarts_instance_');
document.getElementById('roadnum').style.width = this.$refs.roadnumall.offsetWidth + 'px';
document.getElementById('roadnum').style.height = this.$refs.roadnumall.offsetHeight + 'px';
this.dom.resize();
}
});
}
}
}以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
基于vue+face-api.js實現(xiàn)前端人臉識別功能
基于face-api.js要實現(xiàn)人臉識別功能,首先要將自己需要的模型文件下載保存在靜態(tài)目錄下,可以通過cdn的方式在index.html中引入face-api.js,本文給大家介紹vue+face-api.js實現(xiàn)前端人臉識別功能,感興趣的朋友一起看看吧2023-12-12
本篇文章從javascript原型鏈來解釋為什么vue中data必須是一個函數(shù)，解釋一下這部分的原理內(nèi)容，感興趣的朋友跟隨小編一起看看吧2021-11-11
這篇文章主要介紹了vue+element表單校驗功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue增加強緩存和版本號的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
本篇文章主要介紹了vue路由懶加載的實現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了淺談Vue 函數(shù)式組件的使用技巧，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
vue-cli 作為 Vue 官方推薦的項目構建腳手架，它提供了開發(fā)過程中常用的，熱重載，構建，調(diào)試，單元測試，代碼檢測等功能。我們本次的異步遠端組件將基于 vue-cli 開發(fā)2017-11-11
vuejs如何解決瀏覽器切換頁面后setInterval計時器停止執(zhí)行的問題
setinterval()是定時調(diào)用的函數(shù),可按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達式,這篇文章主要給大家介紹了關于vuejs如何解決瀏覽器切換頁面后setInterval計時器停止執(zhí)行的問題,需要的朋友可以參考下2024-01-01
這篇文章主要為大家介紹了Vue執(zhí)行流程及渲染解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vue + better-scroll 實現(xiàn)移動端字母索引導航功能
better-scroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。這篇文章主要介紹了Vue + better-scroll 實現(xiàn)移動端字母索引導航功能,需要的朋友可以參考下2018-05-05