vue echarts 日历

最新推荐文章于 2023-06-27 22:29:40 发布

星辰啊大海7857

最新推荐文章于 2023-06-27 22:29:40 发布

阅读量1k

点赞数

分类专栏： vue-element-admin开发

本文链接：https://blog.csdn.net/weixin_39107711/article/details/106051206

版权

在使用Vue集成Echarts日历插件时遇到错误：`Cannot read property 'pathes' of undefined`，该问题源于`events`方法中`this`的指向不正确。通过深入调查和调试，找到了解决方案。

摘要由CSDN通过智能技术生成

被卡住一小会

Cannot read property 'pathes' of undefined

是events方法的错误，查询发现是this的指向问题

initChart() {
      this.chart = echarts.init(document.getElementById('calendarchart'))
      this.option = {
        tooltip: {
        },
        calendar: [{
          left: 'center',
          top: 'middle',
          cellSize: 'auto',
          yearLabel: { show: false },
          orient: 'vertical',
          dayLabel: {
            firstDay: 1,
            nameMap: 'cn'
          },
          monthLabel: {
            show: false
          },
          range: '2020-03'
        }],
        series: [{
          type: 'custom',
          coordinateSystem: 'calendar',
          renderItem: this.renderItem,
          dimensions: [null, { type: 'ordinal' }],
          data: this.getVirtulData(2020)
        }]
      }
      this.chart.setOption(this.option, true)
    },
    renderItem(params, api) {
      var cellPoint = api.coord(api.value(0))
      var cellWidth = params.coordSys.cellWidth
      var cellHeight = params.coordSys.cellHeight

      var value = api.value(1)
      var events = value && value.split('|')

      if (isNaN(cellPoint[0]) || isNaN(cellPoint[1])) {
        return
      }
      const that =  this
      var group = {
        type: 'group',
        children: echarts.util.map(this.layouts[events.length - 1], function(itemLayout, index) {
          return {
            type: 'path',
            shape: {
              pathData: that.pathes[events[index]],
              x: -8,
              y: -8,
              width: 16,
              height: 16
            },
            position: [
              cellPoint[0] + echarts.number.linearMap(itemLayout[0], [-0.5, 0.5], [-cellWidth / 2, cellWidth / 2]),
              cellPoint[1] + echarts.number.linearMap(itemLayout[1], [-0.5, 0.5], [-cellHeight / 2 + 20, cellHeight / 2])