vue+Echart實(shí)現(xiàn)立體柱狀圖
更新時(shí)間：2022年04月02日 13:07:03 作者：小怪獸，讓我來(lái)保護(hù)你
這篇文章主要為大家詳細(xì)介紹了vue+Echart實(shí)現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Echart+Vue制作立體柱狀圖，供大家參考，具體內(nèi)容如下
先來(lái)看一下制作完成后的效果：
廢話不多說(shuō)，直接上代碼：
HTML代碼：
<div class="lineOne"> ? ? ? <span class="spanTitle">使用時(shí)長(zhǎng)排行</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 // ?改變坐標(biāo)線的顏色
? ? ? ? ? ? }
? ? ? ? ? },
? ? ? ? ? axisLabel: {
? ? ? ? ? ? //調(diào)整x軸的lable
? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? fontSize: 12 ,// 讓字體變大
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? yAxis: {
? ? ? ? ? type: "value",
? ? ? ? ? name:'時(shí)長(zhǎng)（小時(shí)）',
? ? ? ? ? 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 // ?改變坐標(biāo)線的顏色
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? },
? ? ? ? series: [
? ? ? ? ? {
? ? ? ? ? ? name: "時(shí)長(zhǎng)統(tǒng)計(jì)",
? ? ? ? ? ? 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, //開(kāi)啟顯示
? ? ? ? ? ? ? ? ? ? ? ? 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
? ? ? ? }
? ? ? ? ]
? ? ? });
? ? },以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
總的來(lái)說(shuō)這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路，Axios是一個(gè)開(kāi)源的可以用在瀏覽器端和Node JS的異步通信框架，主要作用就是實(shí)現(xiàn)AJAX異步通信2023-02-02
Vue.js 2.0 移動(dòng)端拍照壓縮圖片預(yù)覽及上傳實(shí)例
這篇文章主要介紹了Vue.js 2.0 移動(dòng)端拍照壓縮圖片預(yù)覽及上傳實(shí)例，本來(lái)移動(dòng)端開(kāi)發(fā)H5應(yīng)用，準(zhǔn)備將mui框架和Vue.js+vue-router+vuex 全家桶結(jié)合起來(lái)使用2017-04-04
Vue.js計(jì)算機(jī)屬性computed和methods方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js計(jì)算機(jī)屬性computed和methods方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
vue中實(shí)現(xiàn)頁(yè)面刷新以及局部刷新的方法
這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)頁(yè)面刷新以及局部刷新的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-01-01
詳解Vue-cli3.X使用px2rem遇到的問(wèn)題
這篇文章主要介紹了詳解Vue-cli3.X使用px2rem遇到的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要為大家介紹了petite?vue的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue使用Axios庫(kù)請(qǐng)求數(shù)據(jù)時(shí)跨域問(wèn)題的解決方法詳解
在 VUE 項(xiàng)目開(kāi)發(fā)時(shí),遇到個(gè)問(wèn)題,正常設(shè)置使用 Axios 庫(kù)請(qǐng)求數(shù)據(jù)時(shí),報(bào)錯(cuò)提示跨域問(wèn)題,那在生產(chǎn)壞境下,該去怎么解決呢？下面小編就來(lái)和大家詳細(xì)講講2024-01-01
vue實(shí)現(xiàn)在頁(yè)面上添加水印的示例代碼
這篇文章主要給大家介紹一下vue實(shí)現(xiàn)在頁(yè)面上添加水印的實(shí)例,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-12-12
混入(mixin)提供了一種非常靈活的方式，來(lái)分發(fā)vue組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)2022-08-08
在Vue中實(shí)現(xiàn)二維碼生成與掃描功能的方法
二維碼是一種廣泛應(yīng)用于各種場(chǎng)合的編碼方式，它可以將信息編碼成一張二維圖案，方便快捷地傳遞信息，在Vue.js中，我們可以使用一些庫(kù)和組件來(lái)實(shí)現(xiàn)二維碼的生成和掃描，本文將介紹如何在Vue中實(shí)現(xiàn)二維碼的生成和掃描的方法2023-06-06