使用Vue做后臺(tái)管理系統(tǒng)的時(shí)候避免不了使用Echarts來展示對(duì)應(yīng)的數(shù)據(jù)，下面是使用Echarts柱狀圖來展示對(duì)應(yīng)數(shù)據(jù)的實(shí)例。

ee05abaf9633184a9c012631b642d970.png

使用npm安裝Echarts

npm install echarts --save

在man.js中引入對(duì)應(yīng)的echarts

import ECharts from 'vue-echarts' // 在 webpack 環(huán)境下指向 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: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效

type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'|'none'

}

},

title: {

text: '金額數(shù)量',

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', // 右邊軸樣式的顯示

// 修改網(wǎng)格的顏色

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

應(yīng)為上面已經(jīng)貼過template、beforeDestroy、mounted和methods里面的代碼了這里只貼對(duì)應(yīng)options里面的代碼

dataRecordOptions: {

grid: {

left: '40',

right: '20',

bottom: '30',

top: '30',

},

tooltip : {

trigger: 'axis',

axisPointer: {

type: 'none', // 中間橫線

},

},

xAxis: {

data: ['數(shù)字身份','存證','數(shù)據(jù)報(bào)送','電子合同',],

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 + "萬(wàn)";

} else if (value >= 10000000 && value < 100000000) {

value = value / 10000000 + "千萬(wàn)";

} 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],

}],

}

總結(jié)

以上是生活随笔為你收集整理的前端vue显示柱状图_Vue—Echarts 柱状图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。