Incubator-echarts: 在vue 中 heatmap 按需加载报TypeError: Cannot read property 'get' of undefined

Created on 14 Jun 2019 · 4Comments · Source: apache/incubator-echarts

Version

4.2.1

Reproduction link

https://gallery.echartsjs.com/editor.html?c=xq9GwW2vNP&v=1

Steps to reproduce

<template>
      <div id="heatmapId" style="width: 100%;height: 600px;" />
</template>

<script>
// 引入 ECharts 主模块
const echarts = require('echarts/lib/echarts')
// 引入热力图
require('echarts/lib/chart/heatmap')
require('echarts/lib/component/visualMap')
export default {
  data() {
    return {

    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      var dom = document.getElementById('heatmapId')
// 下面复制官方例子
      var myChart = echarts.init(dom)
      var app = {}
      var option = null
      app.title = '笛卡尔坐标系上的热力图'

      var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
        '7a', '8a', '9a', '10a', '11a',
        '12p', '1p', '2p', '3p', '4p', '5p',
        '6p', '7p', '8p', '9p', '10p', '11p']
      var days = ['Saturday', 'Friday', 'Thursday',
        'Wednesday', 'Tuesday', 'Monday', 'Sunday']

      var data =[] // 具体看重现连接，这里太长新建不了issue

      data = data.map(function(item) {
        return [item[1], item[0], item[2] || '-']
      })

      option = {
        tooltip: {
          position: 'top'
        },
        animation: false,
        grid: {
          height: '50%',
          y: '10%'
        },
        xAxis: {
          type: 'category',
          data: hours,
          splitArea: {
            show: true
          }
        },
        yAxis: {
          type: 'category',
          data: days,
          splitArea: {
            show: true
          }
        },
        visualMap: {
          min: 0,
          max: 10,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '15%'
        },
        series: [{
          name: 'Punch Card',
          type: 'heatmap',
          data: data,
          label: {
            normal: {
              show: true
            }
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      if (option && typeof option === 'object') {
        myChart.setOption(option, true)
      }
    }
  }
}
</script>

What is expected?

是少引入什么包吗

What is actually happening?

怎么解决呢？

bug pending

Source

hlbj105

Most helpful comment

知道了，全部引入，再排除。。。
得到需要引入
require('echarts/lib/chart/line')
文档没详细说明依赖哪个包，建议加上吧，要不然按需加载都不知道加哪个包

hlbj105 on 14 Jun 2019

👍3

All 4 comments

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

Have a nice day! 🍵