一：首先，我们需要在项目中引入echars
npm install echarts -S
二：在项目的mian.js文件中引入
1）全局引入
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
2）局部引入
<template>
<div style="width:500px;height:200px;"></div>
</template>
<script>
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
name: 'verticalBar',
props: {
color: {
type: Array,
default: () => []
},
columnList: {
type: Array,
default: () => []
},
advanceData: {
type: Array,
default: () => []
},
depositData: {
type: Array,
default: () => []
},
},
data() {
return {
}
},
watch: {
//这里选择一个我们要监听的传递到组件中的一个值，从而去执行this.drawPie()去达到更新数据
columnList: {
handler(newVal) {
this.drawPie()
},
deep: true
}
},
computed: {
//我们将options作为一个对象，是为了在初始化和数据变化时，直接使用this.myChart.setOption(this.options)即可实现图表重新更新
options() {
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
label: {
show: true
}
}
},
grid: {
left: "8%",
top: "22%",
right: "6%",
bottom: "16%"
},
legend: {
data: ["预收", "押金"],
top: "2%",
icon: 'circle',
itemWidth: 12,
itemHeight: 12,
textStyle: {
color: "#1FC3CE",
fontSize: 14
}
},
xAxis: {
data: this.columnList,
axisLine: {
show: true, //隐藏X轴轴线
lineStyle: {
color: "rgba(51,181,194,.4)",
width: 1
}
},
axisTick: {
show: false, //隐藏X轴刻度
alignWithLabel: true
},
axisLabel: {
show: true,
textStyle: {
color: "#33b5c2", //X轴文字颜色
fontSize: 14
},
interval: 0,
rotate: 0
}
},
yAxis: [{
type: "value",
name: "(单位：万)",
nameTextStyle: {
color: "#33b5c2",
fontSize: 14
},
splitLine: {
show: true,
lineStyle: {
width: 1,
color: "rgba(51,181,194,.4)"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#33b5c2",
fontSize: 14
}
}
}
],
series: [{
name: "预收",
type: "bar",
barWidth: 14,
itemStyle: {
normal: {
barBorderRadius: [7, 7, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#00ebd6"
},
{
offset: 1,
color: "#01a3f8"
}
]
)
}
},
data: this.advanceData
},
{
name: "押金",
type: "bar",
barWidth: 14,
itemStyle: {
normal: {
barBorderRadius: [7, 7, 0, 0],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#f8d278"
},
{
offset: 1,
color: "#ef7c1f"
}
])
}
},
data: this.depositData
}]
}
}
},
mounted() {
//这里增加一个nextTick，防止图表初始化异常
this.$nextTick(() => {
this.drawPie()
})
},
methods: {
chartResize() {
this.myChart.resize()
},
drawPie() {
//注意：因为echarts不能自动双向绑定，所以需要重新调用drawPie方法来重新向options赋值及重执行绘制
//调用setOption时，echarts不会删除重绘，而是以动画效果方式重加载
this.options.xAxis.data = this.columnList;
this.options.series[0].data = this.advanceData;
this.options.series[1].data = this.depositData;
//我们在过去使用echarts都是用id来标识容器，这里需要直接将当前组件作为标识，避免使用id造成id重复，否则会出现同一个页面不能多次使用的问题
this.myChart = echarts.init(this.$el, 'macarons')
this.myChart.setOption(this.options);
}
}
}
</script>
<style>
</style>
其中color、columnList、advanceData、depositData为我们传递的值。
代码为自己当前项目的源码，也优化不少，在使用中目前没有任何问题，在这里分享给大家。
如果有什么优化的地方，欢迎留言。
