前言：
眼前小伙伴们对“jquery数据报表”可能比较着重，看官们都想要学习一些“jquery数据报表”的相关内容。那么小编也在网络上汇集了一些有关“jquery数据报表””的相关知识，希望小伙伴们能喜欢，我们快快来学习一下吧！1.echarts
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图
官网：
2.案例2.1 引入echats.js
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script type="text/javascript" src="/resource/js/jquery-3.2.1.js"></script><script src="/resource/js/echarts.js"></script></head>2.2 页面
<!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script>// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var tname = []; //横轴 --条目var num = [];//纵轴--数量// 指定图表的配置项和数据var option = {title: {text: '分类统计表'},tooltip: {},legend: {data: ['数量']},xAxis: {data: tname},yAxis: {},series: [{name: '数量',type: 'line',data: num}]};// 使用刚指定的配置项和数据显示图表。$.get("/goods/getGoodsByType",function (list){ for(var i in list){ tname.push(list[i].tname) num.push(list[i].num) } myChart.setOption(option);})</script>2.3 controller@ResponseBody@RequestMapping("getGoodsByType")public List<Goods> getGoodsByType(){return goodsService.getGoodsByType();}2.4 dao<select id="getGoodsByType" resultType="com.bobo.pojo.Goods"> select count(id) num ,t.tname from t_goods g LEFT JOIN t_goodstype t on g.tid= t.tid GROUP BY g.tid</select>2.5 效果
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jquery数据报表
