前端笔记-JavaScript中放json数组要注意的地方（构造灵活的echarts）

最新推荐文章于 2024-02-03 15:33:00 发布

IT1995

最新推荐文章于 2024-02-03 15:33:00 发布

阅读量4.4k

点赞数 24

分类专栏： web前端 Vue 文章标签： WEB前端 echarts web Vue

本文链接：https://blog.csdn.net/qq78442761/article/details/98850041

版权

web前端同时被 2 个专栏收录

181 篇文章 6 订阅

订阅专栏

Vue

32 篇文章 3 订阅

订阅专栏

基本概念

代码与实例

基本概念

在放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>