526互联

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

发布时间 2024-01-06 21:20:14作者: 九尾cat

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])
})