vue组件之echarts报表

vue组件之echarts报表

将echarts报表封装成组件，动态传入数据，显示图表。

1.饼状图

父组件：

<MPie :datas="piedata"></MPie>   <!--piedata为传入的数据-->

data:function(){
  return {
piedata:{
  htmldiv:\'mycharts2\',
  text: \'某站点用户访问来源\',
  subtext: \'纯属虚构\',
  name: \'访问来源\',
  data:[
    {value:335, name:\'直接访问\'},
    {value:310, name:\'邮件营销\'},
    {value:234, name:\'联盟广告\'},
    {value:135, name:\'视频广告\'},
    {value:1548, name:\'搜索引擎\'}
  　　　　]
　　　　}
　　}
}

子组件：MPie.vue

<template>
  <div id="MPie">
    <div :id="datas.htmldiv" style="height:100%;width:100%;min-height: 250px;"></div>
  </div>
</template>

<script>
  var echarts = require(\'echarts\')
export default {
  name: \'MPie\',
  data () {
    return {
    }
  },
  mounted(){
    var legendData=[];
    for(var i in this.datas.data){
      legendData.push(this.datas.data[i])
    }
    var option = {
      title : {
        text: this.datas.text,
        textStyle:{color:\'#333\'},
        subtext: this.datas.subtext,
        subtextStyle:{color:\'#aaa\'},
        x:\'center\'
      },
      tooltip : {
        trigger: \'item\',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: \'vertical\',
        bottom: \'bottom\',
        data: legendData
      },
      series : [
        {
          name: \'访问来源\',
          type: \'pie\',
          radius : \'55%\',
          center: [\'50%\', \'60%\'],
          data:this.datas.data,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: \'rgba(0, 0, 0, 0.5)\'
            }
          }
        }
      ]
    };
    var myChart = echarts.init(document.getElementById(this.datas.htmldiv));
    myChart.setOption(option);
    window.onresize = echarts.getInstanceByDom(document.getElementById(this.datas.htmldiv)).resize();
  },
  methods: {

  },
  props: {
    datas: {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

View Code

 

2.柱状图

父组件：

<MBar :datas="bardata"></MBar><!--piedata为传入的数据-->

bardata:{
  htmldiv:\'mycharts1\',
  text: \'某站点用户访问来源\',
  subtext: \'纯属虚构\',
  xAxisData: [\'Mon\', \'Tue\', \'Wed\', \'Thu\', \'Fri\', \'Sat\', \'Sun\'],
  data:[120, 200, 150, 80, 70, 110, 130]
}

子组件：MBar.vue

<template>
  <div id="MBar" style="">
    <div :id="datas.htmldiv" style="height:100%;width:100%;min-height: 250px;"></div>
  </div>
</template>

<script>
  var echarts = require(\'echarts\')
export default {
  name: \'MBar\',
  data () {
    return {
    }
  },
  mounted(){
    var option = {
      title : {
        text: this.datas.text,
        textStyle:{color:\'#333\'},
        subtext: this.datas.subtext,
        subtextStyle:{color:\'#aaa\'},
        x:\'center\'
      },
      xAxis: {
        type: \'category\',
        data: this.datas.xAxisData,
        axisLine:{
          lineStyle:{
            color:\'#000\',
          }
        }
      },
      yAxis: {
        type: \'value\',
        axisLine:{
          lineStyle:{
            color:\'#000\',
          }
        }
      },
      grid:{
        bottom:20,
        left:40,
        right:20,
        top:50
      },
      series: [{
        data: this.datas.data,
        type: \'bar\'
      }]
    };
    var myChart = echarts.init(document.getElementById(this.datas.htmldiv));
    myChart.setOption(option);
    window.onresize = echarts.getInstanceByDom(document.getElementById(this.datas.htmldiv)).resize();
  },
  methods: {

  },
  props: {
    datas: {}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

View Code