echarts.min.js:22 Uncaught (in promise) Error: series.type should be specified.?

作者站长头像
站长
· 阅读数 9
<script>
export default {
  data () {
    return {
      chartInstance: null,
      allData: null
    }
  },
  mounted () {
    this.initChart()
    this.getData()
  },
  destroyed () {
    this.initChart()
    this.getData()
  },
  methods: {
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.stationyield_ref, 'chalk')
      const initOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          textStyle: {
            color: '#4c9bfd'
          },
          right: '10%'
        },
        grid: {
          left: '3%',
          top: '30%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#4c9bfd'
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#4c9bfd'
          },
          axisLine: {
            show: false // 去除轴线
          },
          splitLine: {
            lineStyle: {
              color: '#012f4a'
            }
          }
        },
        series: [
          {
            type: 'line',
            smooth: true
          }
        ]
      }
      this.chartInstance.setOption(initOption)
    },
    async getData () {
      const { data: ret } = await this.$http.get('http://127.0.0.1:8888/api/stock')
      console.log(1111)
      this.allData = ret
      this.updateChart()
    },
    updateChart () {
      const xAxisValue = this.allData.name
      const yAxisValue = this.allData.sales
      const dataOption = {
        xAxis: {
          data: xAxisValue
        },
        series: [
          {
            type: 'line',
            data: yAxisValue
          }
        ]
      }
      this.chartInstance.setOption(dataOption)
    }
  },
  adapterChart () {
    const adapterOption = {}
    this.chartInstance.setOption(adapterOption)
  }
}
</script>

<style lang="less" scoped></style>
回复
1个回答
avatar
test
2024-07-04

updateChart方法里面只是赋值了数据其它属性也要一起带上

updateChart () {
      const xAxisValue = this.allData.name
      const yAxisValue = this.allData.sales
     //建议将initOption放在data里面,然后这里可以使用this.initOption
      this.initOption.xAxis.data = xAxisValue
      this.initOption.series[0].data = yAxisValue
      this.chartInstance.setOption(this.initOption)
    }
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容