Echarts
介绍
Echarts
是一个使用 JavaScript 实现的开源可视化库,可以很方便的以多彩的形式展示数据,使人一目了然。关于具体的使用,如有兴趣的可以参见官网说明 Echarts详细说明文档
Echarts
–柱状图封装使用
这里我仅介绍Echarts
中的柱状图的使用,包括渐变柱状图,堆叠柱状图的使用。其实不管是渐变柱状图还是堆叠柱状图都是柱状图,只是在图的数据option
里变得更加复杂一点。在这里我主要拿渐变柱状图和堆叠柱状图来说明
- 图的封装:首先是单独建一个
Chart
组件,做好基本的封装工作,代码如下
// 组件 Chart.vue
<template>
<div :id="id" :style="chartStyle"></div>
</template>
<script>
export default {
name: 'Chart',
data () {
return {
chart: ''
}
},
props: {
id: {
type: String
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '100%'
},
data: {
type: Array
},
option: {
type: Object
}
},
computed: {
chartStyle () {
return {
height: this.height,
width: this.width
}
}
},
methods: {
init () {
this.chart = this.$echarts.init(document.getElementById(this.id))
this.chart.setOption(this.option)
window.addEventListener('resize', this.chart.resize) // 图表自适应
}
},
mounted () {
this.$nextTick(function () {
this.init()
})
},
watch: {
// 观察option的变化
option: {
handler (newVal, oldVal) {
if (this.chart) {
if (newVal) {
this.chart.setOption(newVal)
} else {
this.chart