ECharts的基本使用

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

1：下载并引入echarts.js文件
https://echarts.apache.org/zh
选择下载里面适合自己的版本

2：准备一个具备大小的DOM容器

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

<div class="box">
    </div>

3：初始化echarts实例对象

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

4：指定配置项和数据(option)

var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

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

 myChart.setOption(option);

这样就能得到一个柱状图啦

也有许多种不同类型的数据可视化方式，可以去官网详看。

下面是一些基础相关配置，可以根据自己的需要进行修改
title：标题组件
tooltip：提示框组件
legend：图例组件
toolbox: 工具栏
grid：直角坐标系内绘图网格
xAxis：直角坐标系 grid 中的 x 轴
yAxis：直角坐标系 grid 中的 y 轴
series: 系列列表。
color：调色盘颜色列表