柱状图多维条形图vue_Vue配合Echarts实现柱状图组件

先来看下实现效果

没有填充数据时截图.png

数据填充完成截图.png

思路

组件化开发，也就是说复用的代码整合成公共的模块，供需要时使用

也可以理解为当多组功能相同的对象,有不同的表现形式，即功能一样，但是不同的表现形式(比如说是柱状图中不同的数据展现，或者是颜色样式等等)

上图中，柱状图为子组件，子组件中封装好了一个画出柱状图的方法，需要传入一些值便可以使用

在这里，传值是重要的操作，子组件去接收父组件传来的值以后，重绘这个柱状图，监听也是很重要的操作

直接上代码：

柱状图子组件.vue

export default {

name : "Bar",

//接收从父组件传回的值

props: ["getData"],

data() {

return {};

},

//实时监听父组件传过来的值，进而执行drawBar方法，重绘柱状图

watch:{

getData:{

handler(value){

this.drawBar(value)

},

deep: true

}

},

mounted() {

this.drawBar();

},

methods: {

drawBar({

textTitle = "",

nameTitle = "",

nameArray = [],

dataArray = [],

colorArray = []

} = {}) {

let barBox = this.$echarts.init(document.getElementById("bar"));

let option