vue项目中ECharts图表库图表引入不显示问题

vue项目中ECharts图表库引入不显示问题

很多小伙伴在vue项目中引入 ECharts图表库不显示非常的苦恼，

在项目中引入 Apache ECharts问题：

Handbook - Apache ECharts    <==官方文档

---

个人简化版本：

1.在vue项目中安装echarts依赖包

npm install echarts --save

2. 在项目的main.js中放入：

import * as echarts from "echarts" //引入echarts

Vue.prototype.$echarts = echarts //注册组件

import * as echarts from "echarts" //引入echarts
Vue.prototype.$echarts = echarts //注册组件

2.在需要展示图表的页面xxx.vue中

以下是简单的示例：

 

<template>
  <div>
    <div id="myChart" style="width: 800px;height: 520px;"></div>
  </div>
</template>
<script>
// import * as echarts from 'echarts';

export default {
  name: "eCharts",
  data() {
    return {
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "在Vue中使用echarts" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
    },
  },
};
</script>

<style>
</style>

注意点：一定要设置宽高