vue+echart實現雙柱狀圖
本文實例為大傢分享瞭vue+echart實現雙柱狀圖的具體代碼,供大傢參考,具體內容如下
效果圖:
一、安裝
版本號建議安裝”echarts”: “^4.8.0”,其它版本init會報錯
1、 首先需要安裝echarts依賴包
npm install --save [email protected]
2、 或者使用國內的淘寶鏡像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
<template> <div class="echarts_con"> <div class="echarts_main" ref="dialog_root" title="節點指標" @close="hideData()" > <!--負載情況--> <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' //自定義圖標 // 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] } }, //外部傳入數據的話要監聽數據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(); // }); // }, //外部傳入數據的話要監聽數據end mounted () { this.drawLine(this.myData, this.averageData) }, methods: { //判斷一一對應數據低於平均就提示 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 }, /*負載情況圖標*/ 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(); //自適應高度 // 繪制圖表 myChart.setOption({ title: { text: '報表展示' }, grid: { // left: 40, containLable: true }, tooltip: {}, xAxis: { data: ["看過我的", "溝通過的", "收到簡歷", "曝光人數"], axisLine: { lineStyle: { type: 'solid', color: '#eeeeee', //x左邊線的顏色 fontSize: 13, width: '0.5' //坐標線的寬度 } }, 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' //坐標線的寬度 } }, 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}`//自定義小圖標 }, { name: '行業平均', // 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: '行業平均', 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>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- vue+echarts實現中國地圖流動效果(步驟詳解)
- JavaScript可視化與Echarts詳細介紹
- vue+echarts實現進度條式柱狀圖
- vue基於echarts實現立體柱形圖
- Echarts利用多X軸實現七天天氣預報效果的示例代碼