返回顶部

vue2 只显示x轴数据不显示y轴数据

vue2 只显示x轴数据不显示y轴数据

背景

在使用vue2的echarts画折线图发现只显示x轴数据,不显示y轴数据,现象如下:

 代码

复制代码
<script>
import { getData } from '../api'
import * as echarts from 'echarts'
export default{
  data() {
    return {
      tableData: [],
      tabelLabel: {...},
      countData: [...]
  mounted() {
    getData().then(({ data }) => {
      const { tableData } = data.data
      this.tableData = tableData

      // 基于准备好的dom,初始化echarts实例
      const echarts1 = echarts.init(this.$refs.echarts1)
      // 指定图表的配置项和数据
      var echarts1Option = {}
      // 处理数据xAxis
      const { orderData } = data.data
      const xAxis = Object.keys(orderData.data[0])
      const xAxisData = {
        data: xAxis
      }
      echarts1Option.xAxis = xAxisData
      echarts1Option.legend = xAxisData
      echarts1Option.yAxis = {}
      // console.log(xAxis)
      echarts1Option.series = []
      // 配置series
      xAxis.forEach(key => {
        echarts1Option.series.push({
          name: key,
          type: 'line',
          // key对应的orderData的所有值
          date: orderData.data.map(item => item[key])
        })
      })
      console.log(echarts1Option)
      // 使用刚指定的配置项和数据显示图表
      echarts1.setOption(echarts1Option);
    })
    
  }
}
</script>
复制代码

分析

只显示x轴数据,不显示y轴数据,那就是y轴数据问题,排查后发现是数据定义错误

解决方案

检查data定义错误,敲错单词了,修改为如下,正常显示折线图

echarts1Option.series.push({
  name: key,
  type: 'line',
  // key对应的orderData的所有值
  data: orderData.data.map(item => item[key])
})

 

posted @   九尾cat  阅读(156)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
历史上的今天:
2023-01-06 DenyHos黑白名单防ssh攻击
点击右上角即可分享
微信分享提示

目录导航