vue+Echart實現(xiàn)立體柱狀圖

更新時間：2022年04月02日 13:07:03 作者：小怪獸，讓我來保護你

這篇文章主要為大家詳細介紹了vue+Echart實現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Echart+Vue制作立體柱狀圖，供大家參考，具體內(nèi)容如下

先來看一下制作完成后的效果：

廢話不多說，直接上代碼：

HTML代碼：

<div class="lineOne">
? ? ? <span class="spanTitle">使用時長排行</span>
? ? ?<div id="timeRange" style="width:100%;height:400px">
? ? ?</div>
</div>

JS部分：

timeRangeInit(xdata,ydata) {
? ? ? let nc = document.getElementById("timeRange");
? ? ? var myChart = echarts.init(nc);
? ? ? myChart.setOption({
? ? ? ? tooltip: {
? ? ? ? ? trigger: "axis"
? ? ? ? },
? ? ? ? grid: {
? ? ? ? ? top: "15%",
? ? ? ? ? left: "8%",
? ? ? ? ? right: "12%",
? ? ? ? ? bottom: "3%",
? ? ? ? ? containLabel: true
? ? ? ? },
? ? ? ? xAxis: {
? ? ? ? ? type: "category",
? ? ? ? ? data: xdata,
? ? ? ? ? name:'教室',
? ? ? ? ? splitLine: {
? ? ? ? ? ? show: false
? ? ? ? ? },
? ? ? ? ? axisTick: {
? ? ? ? ? ? show: false
? ? ? ? ? },
? ? ? ? ? axisLine: {
? ? ? ? ? ? symbol: ['none', 'arrow'],
? ? ? ? ? ? symbolSize: [15, 17],
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? color: '#000000',
? ? ? ? ? ? ? width: 2 // ?改變坐標線的顏色
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? axisLabel: {
? ? ? ? ? ? //調(diào)整x軸的lable
? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? fontSize: 12 ,// 讓字體變大
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? yAxis: {
? ? ? ? ? type: "value",
? ? ? ? ? name:'時長（小時）',
? ? ? ? ? splitLine: { ? ?//刻度線
? ? ? ? ? ? show: false,
? ? ? ? ? },
? ? ? ? ? splitArea:{ ? ? //柱狀圖后面的背景色
? ? ? ? ? ? show:true,
? ? ? ? ? ? areaStyle: {
? ? ? ? ? ? ? color: ["rgba(221,247,250,0.7)","rgba(245,249,232,0.7)"]
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? axisTick: {
? ? ? ? ? ? show: false
? ? ? ? ? },
? ? ? ? ? axisLabel: {
? ? ? ? ? ? //調(diào)整y軸的lable
? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? fontSize: 12 // 讓字體變大
? ? ? ? ? ? },
? ? ? ? ? ? show: true
? ? ? ? ? },
? ? ? ? ? axisLine: {
? ? ? ? ? ? symbol: ['none', 'arrow'],
? ? ? ? ? ? symbolSize: [15, 17],
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? color: '#000000',
? ? ? ? ? ? ? width: 2 // ?改變坐標線的顏色
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? name: "時長統(tǒng)計",
? ? ? ? ? ? type: "bar",
? ? ? ? ? ? showSymbol: false,
? ? ? ? ? ? hoverAnimation: false,
? ? ? ? ? ? data: ydata,
? ? ? ? ? ? barWidth: 17, //柱圖寬度
? ? ? ? ? ? itemStyle: { ? ? ? ? ?//左面
? ? ? ? ? ? ? normal: {
? ? ? ? ? ? ? ? color:function(params) {?
? ? ? ? ? ? ? ? ? let colorList = ["#EA5353","#DB8D4D","#9DD530","#38CFCA","#6C54E2","#749f83","#ca8622","#bda29a","#6e7074","#546570"];
? ? ? ? ? ? ? ? ? return colorList[params.dataIndex];
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? barBorderRadius:[0,0,0,180],
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? },{?
? ? ? ? ? ? name:'a',
? ? ? ? ? ? tooltip:{
? ? ? ? ? ? ? ?show:false?
? ? ? ? ? ? },
? ? ? ? ? ? type: 'bar',
? ? ? ? ? ? barWidth:17,?
? ? ? ? ? ? itemStyle:{ ? ? ? //右面
? ? ? ? ? ? ? ? normal:{
? ? ? ? ? ? ? ? ? color:function(params) {?
? ? ? ? ? ? ? ? ? ? let colorList = ["#FA6363","#F1A363","#AEE93C","#41EBE5","#866FF5","#749f83","#ca8622","#bda29a","#6e7074","#546570"];
? ? ? ? ? ? ? ? ? ? return colorList[params.dataIndex];
? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? barBorderRadius:[0,0,180,0]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? data: ydata,
? ? ? ? ? ? barGap:0
? ? ? ? },{?
? ? ? ? ? ? name:'b',
? ? ? ? ? ? tooltip:{
? ? ? ? ? ? ? ?show:false?
? ? ? ? ? ? },
? ? ? ? ? ? type: 'pictorialBar',
? ? ? ? ? ? itemStyle: { ? ? ? ?//頂部
? ? ? ? ? ? ? ? ?normal: {
? ? ? ? ? ? ? ? ? color:function(params) {?
? ? ? ? ? ? ? ? ? ? let colorList = ["#FC9F9F","#F7B177","#BBF64A","#4DF4EE","#947FFA","#749f83","#ca8622","#bda29a","#6e7074","#546570"];
? ? ? ? ? ? ? ? ? ? return colorList[params.dataIndex];
? ? ? ? ? ? ? ? ? },?
? ? ? ? ? ? ? ? ? borderColor:'',
? ? ? ? ? ? ? ? ? borderWidth:0.01,
? ? ? ? ? ? ? ? ? label: {
? ? ? ? ? ? ? ? ? ? ? ? show: true, //開啟顯示
? ? ? ? ? ? ? ? ? ? ? ? position: 'top', //在上方顯示
? ? ? ? ? ? ? ? ? ? ? ? textStyle: { //數(shù)值樣式
? ? ? ? ? ? ? ? ? ? ? ? ? ? color :'black',
? ? ? ? ? ? ? ? ? ? ? ? ? ? fontSize: 16,
? ? ? ? ? ? ? ? ? ? ? ? ? ? fontFamily:'微軟雅黑',
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? symbol: 'rect',
? ? ? ? ? ? symbolRotate:45,
? ? ? ? ? ? symbolSize: ['24','24'],
? ? ? ? ? ? symbolOffset:['0','-11'],
? ? ? ? ? ? symbolPosition: 'end',
? ? ? ? ? ? data: ydata,
? ? ? ? ? ? z:3
? ? ? ? }
? ? ? ? ]
? ? ? });
? ? },

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: