vue+Echart實(shí)現(xiàn)立體柱狀圖
本文實(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)文章
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-04Vue.js計(jì)算機(jī)屬性computed和methods方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js計(jì)算機(jī)屬性computed和methods方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10vue中實(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-08Vue使用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-01vue實(shí)現(xiàn)在頁(yè)面上添加水印的示例代碼
這篇文章主要給大家介紹一下vue實(shí)現(xiàn)在頁(yè)面上添加水印的實(shí)例,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-12-12在Vue中實(shí)現(xiàn)二維碼生成與掃描功能的方法
二維碼是一種廣泛應(yīng)用于各種場(chǎng)合的編碼方式,它可以將信息編碼成一張二維圖案,方便快捷地傳遞信息,在Vue.js中,我們可以使用一些庫(kù)和組件來(lái)實(shí)現(xiàn)二維碼的生成和掃描,本文將介紹如何在Vue中實(shí)現(xiàn)二維碼的生成和掃描的方法2023-06-06