1.官方网站:
https://echarts.apache.org/zh/index.html
2.官方教程:5分钟上手ECharts
3.简介
ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
4.dome
- 获取 ECharts
可直接下载js文件,引入到项目中,下载地址:ECharts.js。 -
引入 ECharts
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script type="text/javascript" src="/js/echarts.min.js"></script> <!-- 引入jquery --> <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script> </head> </html>
- 绘制一个简单的柱状图
<body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); //向后台发送处理数据 $.post( "/web/weuser/getData", function(data){ // 指定图表的配置项和数据 var option = { title: { text: '用户注册量' }, tooltip: {}, legend: { data:['注册量'] }, xAxis: { data: data.category }, yAxis: {}, series: [{ name: '注册量', type: 'bar', data: data.totals }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); } ); </script> </body>
- 后端异步提供数据
@RequestMapping("/getData") @ResponseBody public Map<String, Object> getData() { Map<String, Object> map = new HashMap<>(); map.put("category", Arrays.asList("一月份", "二月份", "三月份", "四月份", "五月份")); map.put("totals", Arrays.asList(10, 20, 30, 50, 100)); return map; }
访问页面无法展示,提示:Uncaught ReferenceError: echarts is not defined
解决办法:
引入这行即可
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
页面展示效果: