前端vue显示柱状图_Vue—Echarts 柱状图
使用Vue做后臺管理系統的時候避免不了使用Echarts來展示對應的數據，下面是使用Echarts柱狀圖來展示對應數據的實例。
ee05abaf9633184a9c012631b642d970.png
使用npm安裝Echarts
npm install echarts --save
在man.js中引入對應的echarts
import ECharts from 'vue-echarts' // 在 webpack 環境下指向 components/ECharts.vue
/* 引入echarts工具 */
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
在vue文件下的編寫
data() {
return {
optionTrend: {
color: ['#2860fc'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標軸指示器，坐標軸觸發有效
type: 'shadow' // 默認為直線，可選為：'line' | 'shadow'|'none'
}
},
title: {
text: '金額數量',
top: '15',
left: '-3',
textStyle:{
fontSize: 14, //字體大小
color: '#666666', //字體顏色
fontWeight: '500'
},
},
grid: {
left: '-27',
right: '4',
bottom: '0%',
containLabel: true
},
xAxis: [ {
type: 'category',
data: ['0-5K', '5K-3W', '3W-5W', '5W-10W', '10W以上',],
axisLine: { // 改變x軸顏色
lineStyle: {
color: '#c1c1c1',
width: '1',
}
},
axisLabel: { // 改變x軸字體顏色和大小
textStyle: {
color: "#666666",
fontSize: 12,
},
},
} ],
yAxis: [ {
type: 'value',
axisTick: 'none', // 右邊軸樣式的顯示
axisLine: 'none', // 右邊軸樣式的顯示
// 修改網格的顏色
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#f5f5f5'
}
},
} ],
series: [ {
name: '',
type: 'bar',
barWidth: '50%',
data: [10, 52, 200, 334, 390,]
} ]
},
}
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeTheChart);
},
mounted(){
window.addEventListener("resize", this.resizeTheChart);
},
methods:{
resizeTheChart() {
if (this.$refs.TrendChart) {
this.$refs.TrendChart.resize();
}
},
27c1eac97e42e440849ac938a0bc4574.png
應為上面已經貼過template、beforeDestroy、mounted和methods里面的代碼了這里只貼對應options里面的代碼
dataRecordOptions: {
grid: {
left: '40',
right: '20',
bottom: '30',
top: '30',
},
tooltip : {
trigger: 'axis',
axisPointer: {
type: 'none', // 中間橫線
},
},
xAxis: {
data: ['數字身份','存證','數據報送','電子合同',],
axisLine: 'none',
axisLabel: {
color: '#fff',
fontSize: 12,
fontWeight: 500,
}
},
yAxis: {
type : 'value',
axisLabel: {
textStyle: {
fontSize: 12, //字體大小
color: '#137cf2', //字體顏色
},
formatter: function (value, index) {
if (value >= 10000 && value < 10000000) {
value = value / 10000 + "萬";
} else if (value >= 10000000 && value < 100000000) {
value = value / 10000000 + "千萬";
} else if (value >= 100000000) {
value = value / 100000000 + "億";
}
return value;
}
},
splitLine: {
show:true,
lineStyle: {
color: '#737f8d',
type: 'dashed', // 背景為虛線
}
},
axisTick: 'none', // 右邊軸樣式的顯示
axisLine: 'none', // 右邊軸樣式的顯示
},
series: [{
type: 'bar',
barWidth: 30,
smooth:false,
itemStyle:{
normal: {
color: function(params) {
var colorList = ['#137cf2','#f89009','#f8d909','#01cc78',];
var colorListr = ['#137cf2','#f8d909','#f89009','#5e00a6',];
return colorListr[params.dataIndex]
},
},
},
label: {
normal: {
show: true,
fontSize: 12,
fontWeight: '500',
color: '#ffffff',
position: 'top',
}
},
data: [10000,12000,8000,14000],
}],
}
總結
以上是生活随笔為你收集整理的前端vue显示柱状图_Vue—Echarts 柱状图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微小宝公众号排行榜_榜单 广东省技工院
- 下一篇： vuex的命名空间有哪些_Python3