vue项目在同一页面中引入多个echarts图表 ,并实现封装,自适应和动态数据改变(代码粘贴)
原文地址:https://blog.csdn.net/qq_33300789/article/details/79729675#commentBox原文为图片,等等,这里方便各位搬砖,特地,转为代码;详细讲解请访问上面的原文地址查看父页面:(根据自己项目的具体位置引入子组件:)<template><div><linegraph :...
·
原文地址:https://blog.csdn.net/qq_33300789/article/details/79729675#commentBox
原文为图片,等等,这里方便各位搬砖,特地,转为代码;详细讲解请访问上面的原文地址查看
父页面:(根据自己项目的具体位置引入子组件:)
<template>
<div>
<linegraph :id="'bargraph'" :data="option2" style="height:350px;"></linegraph>
<linegraph :id="'bargraph1'" :data="option2" style="height:350px;"></linegraph>
</div>
</template>
<script>
import linegraph from '../maptable/baseEchartsAllComponent.vue'
export default {
name: "weixinanaly",
data(){
return{
option2:{
title: {
text: '全年设备产量对比图',
left: 'center'
},
xAxis: {
type: 'category',
data: ['检品机1', '检品机2', '检品机3', '检品机4', '检品机5', '检品机6', '检品机7']
},
yAxis: {
type: 'value'
},
legend: {
left: 'center',
data: ['本年', '上年'],
bottom:0
},
grid: {
left: '1%',
right: '2%',
bottom: '8%',
containLabel: true
},
series: [
{
name: '本年',
data: [1000, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth:30,
},
{
name: '上年',
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barWidth:30,
}]
}
}
},
components:{
linegraph
}
}
</script>
<style scoped>
</style>
子组件:
<template>
<div v-bind:id=id v-bind:data=data></div>
</template>
<script>
export default {
name: "baseEchartsAllComponent",
data(){
return{
ChartLineGraph:null,
}
},
// 深度监听 父组件刚开始没有值,只有图标的配置项
// 父组件ajax请求后改变数据的值,传递过来,图标已生成,监听传过来的值的改变
// deep:true.深度监听,确保data中子项修改也能监听到。写法参考:https://cn.vuejs.org/v2/api/#watch
watch:{
data:{
handler(newvalue,oldvalue) {
this.drawLineGraph(this.id,newvalue);
},
deep:true
}
},
props:["id","data"],
mounted() {
this.drawLineGraph(this.id,this.data);
},
methods:{
drawLineGraph(id,data){
let _this = this;
let myChart = document.getElementById(id)
this.ChartLineGraph = this.$echarts.init(myChart)
this.ChartLineGraph.setOption(data);
window.addEventListener("resize",function () {
_this.ChartLineGraph.resize();
})
}
},
beforeDestroy() {
if(this.ChartLineGraph){
this.ChartLineGraph.clear();
}
}
}
</script>
<style scoped>
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)