ECharts使用步骤

前言

ECharts是一个常用java数据图形库，也是一款基于HTML5的图形库。图形的创建也比较简单，直接引用Javascript即可。使用这个库的原因主要有三点：
第一个是因为这个库是百度的项目，而且一直有更新，目前最新的是EChart 3；
第二个是这个库的项目文档比较详细，每个点都说明的比较清楚，而且是中文的，理解比较容易；
第三个是这个库支持的图形很丰富，并且可以直接切换图形，使用起来很方便；
ECharts官网：
ECharrts所需的js文件下载：

使用步骤

1、在项目的js文件中，将echarts.js放进去

2、在新建的HTML文件中，引入echarts.js

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

3、在HTML文件的体结构中添加代码

 <div id="main" style="width: 600px;height:400px;"></div>
    <script>// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

注意： < div >标签内主要是控制样式大小，但是id元素是必须的，也是很重要的，在下一句代码中使用document.getElementById(‘main’)获取了div对象，此处必须一致！！！！！！！

4、在echarts官网下载你需要的图形代码贴在下面。

	//在echarts官网下载你需要的图形代码贴在下面。

5、再讲下面的代码贴在后面，把< script >完善即可。

		 myChart.setOption(option);
    </script>

6、结果如图