一学就会！！Vue整合Echarts图表

一学就会！！Vue整合Echarts图表

Part1：（栖息地）搭建环境

• 首先创建一个Vue项目作为演示，可以通过脚手架来快速创建即可

  • 
  • OK，一个清新的Vue项目搭建好了

• 现在我们把App.vue文件修改一下，然后运行项目，看看是否启动成功

  • 

• 启动项目（进入到项目路径下）

  npm run serve
  

  • 
  • 

• OK，启动测试完成，Next！

Part2：（骨架）引入Echarts

• 创建好Vue项目之后，我们既然需要使用Echarts，那么就需要将其安装到我们的项目当中

• 首先，进行Echarts的安装

  • 我们需要执行以下命令，让Echarts依赖存在于我们项目当中
  • 

  npm install echarts --save
  

• 做好这些，就可以准备在Vue文件中使用Echarts图表了

Part3：（目标）选择一个Echarts图

• 首先打开Echarts官网
  • http://echarts.apache.org/zh/index.html
• 我们可以在它的所有示例中找到各种方便实用的图表
  • 
• 这里选取了一个相对复杂的图表
  • https://echarts.apache.org/examples/zh/editor.html?c=mix-timeline-finance
  • 
• 下面我们来实现将其引入到Vue中，并能展示在页面上

Part4：（肝）开始造车

• 分析对应图表

  • 

• 右侧图表部分

  • 这一部分没什么好说的，就是效果图，我们可以直接操作图表，感受Echarts带来的效果

• 左侧代码部分（直接看完整代码部分）

  • 粗略来看可以分成三类

    • 引入部分
    • 属性部分
    • 方法部分

  • 引入部分

    • 以该例为例，是如下代码

    import * as echarts from 'echarts';
    

  • 这行代码的意思就是将Echarts引入到Vue文件中，然后就可以直接使用Echarts的功能了。

  • 属性部分

    • 如示例代码中的option、dataMap等，它们保存了一些原始数据或者Echarts图表渲染的属性值等

  • 方法部分

    • 如示例代码中的dataFormatter方法就是将原始数据进行格式化，转换为Echarts图表渲染所需要的形式

• 将Echarts官网的图表对应代码迁移到Vue文件中

  • 首先定义一下dataMap属性，保存不同类别的原始数据
    • 
  • 将示例中的格式化数据部分的代码作为方法在methods中创建
    • 
  • 创建dataFormatter方法
    • 
  • 创建渲染Echarts图表的方法
    • 
  • 在mounted方法中调用数据格式化和渲染图表方法（因为要获取页面中的DOM节点，所以需要放在mounted生命周期函数中调用），created中获取不到（getElementById）
    • 
  • 页面创建div容器，设置id（这里的id要和Echarts初始化时getElementById一致），并在style中设置宽高
    • 
    • 

• 重新启动项目即可

  • 需要注意一点就是，在引用一些属性时，需要改为this.xxxx

Part5：（栩栩如生）效果图

• 启动后打开网页即可

  • 

• 完整代码