vue 工程中加入 echarts 图表不显示的问题

一、问题原因

vue 引用 echarts 方式错误，高版本采用了低版本的引用方式

二、vue工程使用echarts

vue官方教程

1. 安装 echarts 组件

# 方法一	下载到工程目录的 node_moudles 目录 比较推荐		
npm install echarts --save
#方法二		下载到全局的包目录		（一般会出现引用问题）
npm install echarts -g

以上方式安装 echarts 包拉取时会下载最新的 echarts 组件，若想下载指定版本应该在组件名后指定版本，如下

npm install echarts@4.9,2 --save

2. 引用 echarts 组件

在 main.js 文件进行全局引用

//版本 4
import echarts from 'echarts'
//版本5
import * as echarts from 'echarts'

或针对单个 vue 组件可以使用以下方式（以下的组件加入 echarts 图表采用的便是这种引用方式）

 let echarts = require('echarts')

注意：版本不同，引入方式不同，引用方式错误会出现 js 代码中虽然增添 echarts 相关的代码，但是不会显示的问题

3. 创建 Echarts.vue 组件

将组件添加到 App.vue 中使用即可

<template>
  <div>
    <div>honog</div>
    <div id="myChart" :style="{width: '800px', height: '600px'}"></div>
    <div id="main"></div>
  </div>
</template>
<script>
export default {
  name: 'Echarts',
  mounted(){
    // 基于准备好的dom，初始化echarts实例
    let echarts = require('echarts')
    let myChart = echarts.init(document.getElementById('myChart'))
    // 绘制图表
    myChart.setOption({
      title: {
        text: '水果销量统计',
        left: 'center',
        top: 20,
        textStyle: {
          color: '#555555'
        }
      },
      tooltip: {},
      xAxis: {
        data: [
          "苹果",
          "香蕉",
          "橘子",
          "火龙果",
          "葡萄",
          "西瓜"
        ]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [
          {
            value: 333,
            itemStyle: {
              color: "#3fb1e3"
            }
          },
          {
            value: 133,
            itemStyle: {
              color: "#c4ebad"
            }
          },
          {
            value: 99,
            itemStyle: {
              color: "#c4ebad"
            }
          },
          {
            value: 222,
            itemStyle: {
              color: "#6be6c1"
            }
          },
          {
            value: 399,
            itemStyle: {
              color: "#3fb1e3"
            }
          },
          {
            value: 123,
            itemStyle: {
              color: "#c4ebad"
            }
          }
        ]
      }]
    });
  }
}
</script>

4. 工具方法

启动 vue 工程后，工程中没有报错，一般是在浏览器渲染中出现了错误，那么应该通过浏览器的控制台进行代码的规范的审查，应养成惯用浏览器检查的好习惯

三、参考链接

参考一：vue写echarts 报错 Cannot read property ‘init‘ of undefined“

标签：vue,color,itemStyle,value,图表,组件,echarts
来源： https://blog.csdn.net/weixin_44746306/article/details/118856249