E-charts之一个与页面多个图表并且自适应的方案
来源：互联网 发布：centos挂载硬盘分区 编辑：程序博客网 时间：2024/06/16 20:10
1.开始题主是使用了,flex布局发现是和echarts是不兼容的.会吧其他的几个表格都挤出去
2.后来调整了一下布局,并使用了官方推荐的.window.resize方法实现图表实时更新大小
3.废话不多说我还是直接上我的代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../public/resources/js/echarts.min.js"></script> <style> body{font-family:"Microsoft YaHei";font-size: 14px;;background: #eee} *{padding: 0;margin: 0} li{list-style: none} a{text-decoration: none;} table{width:100%;text-align:center;border-collapse:collapse;border-spacing:0; } table td{word-break: break-all; word-wrap:break-word} ul{display: flex;width: 100%} li{flex:1;height: 200px;border: 1px solid red;margin-right: 10px;} .memberData{width: 1200px; margin: 0 auto;} .e-chart-style{width: 100%;height: 200px;} .e-chart{position: relative;height: auto; width: 265.5px;margin-right: 22px;float: left;background: #fff;padding-left: 18px;} .newaddmember_t{winth:100%;line-height: 30px;height: 30px;color: #666;font-size: 12px;padding-right:18px;} .newaddmember_t .underline{;border-bottom: 1px solid #eee;} /*我的*/ /*随访次数的定位*/ .suifangtimes{position: absolute;top:76px;right:8%;} .suifangtimes p{color:#999;line-height: 22px;font-size: 12px;height: 22px;} @media (max-width: 1200px){ .memberData{width: 100%} .e-chart{width: 100%} } </style></head><body><div class="memberData"> <div class="e-chart"> <div class="newaddmember_t"> <div class="underline">新增会员 :</div> </div> <div class="e-chart-style" id="mychart1"> </div> </div> <div class="e-chart"> <div class="newaddmember_t"> <div class="underline">随访次数 :</div> </div> <div class="suifangtimes"> <p>30次</p> <p>10次</p> <p>15次</p> <p>20次</p> <p>25次</p> </div> <div class="e-chart-style" id="myChart2"> </div> </div> <div class="e-chart"> <div class="newaddmember_t"> <div class="underline">总消费 :</div> </div> <div class="e-chart-style" id="myChart3"> </div> </div> <div class="e-chart" style="margin-right: 0px;"> <div class="newaddmember_t"> <div class="underline">客单价 :</div> </div> <div class="e-chart-style" id="myChart4"> </div> </div></div><script>/*新增会员*/var myChart1 = echarts.init(document.getElementById('mychart1'));// 指定图表的配置项和数据var option1 = { tooltip : { //提示框 trigger: 'axis', //触发类型(坐标轴触发) alwaysShowContent:false, //是否永远显示提示框的内容 backgroundColor:'rgba(32,174,252,0.7)', //提示框的背景颜色 textStyle:{ //提示框浮层的文本样式 }, }, calculable : true, xAxis : [ { type : 'category', name:'(月)', //X轴名称单位 nameLocation:'end', //名称的位置 nameTextStyle:{ //名称的样式 color:'#999', fontSize:'12px' }, nameGap:0, //名称与X轴的距离 boundaryGap: true,//坐标的刻度是否在中间 min:'3',//坐标轴刻度最小值 max:'dataMax', //坐标轴刻度的最大值 axisLine:{//坐标轴线条相关设置(颜色等) lineStyle:{ color:'#ccc' } }, axisTick:{ //坐标轴刻度相关设置 length:'0' //我把长度设置成0了 }, axisLabel:{ //坐标轴刻度标签 margin:7, //刻度标签与轴线之间的距离 textStyle:{ color:"#999", //坐标轴刻度文字的颜色 fontSize:'12px' //坐标轴刻度文字的大小 } }, data : ['3','4','5','6','7','8','9','10'] } ],//X轴设置 yAxis : [ { type : 'value', //类型数值轴 name:'(人)', //坐标轴名称 nameTextStyle:{ //名称的样式 color:'#999', fontSize:'12px' }, nameGap:3, //名称与Y轴的距离 axisTick:{ //坐标轴刻度相关设置 length:'0' //我设置成0了 }, axisLine:{//坐标轴线条相关设置(颜色等) lineStyle:{ color:'#ccc' } }, axisLabel:{//坐标轴标签相关设置,距离颜色等 margin:7, //formatter: '{value} °C',//标签内容内置的格式转化器比如这个表示在后面加一个c textStyle:{ color:"#999", //坐标轴刻度文字的颜色 fontSize:'12px' //坐标轴刻度文字的大小 }, }, splitLine:{ //坐标轴分隔线。默认数值轴显示，类目轴不显示。 show:false } } ], grid:{ //直角坐标系内绘图网格 left:36 //由于1000显示被挡住了,所以我让他左移36px;这个功能类似于paddingleft }, series : [ //系列列表 { name:'人', //系列名称 用于tooltip的显示 type:'line', data:[360, 500, 400, 600, 530, 840, 540,350], itemStyle:{ //折线拐点的样式 normal:{ color:'#20aefc', //折线拐点的颜色 } }, lineStyle:{ //线条的样式 normal:{ color:'#20aefc', //折线颜色 } }, areaStyle:{ //区域填充样式 normal:{ //线性渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#b1e3fe' // 0% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 }], false) } }, markPoint : { //图标标注 data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } } ]};// 使用刚指定的配置项和数据显示图表。myChart1.setOption(option1);/*随访次数*/var myChart2 = echarts.init(document.getElementById('myChart2'));var option2 = { tooltip : { //提示框组件 trigger: 'item', //触发类型(饼状图片就是用这个) formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器 }, color:['#48cda6','#fd87ab','#11abff','#ffdf33','#968ade'], //手动设置每个图例的颜色 legend: { //图例组件 //right:100, //图例组件离右边的距离 orient : 'horizontal', //布局 纵向布局 图例标记居文字的左边 vertical则反之 width:40, //图行例组件的宽度,默认自适应 right:'20%', //图例显示在右边 设置数字就是离左边多远 y: 'center', //图例在垂直方向上面显示居中 itemWidth:10, //图例标记的图形宽度 itemHeight:10, //图例标记的图形高度 data:[ {name: '30%', icon: 'circle',}, // 强制设置图形为圆。 {name: '10%', icon: 'circle',}, {name: '15%', icon: 'circle',}, {name: '20%', icon: 'circle',}, {name: '25%', icon: 'circle',} ], textStyle:{ //图例文字的样式 color:'#333', //文字颜色 fontSize:12 //文字大小 } }, series : [ //系列列表 { name:'随访次数', //系列名称 type:'pie', //类型 pie表示饼图 center:['30%','50%'], //设置饼的原心坐标 不设置就会默认在中心的位置 radius : ['40%', '60%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形 itemStyle : { //图形样式 normal : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 label : { //饼图图形上的文本标签 show : false //平常不显示 }, labelLine : { //标签的视觉引导线样式 show : false //平常不显示 } }, emphasis : { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。 label : { //饼图图形上的文本标签 show : true, position : 'center', textStyle : { fontSize : '10', fontWeight : 'bold' } } } }, data:[ {value:30, name:'30%'}, {value:10, name:'10%'}, {value:15, name:'15%'}, {value:20, name:'20%'}, {value:25, name:'25%'} ] } ]}myChart2.setOption(option2);/*总消费*/var myChart3 = echarts.init(document.getElementById('myChart3'));var option3 = { tooltip : { //提示框 trigger: 'axis', //触发类型(坐标轴触发) alwaysShowContent:false, //是否永远显示提示框的内容 backgroundColor:'rgba(32,174,252,0.7)', //提示框的背景颜色 textStyle:{ //提示框浮层的文本样式 }, }, calculable : true, xAxis : [ { type : 'category', name:'(月)', //X轴名称单位 nameLocation:'end', //名称的位置 nameTextStyle:{ //名称的样式 color:'#999', fontSize:'12px' }, nameGap:0, //名称与X轴的距离 boundaryGap: true,//坐标的刻度是否在中间 min:'3',//坐标轴刻度最小值 max:'dataMax', //坐标轴刻度的最大值 axisLine:{//坐标轴线条相关设置(颜色等) lineStyle:{ color:'#ccc' } }, axisTick:{ //坐标轴刻度相关设置 length:'0' //我设置成0了 }, axisLabel:{ textStyle:{ color:"#999", //坐标轴刻度文字的颜色 fontSize:'12px' //坐标轴刻度文字的大小 } }, data : ['3','4','5','6','7','8','9','10'] } ],//X轴设置 yAxis : [ { type : 'value', //类型数值轴 name:'(元)', //坐标轴名称 nameTextStyle:{ //名称的样式 color:'#999', fontSize:'12px' }, nameGap:3, //名称与Y轴的距离 axisTick:{ //坐标轴刻度相关设置 length:'0' //我设置成0了 }, axisLine:{//坐标轴线条相关设置(颜色等) lineStyle:{ color:'#ccc' } }, axisLabel:{ //formatter: '{value} °C',//标签内容内置的格式转化器比如这个表示在后面加一个c textStyle:{ color:"#999", //坐标轴刻度文字的颜色 fontSize:'12px' //坐标轴刻度文字的大小 } }, splitLine:{ //坐标轴分隔线。默认数值轴显示，类目轴不显示。 show:false } } ], grid:{ //直角坐标系内绘图网格 left:36 //由于1000显示被挡住了,所以我让他左移36px;这个功能类似于paddingleft }, series : [ //系列列表 { name:'人', //系列名称 用于tooltip的显示 type:'line', data:[360, 500, 400, 600, 530, 840, 540,350], itemStyle:{ //折线拐点的样式 normal:{ color:'#fe739d', //折线拐点的颜色 } }, lineStyle:{ //线条的样式 normal:{ color:'#fe739d', //折线颜色 } }, areaStyle:{ //区域填充样式 normal:{ //线性渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ffbacf' // 0% 处的颜色 }, { offset: 1, color: '#ffffff' // 100% 处的颜色 }], false) } }, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } } ]};myChart3.setOption(option3);/*客单价*/var myChart4 = echarts.init(document.getElementById('myChart4'));var option4 = { tooltip : { //提示框 trigger: 'axis', //触发类型(坐标轴触发) alwaysShowContent:false, //是否永远显示提示框的内容 backgroundColor:'rgba(32,174,252,0.7)', //提示框的背景颜色 textStyle:{ //提示框浮层的文本样式 }, }, calculable : true, xAxis : [ { type : 'category', name:'(月)', //X轴名称单位 nameLocation:'end', //名称的位置 nameTextStyle:{ //名称的样式 color:'#999', fontSize:'12px' }, nameGap:0, //名称与X轴的距离 boundaryGap: true,//坐标的刻度是否在中间 min:'3',//坐标轴刻度最小值 max:'dataMax', //坐标轴刻度的最大值 axisLine:{//坐标轴线条相关设置(颜色等) lineStyle:{ color:'#ccc' } }, axisTick:{ //坐标轴刻度相关设置 length:'0' //我设置成0了 }, axisLabel:{ textStyle:{ color:"#999", //坐标轴刻度文字的颜色 fontSize:'12px' //坐标轴刻度文字的大小 } }, data : ['3','4','5','6','7','8','9','10'] } ],//X轴设置 yAxis : [ { type : 'value', //类型数值轴 name:'(人)', //坐标轴名称 nameTextStyle:{ //名称的样式 color:'#999', fontSize:'12px' }, nameGap:3, //名称与Y轴的距离 axisTick:{ //坐标轴刻度相关设置 length:'0' //我设置成0了 }, axisLine:{//坐标轴线条相关设置(颜色等) lineStyle:{ color:'#ccc' } }, axisLabel:{ //formatter: '{value} °C',//标签内容内置的格式转化器比如这个表示在后面加一个c textStyle:{ color:"#999", //坐标轴刻度文字的颜色 fontSize:'12px' //坐标轴刻度文字的大小 } }, splitLine:{ //坐标轴分隔线。默认数值轴显示，类目轴不显示。 show:false } } ], grid:{ //直角坐标系内绘图网格 left:36 //由于1000显示被挡住了,所以我让他左移36px;这个功能类似于paddingleft }, series : [ //系列列表 { name:'人', //系列名称 用于tooltip的显示 type:'line', data:[360, 500, 400, 600, 530, 840, 540,350], itemStyle:{ //折线拐点的样式 normal:{ color:'#53d0ab', //折线拐点的颜色 } }, lineStyle:{ //线条的样式 normal:{ color:'#9be4ce', //折线颜色 } }, areaStyle:{ //区域填充样式 normal:{ //线性渐变 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#abe8d6' // 0% 处的颜色 }, { offset: 1, color: '#fff' // 100% 处的颜色 }], false) } }, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { //标记线 data : [ {type : 'average', name: '平均值'} ] } } ]};myChart4.setOption(option4);window.onload=function(){ window.onresize = function () { myChart1.resize(); //会员数据图表 myChart2.resize(); //会员数据图表 myChart3.resize(); //会员数据图表 myChart4.resize(); //会员数据图表 }}</script></body></html>
0 0
- E-charts之一个与页面多个图表并且自适应的方案
- echart同一个页面，多个图表宽高自适应
- echart同一个页面，多个图表宽高自适应
- 多个Echarts图表浏览器自适应问题
- Echarts 如何设置多个图表自适应窗口大小
- 10个最好的免费Javascript图表生成方案
- echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据
- iOS图表Charts的使用
- echarts---一个页面内创建多个图表
- 关于页面动态创建多个highcharts图表所产生的问题汇总以及分析
- 框架：关闭多个activity的方案之一（用list记录create过的activity）
- UIWebView自适应高度,适合一个页面多个WebView
- iOS图表库Charts集成与使用
- 开发者必知的20个jQuery插件——之一jQuery+Flot可视化图表
- 移动web页面支持弹性滚动的3个方案
- 移动web页面支持弹性滚动的3个方案
- 移动web页面支持弹性滚动的3个方案
- 移动web页面支持弹性滚动的3个方案
- Ubuntu下编译ffmpeg、SDL、SDL_net库
- android stdio常用快捷键
- jdbcType与javaType的对应关系
- react-webpack2-完整案例
- 第八，九章
- E-charts之一个与页面多个图表并且自适应的方案
- Git
- Linux下命令行安装配置android sdk
- 常规双击回退键退出程序
- I/O复用(三)---epoll机制
- java连接ubuntu中的redis出错
- C++——math.h
- 安装xhprof 和 xhgui参考文章总结
- 173. Binary Search Tree Iterator(unsolved)
