Echarts图表在手机端和PC端使用不同的参数展示

 时间:2024-09-24 07:17:16

做报表开发的时候,Echarts是个很好的选择,虽然Echarts会在移动端自适应,但还是难以能在PC端和手机端都完美显示图表。

工具/原料

数据库做为数据源(MySQL、SQLServer、Oracle中的一种)

数据方报表工具

方法/步骤

1、增加一个数据源,可以是MySQL、SQLServer或Oracle数据库

Echarts图表在手机端和PC端使用不同的参数展示

2、增加一个图形报表

Echarts图表在手机端和PC端使用不同的参数展示

3、增加数据表,输入视图名或表名、或查询的SQL语句然后预览数据

Echarts图表在手机端和PC端使用不同的参数展示

Echarts图表在手机端和PC端使用不同的参数展示

4、增加子图表图表脚本:{};//{Echarts的optio艘绒庳焰n脚本},默认不用写option=,这里为空,是为了在下面使用泠贾高框option={}vardataZoom_start=40;//定义Echarts的参数varlable_isShow=true;if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)){//如果是移动端修改Echarts参数//执行相应代码或直接跳转到手机页面dataZoom_start=60;lable_isShow=false;}option={title:{text:'日销售趋势(无税)'},tooltip:{},toolbox:{show:true,feature:{dataView:{show:true,readOnly:true},saveAsImage:{show:true}}},grid:{},xAxis:{data:${55.日期},//55为数据表的编号,日期为数据字段axisLabel:{interval:0,rotate:45}},yAxis:{},dataZoom:[{show:true,start:dataZoom_start,end:100}],series:[{name:'销售金额',type:'line',label:{normal:{show:lable_isShow,position:'top',textStyle:{color:'black'}}},data:${55.销售金额}//55为数据表的编号,销售金额为数据字段}]}

Echarts图表在手机端和PC端使用不同的参数展示

Echarts图表在手机端和PC端使用不同的参数展示

5、现螅岔出礤在可以在报表客户端登录查看报表了手机端和PC端图表不一样(pc端的dataZoom比移动端要显示数据多,移动端不显示数据值,避免重叠现象)

Echarts图表在手机端和PC端使用不同的参数展示

Echarts图表在手机端和PC端使用不同的参数展示

狐友怎么注销账号? CAJViewerf阅读器怎么给caj文字添加下划线 Navicat怎么设置保持连接间隔? 如何使用mplab开发单片机程序? 养猪都有哪些圈舍?
热门搜索
平遥古城图片 ppt模板图片 路标图片 贴画图片大全 杨紫性感图片