目录

基本概念

代码与实例

基本概念

在放json数组的时候，打印调试的时候不要使用alert，使用console.log进行打印，如下图：

alert截图如下：

使用console.log

通过这种方式，就能对echarts进行灵活的配置：

对比下这几种方式：

代码与实例

<template>
  <div style="width: 500px; height:300px"></div>
</template>
 
<script>
  export default {
    props: {
      dataValue: {
        type: Array,
        required: true
      },
      titleValue: {
        type: Array,
        required: true
      },
      idStr:{
        type: "",
        required: true
      }
    },
    mounted(){
      this.drawLine();
    },
    methods: {
 
      //开始画图了
      drawLine(){
 
        if(this.dataValue.length != this.titleValue.length){
 
          alert("error the this.dataValue.length != this.titleValue.length");
          return;
        }
 
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById(this.idStr));
 
 
        let showData = [];
        for(let i = 0; i < this.dataValue.length; i++){
 
          let jsonData = {"value": this.dataValue[i], "name": this.titleValue[i]};
          showData.push(jsonData);
        }
 
        // 指定图表的配置项和数据
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            //data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            data: this.titleValue
          },
          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: showData
            }
          ]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
 
      }
    }
  }
</script>