一、 简单echarts
Echarts的使用：
1.下载echarts对应的js 去官网下载 然后找到dist 里面的echarts.js 拷贝进来 引用就可以。
2.在页面中引入下载的js
3.为图表提供一个带有高和宽的容器对象【div】
4.使用echarts初始化容器对象--%>
5.向echarts图表中设置要展示的数据和图表类型
6.为 ECharts 准备一个具备大小（宽高）的 DOM
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/12/5 0005 Time: 22:23 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.7.2.js"></script> <%--详情可参考echarts 官方文档。 文档的配置项手册去看咋配置的--%> <%-- 里面基本传的都是jaon 字符串 或者数组形式--%> <script> window.onload=function () { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); <%-- 指定图表的配置项和数据--%> var option = { title: { text: 'ECharts 入门示例', subtext:'echarts副标题', // 这下面的这个是标题下的一个数组 设置标题的颜色。 textStyle:{ color:'red', fontStyle:'italic', } }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, //y轴 yAxis: { axisLabel:{ formatter: '{value} 万元' } }, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] },{ name: '销量', type: 'line', data: [5, 20, 36, 10, 10, 20] }] }; <%-- // 使用刚指定的配置项和数据显示图表。--%> myChart.setOption(option); } </script> <html> <head> <title>Title</title> </head> <body> <div id="main" style=" 600px;height:400px;"></div> </body> </html>
二 、 与后端数据库 结合 使用echarts 、
2.1前端页面
<%-- Created by IntelliJ IDEA. User: Administrator Date: 2019/12/5 0005 Time: 22:23 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.7.2.js"></script> <%--详情可参考echarts 官方文档。 文档的配置项手册去看咋配置的--%> <%-- 里面基本传的都是jaon 字符串 或者数组形式--%> <script> $(function () { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var names =[]; var sellCount = []; $.ajax({ type:"GET", url:"${pageContext.request.contextPath}/emp/phone", success:function (result) { //遍历map key 是取出来的每个键， for (key in result.map.hashMap) { //因为要把取出来的值 放到x轴或者y轴的data 属性里面。 需要创建两个一位数组 把这两个数组放到x，y 对应data后面作为展示的数据。 names.push(key); sellCount.push(result.map.hashMap[key]); } <%-- 指定图表的配置项和数据--%> var option = { title: { text: 'ECharts 入门示例', subtext: 'echarts副标题', textStyle: { color: 'red', fontStyle: 'italic' } }, legend: { data: ['销量'] }, xAxis: { data: names }, yAxis: { axisLabel: { formatter: '{value} 万元' } }, series: [{ name: '销量', type: 'bar', data: sellCount }, { name: '销量', type: 'line', data: sellCount }] }; myChart.setOption(option); } }); }); </script> <html> <head> <title>Title</title> </head> <body> <div id="main" style=" 600px;height:400px;"></div> </body> </html>
2.2后端代码
//各个手机操作系统的使用情况分析 @RequestMapping(value = "/phone",method = RequestMethod.GET) @ResponseBody public ResultEntity getEchartData(){ Map<String, Object> map = new HashMap<String, Object>(); map.put("IOS", 1600); map.put("Android", 3000); map.put("Sambian", 1000); map.put("windows", 2000); return ResultEntity.success().put("hashMap", map); }
这样这个echarts 就结束了！！！！