使用echarts做折线图组件出现报错Cannot read property 'get' of undefined该如何解决？

Question

在vue中使用echarts做一个简单的折线图组件出现报错：

这个该如何解决，代码如下：

<template>
    <div>
        <div ref="lineCharts" :style="{width:'600px', height:'400px'}"></div>
    </div>
</template>

<script>
import echarts from 'echarts';
export default {
    name: 'lineCharts',
    methods: {
        drawLine() {
            var drawMainLine = echarts.init(this.$refs.lineCharts),
                option = {
                    tooltip: {
                        trigger: 'axis',
                    },
                    xAixs: {
                        type: 'time',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    },
                    yAixs: [
                        {
                            type: 'value',
                            name: '温度',
                            position: 'left',
                        },
                        {
                            type: 'value',
                            name: '湿度',
                            position: 'right',
                        }
                    ],
                    series: [
                        {
                            name: '温度',
                            data: [820, 932, 901, 934, 1290, 1330, 1320],
                            type: 'line',
                            lineStyle: {
                                color: 'red',
                            }
                        },
                        {
                            name: '湿度',
                            yAxisIndex : 1,
                            data: [546, 234, 65, 434, 1231, 563, 2234],
                            type: 'line',
                            lineStyle: {
                                color: 'yellow',
                            }
                        }
                    ]
                };
            drawMainLine.setOption(option);
        }
    },
    mounted() {
        this.drawLine();
    },
}
</script>

Answer 1

lineCharts组件内全局寻找.get看是不是调用get的对象不存在

Answer 2

原因是 option 的格式与官方文档不一致

换成下面的即可

option = {
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'time',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis:  [
        {
            type: 'value',
            name: '温度',
            position: 'left',
        },
        {
            type: 'value',
            name: '湿度',
            position: 'right',
        }
    ],
    series: [
        {
            name: '温度',
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            lineStyle: {
                color: 'red',
            }
        },
        {
            name: '湿度',
            yAxisIndex : 1,
            data: [546, 234, 65, 434, 1231, 563, 2234],
            type: 'line',
            lineStyle: {
                color: 'yellow',
            }
        }
    ]
};

Answer 3

xaxis的type改成category。“Mon ”是string类型，不是time类型