关于echarts的简单介绍

前言

在对页面的设计过程中，难免存在一些需要运用图表来表示的情况，类似于天气预报等界面，本文就将介绍一个第三方库，来方便我们设计一些折线图，仪表盘等图表。

一、关于echar的介绍

        1、对于echarts的简单介绍以及网址

        首先，ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

官网链接：echarts官网

        2、关于js文件的引入

这里我采用的是直接引入其库文件地址的方法：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

除此之外，你也可以在HTML文件中引入Echarts库，在Echarts官方网站上下载最新版本的库文件，然后将其链接到你的HTML页面中。

二、示例

这里我选用折线图为例。

首先，创建一个div容器，作为折线图的展示区域。我们可以指定容器的大小和样式。

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

 然后，我们需要初始化echarts实例对象，在这个步骤中，需要指明图表最终显示在哪里的DOM元素。

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);

接下来是图表数据的配置，在这个过程中，我们需要对图表的x轴，y轴赋值并且给出相应的值。代码如下：

var option;

    option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

 最终效果如图：

总结

除此之外，echarts中还有其他很多种类的图表，仪表盘、饼状图等等等等，但是配置图表数据的方法都大同小异，本文只是简单对echarts进行简单的介绍和演示，希望可以帮助到大家。

---