一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情。

我正在参加码上掘金体验活动，详情：show出你的创意代码块。

前言

之前参加数学建模的时候需要将数据展示成图表形式，当时知道主流是MATLAB，pathon也可以，但是却不知道JS也可以绘制图表，甚至可以做出像地图、雷达图等更高级的东西。

Echart

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

通过一些简单的配置就可以做出丰富的界面。

图表容器

首先我们需要一个容器来放置我们的图表，通常有两种方式：

1. 在HTML中定义有宽度和高度的父容器

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
  let myChart = echarts.init(document.getElementById('main'));
</script>

通过div设置宽高来限制图表，这是官网推荐的方式。

2. 指定图表大小

<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'), null, {
    width: 600,
    height: 400
  });
</script>

折线图

今天主要讲解一下代码中出现的折线图。

折线图是一个典型的二维图标，具有x轴和y轴，我们首先定义x轴和y轴的数据。

let xDataArr = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
let yDataArr = [3000,2800,1000,800,700,140,1300,900,1000,800,600]

这部分根据自己的需求进行定义。

xAxis:{
    type:'category',
    data:xDataArr,
},
yAxis:{
    type:'value',
    scale:true
}

接下来将xAxis和yAxis填充，scale:true表示缩放，比如数据集中在很大的位置，如果从零开始就会显得可视化很低。

series

series设置一些参数，type:'line'表示这个图是折线图，通过type可以确定这个图表是什么图。

markLine:{
    data:[
        {
            type:'average',
            name:'平均值'
        }
    ]
},

markLine配置可以使图表展示平均值，并且不需要自己计算。

后记

Echart有很多有趣的东西，学习Echart既可以丰富自己的技术，也可以提高自己的兴趣。