Vue+Echarts实例

先看下最终的效果图吧。

很明显哈，是在一个父组件上，有两个子组件页面，每个子组件展示一个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