最近接到领导的要求，希望做一个电子化的档案，因为没找到合适的现成方案，决定自己动手，丰衣足食。本来已经做好了一部分前后端交互，结果遇上一些数据需要作图，卡住了。虽然我很急，但我觉得还是先别急，先好好看看js的数据可视化模块。

我采用的是ECharts是一款基于JavaScript的数据可视化图表库，该项目最早由百度开源，后捐赠给Apache基金会。

ECharts项目：echarts.apache.org/zh/index.ht...

ECharts拥有非常完整的项目文档和示例，并且示例非常丰富，因此可以很直观的查看所需图形的代码，而且还可以下载主题来快速提升图形的视觉效果。

内容太丰厚，就有点挑花眼了，因此先谈谈最基础的图表配置。

使用echarts.js

要使用echarts的第一步是在项目中引入echart，有两种方法：

方法一 ：可以在该地址直接下载项目的文件，并引入到html文件 echarts.apache.org/zh/download...

方法二：可以用CDN进行引入

<script src="<https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js>"></script>

第二步：是要初始化echart对象。在html文件中找一个合适的位置做一个div来存放图表，并设置好他的宽度和高度。

<div id="main" style="width: 600px;height:400px;"></div>

如果需要做一个自适应页面的变化效果，就不用添加宽度，而是用一个页面监听函数。

js 复制代码

<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });
</script>

然后将初始化的echarts关联到

var mCharts = echarts.init(document.querySelector(位置))

这里需要用document.querySelector()关联到存放图表的位置。

第三步：

完成以上步骤后就可以开始正式填写数据图表中的相关信息了，echarts提供了大量的配置参数以实现各种图表效果，这里先谈几个最基本的参数。关于图表的参数要放置在option参数区域内。

js 复制代码

var option = {
    xAxis:{},
    yAxis:{},
    series:[]
}

结合一个例子来讲解，现在有"阿坤", "阿伟", "VAN", "穿山甲", "杰哥"五个人，他们唱的成绩分别是：[90, 53, 81, 80, 62]现在需要做一个柱状图来查看他们的成绩。

js 复制代码

    var xDataArr = ["阿坤", "阿伟", "VAN", "穿山甲", "杰哥"]
    var yDataArr1 = [90, 53, 81, 80, 62]

横轴x的参数 xAxis：[type，data] 中有两个参数，type设置轴数据类型，data用来填写轴的值。在这个例子中，type: 'category'相当于把x轴设置成了类别维度，用来分类

js 复制代码

xAxis: {
    type: 'category',
    data: xDataArr
      }

竖轴y的参数 yAxis：中也有类似的参数配置。但这里我们不把数据data写在yAxis参数区域，我们设置yAxis的类型为值value。

js 复制代码

yAxis: {
    type: "value"
}

根据echarts手册，轴的数据类型：

'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。

series参数

ECharts 中的数据，一般存放于 series.data,他们称之为数据项，数据项中包含数据值。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。在我们的例子中 var yDataArr1 = [90, 53, 81, 80, 62]就是数据项。

seris中最基本的参数有name数据的名字,type图表类型和data数据。 bar代表柱状图。

js 复制代码

series: [
    {
        name: "唱",
        type: 'bar',
        data: [90, 53, 81, 80, 62]
    }
]

最后，把设置好的参数应用到初始化对象中。

mCharts.setOption(option)

完整代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>

<body>
    <div style="width: 600px;height: 400px;"></div>
    <script>
        var mCharts = echarts.init(document.querySelector("div"))
        var option = {
            xAxis: {
                type: 'category',
                data: ["阿坤", "阿伟", "VAN", "李云龙", "杰哥"]
            },
            yAxis: {
                type: "value"
            },
            series: [
                {
                    name: "唱",
                    type: 'bar',
                    data: [90, 53, 81, 80, 62]
                }
            ]
        }
        mCharts.setOption(option)
    </script>
</body>

</html>

这样，我们就完成了一个最基本的柱状图。

不过，这个柱状图还远远谈不上美观，想做出练习时长两年半一样的酷炫的效果还需要添加一些其他效果。

label标签

label标签用来在图形上显示数据，在使用label标签时，首先把show参数设置为true，show: true；position参数设置的是的位置，常用的位置有bottom、inside、top；color用来设置颜色，使用 RGB 表示颜色，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六进制格式，比如 '#ccc'，fontSize用来设置文字大小。

js 复制代码

label: {
    show: true,
    rotate: 60,
    position: "inside",
    color: "rgb(255, 255, 255)",
    fontSize: 18}

tooltip提示框

tooltip的作用是在鼠标划过时做一个提示框，这是一个很实用的参数。先用一个 show: true显示提示框，参数trigger选择触发类型，参数可以选择item 划过某个数据的区域时显示数据；也可以选择axis划过轴时显示数据。例如在做一个堆积折线图时，按月份分类，item可以用来一个个显示某月中的各类数据，而axis可以一次性显示当月的所有数据。

echarts.js学习笔记——制作一个简单的柱状图

使用echarts.js