Cannot set property 'coorDim' of undefined

The type of this issue / Issue 类型

[ ] Bug report / Bug 报告

Not introduced by ECharts / 非 ECharts 本身问题

Problems about ECharts itself are not handled in this repo. / 本 repo 不负责处理 ECharts 本身的问题。

[ ] I've checked it's not a problem of ECharts itself. / 我已检查过，这个问题非 ECharts 本身的问题。

Details / 详情

How are you importing Vue-ECharts? / 你是如何引入 Vue-ECharts 的？

[ ] Bundled version/打包版本 (import ECharts from 'vue-echarts')

The version of Vue-ECharts you are using / Vue-ECharts 的版本

问题描述

修改官方实例（http://www.echartsjs.com/examples/editor.html?c=custom-gantt-flight）提示 Error in mounted hook: "TypeError: Cannot set property 'coordDim' of undefined"

代码


<template>
<div class="">
  <v-chart :options="polar" />
</div>
</template>
<script>
import ECharts from 'vue-echarts'

import {
  graphic,
  util,
  format
} from 'vue-echarts/node_modules/echarts/lib/export'

import rawData from './data';

export default {
  components: {
    'v-chart': ECharts
  },
  data() {
    return {
      polar: {
        tooltip: {},
        animation: false,
        title: {
          text: 'Gantt of Airport Flight',
          left: 'center'
        },
        dataZoom: [{
          type: 'slider',
          xAxisIndex: 0,
          filterMode: 'weakFilter',
          height: 20,
          bottom: 0,
          start: -60,
          end: 60,
          handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          showDetail: false
        }, {
          type: 'inside',
          xAxisIndex: 0,
          filterMode: 'weakFilter',
          start: -60,
          end: 60,
          zoomOnMouseWheel: false,
          moveOnMouseMove: true
        }, {
          type: 'slider',
          yAxisIndex: 0,
          zoomLock: true,
          width: 10,
          right: 10,
          top: 70,
          bottom: 20,
          start: 0,
          end: 100,
          handleSize: 0,
          showDetail: false,
        }, {
          type: 'inside',
          yAxisIndex: 0,
          start: 95,
          end: 100,
          zoomOnMouseWheel: false,
          moveOnMouseMove: true,
          moveOnMouseWheel: true
        }],
        grid: {
          show: true,
          top: 70,
          bottom: 20,
          left: 100,
          right: 20,
          backgroundColor: '#fff',
          borderWidth: 0
        },
        xAxis: {
          type: 'time',
          position: 'top',
          splitLine: {
            lineStyle: {
              color: ['#E9EDFF']
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            lineStyle: {
              color: '#929ABA'
            }
          },
          axisLabel: {
            color: '#929ABA',
            inside: false,
            align: 'center'
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          min: 0,
          max: rawData.parkingApron.data.length - 1
        },
        series: [{
          type: 'custom',
          renderItem: this.renderGanttItem,
          dimensions: rawData.flight.dimensions,
          encode: {
            x: [1, 2],
            y: 0,
            tooltip: [0, 1, 2]
          },
          data: rawData.flight.data
        }, {
          type: 'custom',
          renderItem: this.renderAxisLabelItem,
          dimensions: rawData.parkingApron.dimensions,
          encode: {
            x: -1, // Then this series will not controlled by x.
            y: 0
          },
          data: new util.map(rawData.parkingApron.data, (item, index) => [index].concat(item))
        }]
      }
    }
  },
  methods: {
    renderItem(params, api) {
      let yValue = api.value(2);
      let start = api.coord([api.value(0), yValue]);
      let size = api.size([api.value(1) - api.value(0), yValue]);
      let style = api.style();
      return {
        type: 'rect',
        shape: {
          x: start[0] + 1,
          y: start[1],
          width: size[0] - 2,
          height: size[1]
        },
        style: style
      };
    },
    renderGanttItem(params, api) {
      let categoryIndex = api.value(0);
      let arrival = api.coord([api.value(1), categoryIndex]);
      let departure = api.coord([api.value(2), categoryIndex]);

      let barLength = departure[0] - arrival[0];
      // Get the heigth corresponds to length 1 on y axis.
      let barHeight = api.size([0, 1])[1] * 0.6;
      let x = arrival[0];
      let y = arrival[1] - barHeight;

      let flightNumber = api.value(3) + '';
      let flightNumberWidth = new format.getTextRect(flightNumber).width;
      let text = (barLength > flightNumberWidth + 40 && x + barLength >= 180) ?
        flightNumber : '';

      let rectNormal = this.clipRectByRect(params, {
        x: x,
        y: y,
        width: barLength,
        height: barHeight
      });
      let rectText = this.clipRectByRect(params, {
        x: x,
        y: y,
        width: barLength,
        height: barHeight
      });

      return {
        type: 'group',
        children: [{
          type: 'rect',
          ignore: !rectNormal,
          shape: rectNormal,
          style: api.style({
            fill: api.value(3)
          })
        }, {
          type: 'rect',
          ignore: !rectText,
          shape: rectText,
          style: api.style({
            fill: 'transparent',
            stroke: 'transparent',
            text: text,
            textFill: '#fff'
          })
        }]
      };
    },
    renderAxisLabelItem(params, api) {
      let y = api.coord([0, api.value(0)])[1];
      if (y < params.coordSys.y + 5) {
        return;
      }
      return {
        type: 'group',
        position: [
          10,
          y
        ],
        children: [{
          type: 'path',
          shape: {
            d: 'M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z',
            x: 0,
            y: -20,
            width: 90,
            height: 20,
            layout: 'cover'
          },
          style: {
            fill: '#368c6c'
          }
        }, {
          type: 'text',
          style: {
            x: 24,
            y: -3,
            text: api.value(1),
            textVerticalAlign: 'bottom',
            textAlign: 'center',
            textFill: '#fff'
          }
        }, {
          type: 'text',
          style: {
            x: 75,
            y: -2,
            textVerticalAlign: 'bottom',
            textAlign: 'center',
            text: api.value(2),
            textFill: '#000'
          }
        }]
      };
    },
    clipRectByRect(params, rect) {
      return new graphic.clipRectByRect(rect, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
      });
    }
  },
  mounted() {}
}
</script>

ecomfe / vue-echarts

Cannot set property 'coorDim' of undefined #293