先看下最终的效果图吧。
很明显哈,是在一个父组件上,有两个子组件页面,每个子组件展示一个Echarts图。
父组件源码我就不展示了,主要是把子组件导入并且加入到components属性中,然后在对应的位置去用就可以了。
由于我把请求都写在了子组件中去调用,所以就不用去用props传递数据了(实际开发最好减少请求次数,从而起到优化的作用)。
这个是饼图子组件的代码。
<template>
<div>
<div id="myCharts"></div>
</div>
</template>
<script>
import echarts from 'echarts'
import {
selectList } from '_api/asset'
export default {
name: 'waterpie',
data () {
return {
chart: null,
options: {
},
datas: []
}
},
props:{
name: String,
},
created(){
this.begin()
},
mounted () {
},
methods: {
begin(){
let params = {
maxForestAssets: '',
maxLandAssets:'',
maxLandPriceAssets: '',
maxWaterAssets:'',
minForestAssets:'',
minLandAssets:'',
minLandPriceAssets:'',
minWaterAssets:'',
servername:''
}
selectList(params).then(res => {
if(res