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]) })
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
2023-01-06 DenyHos黑白名单防ssh攻击