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.data.success){
          var data = res.data.data[0]
          data.forestAssets = Number(data.forestAssets)
          data.landAssets = Number(data.landAssets)
          data.waterAssets = Number(data.waterAssets)
          this.datas = data
          this.initChart()
      }
    })
    },
    initChart(){
      this.chart = echarts.init(document.getElementById("myCharts"));
      this.options = {   
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: ['林草年资产', '土地年资产（地价）', '水资源年资产'],
                textStyle: {
                  fontSize: 16,
                  color: "#fff"
                }
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    label:{
                      fontSize:16,
                    },
                    center: ['50%', '60%'],
                    data: [
                        {value: this.datas.forestAssets, name: '林草年资产'},
                        {value: this.datas.landAssets, name: '土地年资产（地价）'},
                        {value: this.datas.waterAssets, name: '水资源年资产',itemStyle: { color: '#52DA31' }},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
      }
      this.chart.setOption(this.options);
    }
  },
  beforeDestroy(){}
}
</script>

<style lang="less" scoped>
  #myCharts{
    width: 500px;
    height:  400px;
  }
</style>

这个是柱状图子组件的代码。
下面展示一些 内联代码片。

<template>
  <div>
    <div id="waterEcharts"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getWaterStatistics,getWaterEcologyList } from '_api/water'

export default {
  name: 'waterpie',
  data () {
    return {
      chart: null,
      options: {},
      datas: []
    }
  },
  props:{
    
  },
  created(){
    this.begin()
  },
  mounted () {
    
  },
  methods: {
    begin(){
      let params = {
      date: '',
      stnm: '',
      swtype : '1'
    } 
    getWaterStatistics(params).then(res => {
      if(res.data.success){
          var data = res.data.data
          for(var index in data){
              let number = Number(data[index])
              this.datas.push(number)
          }
          this.initChart()
      }
    })
    },
    initChart(){
      this.chart = echarts.init(document.getElementById("waterEcharts"));
      this.options = {
        grid:{
          left: 100
        },
        xAxis: {
            type: 'category',
            data: ['最清洁','清洁','轻污染','中污染','重污染','无数据'],
            axisLabel: {
              show: true,
                textStyle: {
                    fontSize: 14,
                    color: '#fff'
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
              show: true,
                textStyle: {
                    fontSize: 16,
                    color: '#fff'
                }
            }
        },
        series: [{
            data: this.datas,
            type: 'bar',
            
        }]  
      }
      this.chart.setOption(this.options);
    }
  },
  beforeDestroy(){}
}
</script>

<style lang="less" scoped>
  #waterEcharts{
    width: 500px;
    height:  400px;
  }
</style>

代码展示了，其实也蛮简单的。但是中间有几个坑，我一一叙说一下：
1.由于Echarts图需要通过DOM来挂载到HTML标签上去

document.getElementById("waterEcharts")

所以切记、切记、切记：不要随随便便起ID，因为即便是在不同的子组件，但是对于在同一个父组件，如果使用同一个ID，这个Echarts挂载是会出现问题的哦。
2.我们要知道Echarts图的挂载是需要通过DOM来进行，但是在Vue的生命周期函数中，执行到不同的函数的时候，代表的意义也是不一样的哦。运用DOM，必须要在页面编译完之后才能去挂载，所以不能在beforeCreate和Created两个函数里去调用对应的函数，应该在Mounted函数中去调用。切记！切记！