前端深刻之Vue篇 丨如何在项目中优雅的使用Echarts（上）

写在前面

最近因为一些不可抗力因素，我跳槽去了一家作高校教育服务的公司，刚入职就正好遇上了PC端项目的重构，而我主要负责数据可视化这一模块，其实作起来不算复杂，可是在使用Echarts的过程当中也踩到了一些坑。

因此有了这一文章，这一文章分为上下两篇，在本篇中我将主要介绍

• 如何在vue项目中使用Echarts
• 如何确保Echarts在页面中正常显示并可随窗口变化

但愿小伙伴阅读完以后能够在项目中掌握Echarts正确的使用方式，而且在个人基础上可以少踩一些坑。

话很少说，让咱们开始吧。

在vue项目中使用Echarts

安装

安装实际上是比较简单的，直接在项目中打开命令行工具，执行npm install echarts --save 也可简写为npm i echarts -S，即将Echarts安装到项目生产环境中。

安装完成以后咱们须要打开main.js文件，在上边找一个位置进行引入Echarts，并将其挂载到vue的原型中，具体代码以下

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
复制代码

使用

在简单安装并挂载原型以后，咱们便可在所须要的页面直接使用的。

首先咱们要创建一个容器，一个能够放置Echarts的空div

<div ref="myChart" style="width:100%;height:520px" id="myChart"></div>
复制代码

在这里我使用了ref来获取DOM节点，主要是为了不Echarts的容器尚未生成就进行初始化。

建立完容器以后便可使用数据对Echarts进行渲染了，为了方便各位小伙伴，我在此贴一个公共代码，须要在项目中使用Echarts的小伙伴能够直接复制啦~

mounted(){
	this.setMyEchart()  //页面挂载完成后执行
},
methods: {
    setMyEchart() {
        const myChart = this.$refs.myChart;  //经过ref获取到DOM节点
        if (myChart) {
            const thisChart = this.$echarts.init(myChart);  //利用原型调取Echarts的初始化方法
            const option = {};  //{}内写须要图表的各类配置，能够在官方案例中修改完毕后复制过来
            thisChart.setOption(option);  //将编写好的配置项挂载到Echarts上
            window.addEventListener("resize", function() {
                thisChart.resize();  //页面大小变化后Echarts也更改大小
            });
        }
    }
}
复制代码

使Echarts在页面中正常显示

在基本结构写完以后，就能够去Echarts官方示例找到你所须要的图，复制option中的内容粘贴到页面中option对象中便可。

这里我以雷达图为例进行展现，当我粘贴完代码以后页面是这样子的。

宽度只有100px，其实这是由于Echarts不识别百分比制，因此就会把100%识别为100px。当咱们修改了浏览器宽高以后，触发thisChart.resize();，图表也就能正常显示了，可是咱们不能在用户进来以后就改变浏览器宽高，官方建议咱们给Echarts容器设置具体宽高以保证显示，这显然不是一个很好的适配方案。

因此咱们应该设置动态的宽：这一步咱们首先要有一个宽度参照物（这个参照物能够是百分比的宽，由于咱们在获取宽的时候会被转化成真正的像素宽），参照物能够是chart的wrap，也能够是相邻宽度相同的DOM节点。

拿个人页面举例，获取下面这一块的宽度，假设这个div的类名为 content，那么咱们能够编写以下代码

document.querySelector('#myChart').style.width =  document.querySelector('.content').clientWidth
复制代码

这样就能够在一开始设置到具体的宽了，同时在变话浏览器宽高后也可以自适应的更改。

至于内容本身找到须要的进行修改就好，更多配置项能够参考这个连接进行学习。

结论

通过以上的学习，相信你已经初步了解了Echarts的用法，其实算是比较简单的，重要的仍是你想要展示什么，选择好以后复制到咱们的模板中就能够了。

在下篇中我将主要介绍如何将api接口返回的数据填充到Echarts中，三天内会更新出来，但愿有须要的小伙伴能够持续关注。

最后给出全部的代码吧，供你参考。

<div ref="myChart" style="width:100%;height:520px" id="myChart"></div>
<div class="content"></div>
<script>
mounted() {
    document.querySelector("#myChart").style.width = document.querySelector(".content").clientWidth;
    this.setMyEchart();
  },
  methods: {
      setMyEchart() {
        const myChart = this.$refs.myChart;  //经过ref获取到DOM节点
        if (myChart) {
            const thisChart = this.$echarts.init(myChart);  //利用原型调取Echarts的初始化方法
            const option = {
          tooltip: {
            confine: true,
            enterable: true //鼠标是否能够移动到tooltip区域内
          },
          legend: {
            // top : '96%',                    // 图例距离顶部边距
            textStyle: {
              coFlor: "#202124",
              fontWeight: "bold",
              fontSize: "14"
            },
            data: ["学生我的", "班级平均"]
          },

          calculable: true,
          color: ["#00CA90", "#4285F4"],
          radar: {
            name: {
              textStyle: {
                color: "#fff",
                backgroundColor: "#999",
                fontSize: "10",
                borderRadius: 3,
                padding: [3, 5]
              }
            },
            indicator: [
              { name: "出勤率", max: 1 },
              { name: "做业提交率", max: 1 },
              { name: "话题参与率", max: 1 },
              { name: "表现得星数", max: 1 },
              { name: "互动参与率", max: 1 }
            ],
            radius: 80
          },
          series: [
            {
              type: "radar",
              data: [
                {
                  value: [
                      0.85,0.94,0.24,0.56,0.23
                  ],
                  name: "学生我的"
                },
                {
                  value: [
                    0.90,0.85,0.37,0.85,0.52
                  ],
                  name: "班级平均"
                }
              ]
            }
          ]
        };  //这里是我配置好的一个雷达图，你能够复制到echart示例网查看效果
            thisChart.setOption(option);  //将编写好的配置项挂载到Echarts上
            window.addEventListener("resize", function() {
                thisChart.resize();  //页面大小变化后Echarts也更改大小
            });
        }
      }
    }
  }
</script>
复制代码

结语

以上就是本文章的所有内容了，若是有不正确的地方欢迎指正。

感谢您的阅读，若是感受有用不妨点赞/转发。

前端深刻系列是一个踩坑系列，是由我本人对工做和学习中所遇到的问题和踩过的坑的一个探索与总结，在此记录分享出去，同时也是对自我技能的一个反思和追问。

前端路漫，踩坑不断。

前端深刻系列持续更新中……

以上2020-01-13。