关于ECharts的下载和使用方法

介绍

首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。

还是很酷的，B格一下子上来了，做需求的时候马上就升级成2.0版本（狗头）

1.下载

首先在官网 选择合适的下载版本
官网地址：http://echarts.baidu.com/

2.引入Echarts

<script src="__STATIC__/admin/lib/echarts-4.2.1/echarts.js"></script>

我用的是tp5框架，其他框架路径同理。

3.准备一个DIV容器
在自己需要创建图表的地方插入一个div，例子如下：

<div style="border:2px solid #666;width:40%;height:400px;float:left" id="chartmain"></div>

4.创建一个简单的图表
先去官网找到自己喜欢的图表
例子：树状图

下面是关键（在JavaScript标签里面实现）
（1）先获取div的id

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

（2）复制官网提供的代码

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',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    };

（3）使用刚才创建的图表

myChart.setOption(option);

最后刷新页面，效果就出来了