使用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],

}],

}