天道酬勤,学无止境

定制

echarts数据自我定制(四)--各种各样的柱状图

需求: 静态的,动态的,累积叠加的,横向的,竖向的 上图: 源代码来啦<!doctype html> <html> <head> <meta charset="utf-8"> <title>bar--实验 bar图展示,横向和竖向的,静态和动态的,混合色和单色的</title> <script src="../js/esl.js"></script> <script src="../js/jquery-1.7.1.js"></script> <script type="text/javascript"> /** 实验 bar图展示,横向和竖向的,静态和动态的,混合色和单色的 */ require.config({ packages:[ { name:'echarts', location:'../echarts-master/src', main:'echarts' }, { name:'zrender', location:'../zrender-master/src', main:'zrender' } ] }); //横向柱状图 var option1 = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'

2021-05-11 16:24:17    分类:博客    数据   定制   echarts   ajax

echarts数据自我定制(三)--实时数据传输,带回放功能

需求如下: 数据回放的动画展现。 1.展现过程中可以暂停数据,查看数据点的详细信息。 2.可以往回拖 3.可以重新动态播放 4.轴是时间轴,变化的。 先上图图 然后是源代码:<!doctype html> <html> <head> <meta charset="utf-8"> <title>area pic</title> <script src="js/esl.js"></script> <script src="js/jquery-1.7.1.js"></script> <script type="text/javascript"> require.config({ packages:[ { name:'echarts', location:'echarts-master/src', main:'echarts' }, { name:'zrender', location:'zrender-master/src', main:'zrender' } ] }); //ajax获取后台数据,x轴的name从数据库中读取 function fetchXname(){ var arr=new Array(); $.ajax( { url:"./control/AjaxService.php?method=GetXaxisname", dataType:"text", success

2021-05-11 16:24:04    分类:博客    数据   定制   echarts   ajax