在阅读本篇文章之前，你已经阅读了：

本篇视频

本篇学习内容

  • 学习使用Echart制作图表
  • 参考Echart社区例子

 在数据可视化这一块，百度开源的Echart全球闻名。利用它能快速做出图表、还包括了很多炫酷的图表。
可视化例子

 直接按官方文档进行入门即可，需要基础的HTML、JS基础。
学习Echart

 并且可以在别人的例子上在线编辑修改，直接看效果。
echart在线编辑

Echart应用例子-实时温度曲线

 这里我简单地做一个实时温度拆线图，每秒生成一个随机温度，显示过去30秒的温度：

1
<div id="main" style="width: 600px;height:400px;"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
  title: {
    text: '实时温度'
  },
  xAxis: {
    type: 'category',
    data: []
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [],
    type: 'line',
    smooth: true
  }]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

setInterval(function () {
  var tem = 20 + Math.random().toFixed(2) * 10;
  tem = tem.toFixed(2); // 随机数模拟温度，只保留两位小数
  var time = new Date();
  option.xAxis.data.push(time.getMinutes()+':'+time.getSeconds());//给X轴 插入时间数据
  option.series[0].data.push(tem);//给Y轴 插入温度数据

  // 如果数据超过30个，把第一个数据删除。
  if(option.xAxis.data.length > 30){
    option.xAxis.data.shift()
    option.series[0].data.shift()
  }
  myChart.setOption(option);
}, 1000);

 以上例子是随机生成的模拟效果，此例子源代码可看项目的/基础教程/可视化基础教程/index.html。在实际使用上，会先从数据库取出历史数据生成图表，不会一开始没数据显示。然后随着温度传感器不断上报数据，服务器通过websocket向浏览器推送新数据，Echart图表实时刷新。具体实现可以看demo2。

参考Echart例子

 Echart例子里有很多漂亮的，现成的例子，简单修改就可以使用。使用时注意Echart的版本，新版的部分功能在旧版上不能生效。另外设置属性时主要查询配置文档

Echart实例图

聊聊3D可视化

 一般来说，Echart能满足90%的场景，而且有很多很炫的效果的社区例子也能直接修改使用，新手用Echart就够了。当然，工作了一两年的前端可能要想更灵活更个性化的图表，可以利用d3库。而3D可视化，可以使用three.js库，这个需要比较大的时间投入，很多客户特别喜欢3D可视化的效果。但是，萌新就别急着学这玩意了，别幻想一步登天。如果想学，可以看我在这个站点里写的另一个教程：《3D可视化教程(Web)》

FAQ

  1. Echart例子里，有使用到一个$这玩意，我复制过来后报错，请问这是什么。
    答： 这其实就是以前很火，前端必学的Jquery，后来随着Vue/React的出现，它的重要性已经没那么高了(旧版的教程里也有用到，所以有要求学Jquery的，后来重构删掉这部分代码后就不再要求学习了，以减轻读者的学习量），相关教程：jQuery 教程