您现在的位置是:首页 > 正文

echarts显示不确定项的图表

2024-01-30 20:19:00阅读 2

问题描述

提示:这里描述具体问题:在实际应用之中有时候不确定后端返回的数据需要显示在几个图表中,从数据中解析需要显示几张图表,每一次显示的数目都不一样。

<div
    class="test bg-grey-3 fixed-center"
    id="window"
    style="
      z-index: 1;
      display: none;
      overflow: auto;
  ">
    <q-btn
      flat
      round
      @click="close"
    />
    <div class="content">
      <!-- v-for 遍历父级div List里面是要遍历的图表-->
      <div class="main" v-for="(item,index) in List" :key="index">
        <!--自定义宽高的dom,用于放置图表-->
        <div class="bar" :id="item"></div>
      </div>
    </div>
  </div>
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.main {
  width: 350px;
  margin: 30px 0;
  height: 200px;
  margin-left: 70px;
  background-color: #FFFFFF;
}

.main .bar {
  width: 100%;
  height: 100%;
}

初始化图表,通过另一个按钮调用。

function Window (id) {
		const test = id.split('-')
        document.getElementById('window').style.display = 'grid'
        const myEchart = document.getElementsByClassName('bar') // 获取类名
        for (let i = 0; i < myEchart.length; i++) {
          const myChart = echarts.init(myEchart[i]) // 初始化echarts实例要在for循环内
          const option = {
            title: {
              text: test[0] + i,
              textStyle: {
                color: '#036',
                fontSize: 10
              },
              left: 'center',
              padding: [20, 0, 5, 0]
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              show: true,
              bottom: '10%',
              top: '6%',
              selectedMode: 'multiple',
              type: 'scroll',
              orient: 'horizontal',
              padding: [20, 10, 0, 35]
            },
            dataZoom: [{
              type: 'slider',
              show: true,
              xAxisIndex: [0],
              left: '5%',
              right: '8%',
              bottom: -5,
              start: 0,
              end: 100
            }],
            xAxis: [{
              name: '',
              data: []
            }],
            yAxis: [{
              name: '',
              type: 'value'
            }],
            axisLabel: {
              show: true,
              formatter: function (value) {
                return getYAxis(value)
              }
            }
          }
          myChart.setOption(option)
    }

显示数据

    function showChart (header, data) {
      for (const el in header) {
        const IdList = header[el].split('.')
        const id = IdList[0]
        const name = header[el]
        let chart
        chart = echarts.getInstanceByDom(document.getElementById(id))
        if (chart == null) {
          chart = echarts.init(document.getElementById(id))
        }
        const currSeries = chart.getOption().series
        let ind = 0
        for (; ind < currSeries.length; ind++) {
          if (currSeries[ind].name === name) {
            break
          }
        }
        let yData = []
        const xAxis = chart.getOption().xAxis[0].data
        if (currSeries[ind] !== undefined) {
          yData = currSeries[ind].data
        } else {
          currSeries.push({
            type: 'line',
            name: name,
            symboleSize: 5,
            barGap: 0,
            data: []
          })
        }
        for (const i in data[el]) {
          yData.push(data[el][i])
        }
        while (yData.length > xAxis.length) {
          xAxis.push(xAxis.length + 1)
        }
        currSeries[ind].data = yData
        const option = chart.getOption()
        option.xAxis[0].data = xAxis
        option.series = currSeries
        chart.setOption(option, true)
      }
    }

欢迎评论:

提示:欢迎大家在评论区讨论相关问题。
可以关注博主,我会持续更新工作中遇到的技术小砖头,供大家使用。
也可以在评论区告知好的小砖头或技术,我会收录。
还可以指出本博文错误,希望大家不吝赐教。

网站文章

  • 【笔记】Attention Is All You Need 论文分析1:流程介绍

    【笔记】Attention Is All You Need 论文分析1:流程介绍

    计算方法和encoder中的一致,但是输入数据有差别,因此Q,K,V的计算也有差别,具体如下输入的数据分为两部分,一部分是从MaskedMulti-HeadAttention经过归一化后的结果,一部分...

    2024-01-30 20:18:44
  • c++KMP算法

    c++KMP算法

    这是本人第一次写博客,整体瑕疵很多很多,写的不是特别清楚,可能只有自己能看懂吧哈哈哈,以后会注意的。原理容易理解,关键就是求pmt数组,自己太菜了弄了一个晚上才理解。

    2024-01-30 20:18:14
  • GESP2023年6月 c++二级考试答案详解

    GESP2023年6月 c++二级考试答案详解

    第 10 题 如果a为char类型的变量,且a的值为’C’(已知’C’的ASCII码为67),则执行cout 2);如果用两个int类型的变量a和b分别表达平行四边形的两条边长,用int类型的变量h表...

    2024-01-30 20:18:07
  • 【Kafka】Kafka基本操作指令

    【Kafka】Kafka基本操作指令

    2024-01-30 20:18:00
  • 一部手机失窃引发的惊心动魄的战争

    一部手机失窃引发的惊心动魄的战争

    来源:公众号“信息安全老骆驼”9月4日 ——7:30:正带着大娃在理发店理发,老婆过来告诉我,她在小区门口推着二娃蹲下买水果时婴儿车袋子里的手机被偷了。这时看到P40 pro上市,一年一...

    2024-01-30 20:17:31
  • Android SDK How to Install and Get Started

    Android SDK How to Install and Get Started

    Android SDK How to Install and Get Started1.IntroductionAndroid is anOperating System for mobile devicesdeveloped by Google, which is built upon Linux kernel. Android competes with App...

    2024-01-30 20:17:24
  • linux中为用户添加权限_如何在Google文档文件中为特定位置添加书签

    linux中为用户添加权限_如何在Google文档文件中为特定位置添加书签

    linux中为用户添加权限Documents canget pretty long. Bookmarks let you link to a particular location inside a ...

    2024-01-30 20:17:12
  • Linux 操作系统 NTP 客户端配置

    一、检查是否已经安装了 NTP 包可以用这条命令来确定:[root@NTPser ~]# rpm -qa | grep ntpntp-4.2.2p1-9.el5_4.1chkfontpath-1.10.1-1.1出现以上代码则表示已安装 NTP 包,否则用下面方法安装:代码:# rpm -ivh ntp-4.2.2p1-5.el5.rpm二、使用 root 用户登录,否则没有修改配置的...

    2024-01-30 20:16:44
  • 区区几行代码,就能全面实现 Python 自动探索性数据分析

    区区几行代码,就能全面实现 Python 自动探索性数据分析

    在本文中,我们介绍了10个自动探索性数据分析Python软件包,这些软件包可以在几行Python代码中生成数据摘要并进行可视化。通过自动化的工作可以节省我们的很多时间。Dataprep是我最常用的ED...

    2024-01-30 20:16:38
  • 【学习笔记】Unreal(虚幻)4引擎入门(三)

    【学习笔记】Unreal(虚幻)4引擎入门(三)

    UE4入门学习笔记第三弹

    2024-01-30 20:16:05