5个步骤上手ECharts

前言

枯燥的数据看起来索然无味,那么会动的数据会不会让你眼前一亮呢
ECharts插件可以帮助我们让数据可视化,通过各种图表让数据一目了然
今天花五分钟事件来了解一下这个炫酷的插件吧

---

一、Echarts是什么？

一个兼容主流浏览器，性能好，可流畅运行于PC与移动设备，可自定义常用图表（折线、柱状、散点、饼图等）的JS插件。

二、使用五部曲

1、下载并引入echarts.min.js

<script src="js/echarts.min.js"></script>

2、准备一个有大小的DOM容器

<style>
        .box {
            width: 450px;
            height: 450px;
            background-color: plum;
        }
    </style>
<div class="box"></div>

3、初始化echarts实例对象

var myChart = echarts.init(document.querySelector(".box"));

4、指定配置项和数据

ECharts官网上提供了很多实例，根据实际需要选择对应图表，可更改配置完成图表自定义

基础配置

• series

  • type 决定自己的图表类型如
    • line 线性图
    • pie 饼图
    • bar 柱状图
    • radar 雷达图
    • 诸如此类…

• xAxis：直角坐标系 grid 中的 x 轴

  • boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

• yAxis：直角坐标系 grid 中的 y 轴

• grid：直角坐标系内绘图网格。

• title：标题组件

• tooltip：提示框组件

• legend：图例组件

• color：调色盘颜色列表

总之配置可以到官网找自己心仪的图表，复制粘贴改改改。官网提供了很多实例，都有详细的配置解析，复杂的配置可以查询文档。

5、将配置项设置给echarts实例对象

myChart.setOption(option);

至此简单图表五部曲就大功告成啦！

---

总结

图表插件使用步骤简单记录，防止以后忘记。
下载引入插件 — 有大小的盒子— 初始化实例对象— 自定义图表配置— 将配置设置给实例对象