为什么80%的码农都做不了架构师？>>> 
- 需求：
一个页面内，分页显示多个统计图表，要求用vue的组件，来进行绘制图表
- 难题：
一是我们用的是jquery+html5+js+echarts+vue，就是直接页面引用vue.min.js的方式，一开始以为会不行，但是最后发现结果是可以的hiahiahia~。
二是我们统计图的重绘很奇怪，因为涉及到父子组件的数据变化，然后例如说，一般流程是这样的：打开页面，加载父组件，父组件调用ajax请求查询的分页结果数据，然后对页面的子组件进行绘制，传递对应的数据到子组件进行自行绘统计图。但是点击分页的查询时，发现实际上数据变化了，但是图表并没有重新绘制。后来才知道是子组件（统计图组件）里面需要加上watch的方法去监测数据变化后触发重绘的动作。
- 贴代码
【html的页面代码】
1、引入vue
2、父子组件嵌套
【父组件代码】
/*
* 父组件代码
*/
var wrapperVue = new Vue({
el: "#wrapper",
data: {
model: {
total: "", //总数量
size: "3", //每页显示条目个数不传默认20
page: "1", //当前页码
},
wrapperVueArray: [],
},
created: function () {
var self = this;
self.getList();
},
methods: {
//页码切换执行方法
pageFn: function (val) {
this.model.page = val;
},
//搜索
goSearch: function () {
var self = this;
self.model.page = 1;
self.getList();
},
getList: function () {
var self = this;
var queryUrl = '...';//ajax的Url
var queryData = {
//...ajax的post参数
};
var queryObj = JSON.stringify(queryData);
ComPageOpt.util.queryAjax(queryUrl, queryObj, '', '', '', '', function (data) {
self.wrapperVueArray = data.data;//设置图表绘制的数据数组（data是符合echart对应的option参数的结构）
self.model.total = data.data.total_size;//分页组件的总条数，分页组件自动分页
});
}
}
})【子组件代码】
/**
*子组件代码
*/
Vue.component('linechart', {
data() {
return {//子组件内部数据
itemid: this.propitemid,
option: this.propoption,
mychart : null
}
},
props: {//子组件可以被页面html的dom元素暴露出来的属性
propitemid: String,
propoption: {//因为这个propoption是图表的数据，所以必须是Object类型
type: Object,
default(){
return {};
}
}
},
watch:{//用于监测子组件暴露的属性值变化所触发的动作
propoption:{
handler(newValue){
this.option = newValue;
this.redrawChart();
}
}
},
//组件template的内容
template: '',
mounted: function () {
this.drawLineGraph();
},
methods: {
//图表绘制
drawLineGraph() {
//# 1. 获取一个用于挂在 echarts 的 DOM 元素
let $echartsDOM = document.getElementById(this.itemid);//此处用组件内部的属性数据
//# 2. 初始化
if(this.mychart==null){
let myEcharts = echarts.init($echartsDOM);
this.mychart = myEcharts;
}
//# 3. 设置配置项
let option = this.option;//此处用组件内部的属性数据
//# 4. 为 echarts 指定配置
this.mychart.setOption(option);
},
redrawChart(){
this.drawLineGraph();
}
}
});
亲测可用，大家可以试试哈哈哈~
ε≡٩(๑>₃<)۶ 一心向学
(๑╹ヮ╹๑)ﾉ Studying makes me happy