利用ECharts在线生成图表

我们可以使用ECharts获取后台数据，通过Ajax，JavaScript在线生成图表。

我们制作测试用例，就不使用自动加载，采用手动方式进行生成，让流程直观。

<a href="#" target="rightFrame" οnclick="showSale()">查看销售额</a>

<script type="text/javascript">function showSale() {$("#main").css("display", "block");var myChart = echarts.init(document.getElementById('main'));var option = {title: {text: '门店年销售额'    //显示在图表左上角  可以认为是图表的名字},tooltip: {},  //Echarts提示框（tooltip）浮层位置，不设置时，默认位置会跟随鼠标的位置。legend: {data: ["销售额"]       //用于设置图表样式 例如上下间距/颜色 type:plain\scroll 分为普通样式/滚动翻页},xAxis: {//X坐标显示什么  //通过后台获取data: []     },yAxis: {},//Y坐标显示什么  不设置 会根据返回数据进行自动设置series: [{//中间显示的数据name: '销量',            type: 'bar', //echarts 里系列类型就是图表类型，比如line（折线图），bar（柱状图），pie（饼图）等，详细可以参考echarts官网手册。data: []      //通过后台返回}]};//设置加载动画myChart.showLoading();//定义数组来接受后台返回数据var names = [];//用于接受名称var sales = [];//用接受销量//利用ajax请求发起数据请求$.ajax({url: "showsale",type: "post",data: {},dataType: "json",success: function (result) {console.log(result)for (var i = 0; i < result.length; i++) {names.push(result[i].name)//往最后一个元素追加}for (var i = 0; i < result.length; i++) {sales.push(result[i].sale)//往最后一个元素追加}//隐藏加载动画myChart.hideLoading();//将数据覆盖进入列表myChart.setOption({xAxis: {data: names},series: [{data: sales}]})}});// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);
//设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。}
</script>

后台代码：

@WebServlet("/showsale")
public class ShowSaleServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse response) throws ServletException, IOException {System.out.println("ShowSale 接受请求");response.setContentType("text/text");response.setCharacterEncoding("UTF-8");DoorDao doorDao=new DoorDao();try {List<Door>  list=doorDao.showSale();System.out.println(list);Gson gson=new Gson();String json=gson.toJson(list);System.out.println(json);//通过输出流返回给浏览器response.getWriter().write(json);} catch (SQLException e) {e.printStackTrace();}}
}

结果图：

利用ECharts在线生成图表相关推荐

php mysql echarts动态生成图表
php mysql echarts动态生成图表,数据库和表格使用的java Servlet echarts 图表生成的一样数据,不知道的看我前面一篇博文:需要两个文件完成 1. 数据获取文件 week ...
Echarts动态生成图表，图表类型进行切换，长数据区域展示
话不多说,先上效果图! 帧率调的有点高,图片跳的像赶去投胎
echarts生成图表超出父容器问题解决
问题描述: 前端开发在使用echarts图表时,偶尔会出现超出父级容器宽度或高度的情况. 情景:给echarts设置了100%宽高,父容器设置了固定的宽高,出现图表占满不了父容器或者溢出容器的情况 ...
如何利用echarts图表获取条状图点击名称和值
如何利用echarts图表获取条状图点击名称和值听语音 | 浏览:1505 | 更新:2017-06-13 10:20 | 标签:软件 1 2 3 4 5 6 7 分步阅读 echarts图表插件工 ...
Day215.课程详细页面功能完善、Echarts统计分析模块[生成统计数据+生成图表]前后端整合 -谷粒学院
谷粒学院课程详细页面功能完善一.修改课程详细接口 1.在service_order模块添加接口用于判断订单中status值是否为1,为1则为已支付 @RestController @CrossO ...
mysql的可视化图表_利用ECharts可视化mysql数据库中的数据
这是工程所有文件的一个目录工程文件目录我做了一个柱状图,一个饼状图,一个折线图,配置过程很恶心,出了好多错,所以在这里记录一下. 如果想直接看 echarts 的部分,可以跳过下面数据库的建立. ...
js插件---在线类似excel生成图表插件解决方案
js插件---在线类似excel生成图表插件解决方案参考文章: (1)js插件---在线类似excel生成图表插件解决方案 (2)https://www.cnblogs.com/Renyi-Fan/ ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
利用Echarts+Springboot实现数据可视化数据可视化 Spring实现简单的数据可视化自定义可视化图表
最近在做大数据项目,先做了个数据可视化. 简单来说就是: 利用Echarts + Springboot实现数据可视化 Echarts:调用Echarts.js的API实现图标数据展示 (echart ...

利用ECharts在线生成图表

利用ECharts在线生成图表相关推荐

最新文章

热门文章