目录

 

 

基本概念

代码与实例

---

 

基本概念

这个问题是在我使用echarts时出现的，因为echarts有这样的一个函数（官方实例）

let myChart = this.$echarts.init(document.getElementById(this.idStr));

这样的画就需要div的id号，为了使得这个id比较灵活，可以使用vue的绑定:id或者v-bind

这里要注意vue中的template要设置成如下：

<template>
  <div style="width: 500px; height:300px"></div>
</template>

因为在调用这个组件的时候，v-bind的是他template下第一层div。

绑定层如下：

这里还要绑定一个idStr，因为在调用的使用是得到id名

下面来看看浏览器的结果：

 

代码与实例

这里给出关键代码：

绑定层：

<template>
    <div>
        <div class="ui container">
            <PieGraph
                :dataValue="dataValue"
                :titleValue="titleValue"
                :idStr="pieGraph1"
                :id="pieGraph1"
            />
        </div>
    </div>
</template>

<script>
  import PieGraph from '../../echarts/PieGraph'
  export default {
    data(){
      return{
        pieGraph1: "HelloWorld"
      }
    },
    components: {
      PieGraph
    }
  }
</script>

echarts层所属的组件：

<template>
  <div style="width: 500px; height:300px"></div>
</template>

<script>
  export default {
    props: {
      idStr:{
        type: "",
        required: true
      }
    },
    mounted(){
      this.drawLine();
    },
    methods: {

      //开始画图了
      drawLine(){


        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById(this.idStr));

        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series: [
            {
              name:'访问来源',
              type:'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:[
                 {value:335, name: '直接访问'},
                 {value:310, name:'邮件营销'},
                 {value:234, name:'联盟广告'},
                 {value:135, name:'视频广告'},
                 {value:1548, name:'搜索引擎'}
              ]
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

      }
    }
  }
</script>