vue+echart實(shí)現(xiàn)雙柱狀圖
更新時(shí)間：2021年09月05日 10:47:58 作者：知命者夏洛特
這篇文章主要為大家詳細(xì)介紹了vue+echart實(shí)現(xiàn)雙柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue+echart實(shí)現(xiàn)雙柱狀圖的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
一、安裝
版本號建議安裝"echarts": "^4.8.0”，其它版本init會報(bào)錯(cuò)
1、 首先需要安裝echarts依賴包
npm install --save echarts@4.8.0
2、 或者使用國內(nèi)的淘寶鏡像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
<template>
<div class="echarts_con">
<div
class="echarts_main"
ref="dialog_root"
title="節(jié)點(diǎn)指標(biāo)"
@close="hideData()"
>
<!--負(fù)載情況-->
<div
ref="bar_dv"
:style="{
width: '100%',
minHeight: '300px',
}"
></div>
</div>
</div>
</template>
<script>
import echarts from 'echarts'
// import myIcon from './image/hot_icon.png' //自定義圖標(biāo)
// import averageIcon from './image/hot_icon.png'
export default {
name: "Echarts",
data () {
return {
maxStr: 400,
yInterval: 80,
myData: [122, 45, 67, 78, 46],
averageData: [32, 34, 6, 73, 84, 40]
}
},
//外部傳入數(shù)據(jù)的話要監(jiān)聽數(shù)據(jù)start
// props: {
// myData: {
// type: Array,
// default: []
// },
// averageData: {
// type: Array,
// default: []
// }
// },
// computed: {
// address () {
// const { myData, averageData } = this
// return {
// myData,
// averageData
// }
// }
// },
// watch: {
// address: {
// handler: function (val) {
// this.compare(val.myData, val.averageData)
// let newArr = val.myData.concat(val.averageData)
// let maxNum = Math.max(...newArr)
// this.maxStr = maxNum
// if (maxNum >= 500) {
// this.yInterval = 200
// } else {
// this.yInterval = 50
// }
// this.drawLine(val.myData, val.averageData)
// },
// deep: true
// }
// },
// mounted () {
// this.$nextTick(function () {
// this.drawLine();
// });
// },
//外部傳入數(shù)據(jù)的話要監(jiān)聽數(shù)據(jù)end
mounted () {
this.drawLine(this.myData, this.averageData)
},
methods: {
//判斷一一對應(yīng)數(shù)據(jù)低于平均就提示
compare (arr1, arr2) {
if (arr1[0] < arr2[0]) {
this.isCompare = true
} else if (arr1[1] < arr2[1]) {
this.isCompare = true
} else if (arr1[2] < arr2[2]) {
this.isCompare = true
} else if (arr1[3] < arr2[3]) {
this.isCompare = true
} else {
this.isCompare = false
}
},
clickClose () {
this.isCompare = false
},
/*負(fù)載情況圖標(biāo)*/
drawLine (a, b) {
var myData = a;
var averageData = b;
let bar_dv = this.$refs.bar_dv;
let myChart = echarts.init(bar_dv);
var autoHeight = parseInt(this.maxStr / 100) * 10 + 100;
myChart.getDom().style.height = autoHeight + "px";
myChart.resize(); //自適應(yīng)高度
// 繪制圖表
myChart.setOption({
title: { text: '報(bào)表展示' },
grid: {
// left: 40,
containLable: true
},
tooltip: {},
xAxis: {
data: ["看過我的", "溝通過的", "收到簡歷", "曝光人數(shù)"],
axisLine: {
lineStyle: {
type: 'solid',
color: '#eeeeee', //x左邊線的顏色
fontSize: 13,
width: '0.5' //坐標(biāo)線的寬度
}
},
axisLabel: { //x軸字體
textStyle: {
color: '#333333',
fontSize: 13
}
},
},
yAxis: {
type: 'value',
min: 0,
max: this.maxStr,
interval: this.yInterval,
axisLine: {
lineStyle: {
type: 'solid',
color: '#fff', //左邊線的顏色
width: '0.5' //坐標(biāo)線的寬度
}
},
axisLabel: {
textStyle: {
color: '#333333',
fontSize: 13
}
},
splitLine: {
show: true,
lineStyle: {
color: ['#eeeeee'],
width: 1,
type: 'solid'
}
}
},
legend: {
itemWidth: 11,
itemHeight: 12,
symbolKeepAspect: true,
textStyle: {
fontSize: 11,
lineHeight: 0,
backgroundColor: "rgba(11, 164, 19, 1)"
},
// icon: `image://${averageIcon}`,
data: [
{
name: '我的',
// icon: `image://${myIcon}`//自定義小圖標(biāo)
},
{
name: '行業(yè)平均',
// icon: `image://${averageIcon}`
}
],
align: 'left',
right: 40,
top: '0',
textStyle: {
fontSize: 12,
textAlign: 'center',
color: '#333333',
magrinRight: 3
},
},
series: [{
name: '我的',
type: 'bar',
data: myData,
barWidth: 16, //柱子寬度
barGap: '50%',//間距
label: {
show: true,
position: 'top',
textStyle: {
color: '#4695F3'
},
formatter: function (params) {
return params.value
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#A5CCF6'
}, {
offset: 1,
color: '#4695F3'
}]),
barBorderRadius: [4, 4, 0, 0],
}
}
},
{
name: '行業(yè)平均',
type: 'bar',
data: averageData,
barWidth: 16,
barGap: '50%',
label: {
show: true,
position: 'top',
textStyle: {
color: '#FE8401'
},
formatter: function (params) {
return params.value
}
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFB235'
}, {
offset: 1,
color: '#FE8401'
}]),
barBorderRadius: [4, 4, 0, 0],
},
emphasis: {
barBorderRadius: 30
},
}
}
]
}, true);
},
hideData () {
this.$emit("hideDialog")
},
confirm () {
this.hideData();
},
}
}
</script>
<style scoped>
.echarts_con {
width: 100%;
margin: 0 auto;
margin-top: 8px;
border-radius: 20px;
background: #fff;
padding-bottom: 35px;
}
.echarts_main {
width: 100%;
margin: 0 auto;
padding-top: 20px;
margin-bottom: -32px;
margin-right: 20px;
margin-left: 20px;
}
.bottom {
width: 90%;
margin: 0 auto;
background: #fef8e1;
border-radius: 6px;
height: 100%;
margin-top: 16px;
}
.bottom_con {
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
height: 34px;
line-height: 34px;
}
.bottom_text {
height: 34px;
line-height: 34px;
font-size: 13px;
font-family: PingFang, PingFang-SC;
font-weight: SC;
text-align: left;
color: #fa5d1d;
}
.right_close {
width: 13px;
height: 13px;
}
</style>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
vue在App.vue文件中監(jiān)聽路由變化刷新頁面操作
這篇文章主要介紹了vue在App.vue文件中監(jiān)聽路由變化刷新頁面操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue.js實(shí)現(xiàn)表格動態(tài)增加刪除的方法（附源碼下載）
Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復(fù)雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，下面這篇文章主要給介紹了Vue.js實(shí)現(xiàn)表格動態(tài)增加刪除的方法實(shí)例，文末提供了源碼下載，需要的朋友可以參考借鑒。2017-01-01
基于 Vue.js 之 iView UI 框架非工程化實(shí)踐記錄(推薦)
為了快速體驗(yàn) MVVM 模式，我選擇了非工程化方式來起步，并選擇使用 Vue.js，以及基于它構(gòu)建的 iView UI 框架。本文給大家分享基于 Vue.js 之 iView UI 框架非工程化實(shí)踐記錄，需要的朋友參考下吧2017-11-11
vue elementUI table表格數(shù)據(jù) 滾動懶加載的實(shí)現(xiàn)方法
這篇文章主要介紹了vue elementUI table表格數(shù)據(jù)滾動懶加載的實(shí)現(xiàn)方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue項(xiàng)目發(fā)布有緩存正式環(huán)境不更新的解決方案
vue項(xiàng)目每次發(fā)布新版本后,測試人員都要強(qiáng)制刷新才能更新瀏覽器代碼來驗(yàn)證bug,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目發(fā)布有緩存正式環(huán)境不更新的解決方案,需要的朋友可以參考下2024-03-03
antdesign-vue結(jié)合sortablejs實(shí)現(xiàn)兩個(gè)table相互拖拽排序功能
這篇文章主要介紹了antdesign-vue結(jié)合sortablejs實(shí)現(xiàn)兩個(gè)table相互拖拽排序功能,本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
Vue.extend 登錄注冊模態(tài)框的實(shí)現(xiàn)
這篇文章主要介紹了Vue.extend 登錄注冊模態(tài)框的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)無限加載瀑布流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用實(shí)例詳解
訂閱發(fā)布模式定義了一種一對多的依賴關(guān)系，讓多個(gè)訂閱者對象同時(shí)監(jiān)聽某一個(gè)主題對象。這篇文章主要介紹了發(fā)布訂閱模式在vue中的實(shí)際運(yùn)用,需要的朋友可以參考下2019-06-06
iview+vue實(shí)現(xiàn)導(dǎo)入EXCEL預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了iview+vue實(shí)現(xiàn)導(dǎo)入EXCEL預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07