ajax动态获取后台数据绘制echarts图表

Echarts是一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表,是一款很好用的前端报表制作工具。

动态获取后台数据绘制echarts图表可以使用jQuery的ajax()方法，动态获取json数据，对获取到的json数据挑选出你需要的，传给echarts图表。

示例效果。

贴个简易的代码，注释比较全了。


<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>
<script>//初始化echarts实例var myCharts = echarts.init(document.getElementById('main'));//指定图表的配置项和数据var option={title:{text:'ajax动态获取后台数据绘制echarts图表'},color:['#3398db'],      //调色盘颜色列表tooltip:{               //提示框组件trigger:'axis',     //触发类型（坐标轴触发）axisPointer:{type:'line'     //指示器类型（直线指示器）}},grid:{                  //直角坐标系内绘图网格left:'3%',          //grid组件离容器左侧的距离right:'4%',bottom:'3%',containLabel:true   //grid 区域是否包含坐标轴的刻度标签。},xAxis:[                                 //x轴{type:'category',                //坐标轴类型（类目轴）data:[],                        //类目数据axisTick:{                      //坐标轴刻度相关配置alignWithLabel:true         //刻度线与标签对齐}}],yAxis:[{type:'value'        //数值轴}],series:[                        //系列列表{name:'直接访问',type:'bar',barWidth:'60%',data:[]}]};myCharts.setOption(option);myCharts.showLoading();     //显示加载动画var x = [];var y = [];$.ajax({type:'get',url:'./data/obj.txt',dataType:'JSON',success:function(data){// console.log(data.data);data.data.map((item)=>{x.push(item.name);y.push(item.extn);})// console.log(x,y)myCharts.hideLoading();             //隐藏加载效果myCharts.setOption({xAxis:{type:'category',                //坐标轴类型（类目轴）data:x                    },series:{data:y}})}})</script>

当传过来的数据量比较多时，x轴的显示就会不全，现在已经发现这个问题了，所以先把txt文档里数据删的只剩下四条能显示全，关于x轴显示不全的问题下一篇解决。

ajax动态获取后台数据绘制echarts图表相关推荐

ECharts 折线图柱状图混合双Y轴利用ajax动态获取后台数据
效果图示如下后台代码用的框架是SSM 双Y轴根据后台数据展示大致代码如下: List<Map> findqushi(@Param("date_id") String ...
echarts图表动态获取后台数据详解（二）
前篇文章介绍了如何在现有的页面中,建立容器存放echarts图表,如何引入echarts.js文件,和配置图表库的路径.并将静态数据在页面上呈现出来.相当于是为动态获取后台数据做了铺垫.那么这篇文章, ...
使用 HighCharts 动态获取后台数据生成图表
在最近的一个小项目中,因为需要统计一些数据,便想着把它做成一个图表的样式更直观的显示.因为考虑到需要在页面上灵活的展示,所以就放弃了使用 jfreechart,很早便听说过 HighCharts这个生 ...
【看板】ajax动态获取后台传来json数据，加载到页面表格中
ajax动态获取后台传来json数据,加载到页面表格中摘要 1.WebApi 2.看板HTML 3.ajax获取后台传来的数据:在这里要注意声明提升,所以需要在for循环外var str1 = &q ...
vue绑定后台数据ajax,vueJS 获取后台数据绑定data
//vue 环境安装 http://blog.csdn.net/u013182762/article/details/53021374 一开始使用安装环境配置一些东西 ,后来发现太麻烦了 . 直接C ...
echarts html ajax,ECharts+Ajax动态加载数据实例（.NET）
什么是ECharts ECharts 是一个数据可视化工具,提供了系列常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折 ...
Echarts3通过ajax动态获取数据，30秒定时图表数据,设置图表线条颜色和粗细
Echarts3通过ajax动态获取数据,30秒定时图表数据,设置图表线条颜色和粗细代码块 <!DOCTYPE html> <head><meta charset=&q ...
ECharts动态加载数据绘制折线图
Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤连接数据接口,动态加载图表动态加载数据,整体代码折线图绘制总结绘制多个图表的方法 ECharts 纯Javasc ...
echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称描述 {color}back ...

ajax动态获取后台数据绘制echarts图表

ajax动态获取后台数据绘制echarts图表相关推荐

最新文章

热门文章