前言
使用mpvue-echarts来写图表，那个F2再提醒自己下要踩坑不能忘记。遇到了一个问题就是数据不能动态的去渲染，这个其实官方给了我们对应的方法
懒加载
代码
修改了调用initChart()的位置
代码语言：javascript复制<!--
* @Author: wangyang
* @LastEditors: wangyang
* @Description: file content
* @Date: 2019-04-08 16:34:52
* @LastEditTime: 2019-04-10 14:15:29
-->
<template>
<div class="container">
<!-- <button @click="initChart">初始化</button> -->
<div class="wrap">
<mpvue-echarts lazyLoad :echarts="echarts" :onInit="handleInit" ref="echarts" />
</div>
</div>
</template>
<script>
import * as echarts from 'echarts/dist/echarts.simple.min'
import mpvueEcharts from 'mpvue-echarts'
let chart = null
export default {
data () {
return {
option: null,
echarts,
share:[]
}
},
components: {
mpvueEcharts
},
mounted(){
this.query();
},
methods: {
initChart () {
this.option = {
backgroundColor: '#fff',
color: ['#67E0E3'],
legend: {
data: [ '访问人数'],
top:'top'
},
grid: {
containLabel: true
},
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
x: 'center',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: [
{
name: '访问人数',
type: 'line',
smooth: false,
label: {
normal: {
show: true,
padding:[0,7,0,0]
}
},
data: this.share
}]
}
this.$refs.echarts.init()
},
handleInit (canvas, width, height) {
chart = echarts.init(canvas, null, {
width: width,
height: height
})
canvas.setChart(chart)
chart.setOption(this.option)
return chart
},
query() {
const that = this;
that.http({
url: 'Employee/statistic',
data:{
wid:2,
type:1,
uid:100007
}
}).then(res =>{
if (res.status) {
this.share = res.data.share_count;
this.initChart();
}
})
},
},
onShareAppMessage () {}
}
</script>
<style scoped>
.wrap {
width: 100%;
height: 300px;
}
</style>
