项目中引入和使用Echart的方法

1.首先在项目pom.xml文件中增加依赖。

<!--echarts图表集start-->
<dependency>
<groupId>org.webjars.bower</groupId>
<artifactId>echarts</artifactId>
<version>3.8.5</version>
</dependency>
<!--echarts图表集end-->

2.在HTML文件中定义一个div用来接收展示图表。

<div id="div" style="height:500px;width: 800px;"></div>

3.在JS文件中定义一个图标文件,并初始化。

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

4.在JS文件中定义编写图表的数据代码,echart官网有各种案例。

var option = {
  ... ...
};

5.在JS文件中为图表对象加载数据。

myChart.setOption(option);

6.在HTML文件中引入对应的js代码。

<script th:src="@{/js/charts.js}"></script>
posted on 2018-01-12 09:55  SailorMoon  阅读(5327)  评论(0编辑  收藏  举报