养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

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

时间:2024-09-24 05:33:14

做报表开发的时候,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端使用不同的参数展示

© 一点知识