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

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

1BI报表快速制作（搭建公司报表平台）

工具/原料

数据库做为数据源（MySQL、SQL Server、Oracle中的一种）

数据方报表工具

方法/步骤

增加一个数据源，可以是MySQL、SQL Server或Oracle数据库






增加一个图形报表








增加数据表，输入视图名或表名、或查询的SQL语句

然后预览数据










增加子图表

图表脚本：

{};  // {Echarts的option脚本}，默认不用写option=,这里为空，是为了在下面使用 option={}

var dataZoom_start=40;//定义Echarts的参数

var lable_isShow=true;

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {

//如果是移动端修改Echarts参数

dataZoom_start=60;

lable_isShow=false;

}

option={title:{                    text:'日销售趋势（无税）'                }, 

             tooltip:{},                                               
8b3c
 

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为数据表的编号，销售金额 为数据字段                }]}










现在可以在报表客户端登录查看报表了

手机端和PC端图表不一样（pc端的dataZoom比移动端要显示数据多，移动端不显示数据值，避免重叠现象）

注意事项

通过js参数控制echarts参数

使用数据方报表工具可以简化开发，只需要关注图表本身的option