实现echarts图表响应式效果

echarts图表响应式

最近应项目要求需要做响应式的echarts图表，开始在网上找了各种资源都没有找到如何操作。最后还是靠别人指点做出来的，其实多看看文档也能明白，不过没那个耐心，哈哈。不多说上干货！下面先举个栗子！

直接上代码吧！！

function echart_seven(date){var data = { "bieshu":[120, 132, 101, 134, 90, 230, 210],"gongyu":[220, 182, 191, 234, 290, 330, 310],"zhuzhai":[150, 232, 201, 154, 190, 330, 410],"legend":[{name:'平均值',icon:'pin'//修改图例样式},{name:'2017年',icon:'pin'},{name:'2018年',icon:'pin'}],"date":['1','2','3','4','5','6','7']}//中间第二个统计图开始var myChart7 = echarts.init(document.getElementById('mainCenterBottom1'));var    option = {color:['#FF6968','#50DAF4','#EEDA2D'],//图例颜色设置tooltip : {trigger: 'axis',textStyle:{fontSize :setFontSize(20),align:'left'},},legend: {itemWidth:setFontSize(22),itemHeight:setFontSize(12),textStyle:{color:'#fff',fontSize :setFontSize(16)},data:data.legend},//这一行是干货grid就代表网格线。只要把宽高设置成百分比就可以了，位置可以通过y值y2值x值和x2值调试。grid: {show:'true',borderWidth:'0',height:"60%",width:"80%",y:"20%",x:"12%"},calculable : true,xAxis : [{splitLine:{show:false},type : 'category',boundaryGap : false,axisLine: {show:false},axisTick: {show:false},data : data.date,axisLabel : {formatter: '{value}',textStyle: {color: '#fff',fontSize :setFontSize(16)}}}],yAxis : [{       splitLine:{lineStyle:{width:setFontSize(1.5),color:'#fff'}},type : 'value',axisLine: {show:false},axisTick: {show:false},axisLabel : {formatter: '{value}',textStyle: {color: '#fff',fontSize :setFontSize(16)}}}],series : [{name:'平均值',type:'line',data:data.bieshu,symbolSize: setFontSize(10),itemStyle : { normal:{lineStyle:{//color:'#50DAF4'//给线条设置颜色width:setFontSize(2)}}},},{name:'2017年',type:'line',symbolSize: setFontSize(10),itemStyle : { normal:{lineStyle:{//color:'#50DAF4'//给线条设置颜色width:setFontSize(2)}}},data:data.gongyu},{name:'2018年',type:'line',symbolSize: setFontSize(10),itemStyle : { normal:{lineStyle:{//color:'#EEDA2D'//给线条设置颜色width:setFontSize(2)}}},data:data.zhuzhai}]};myChart7.setOption(option);window.addEventListener("resize",function(){myChart7.resize();});}

以上就是直角系echarts响应式图的实现，没事儿可以多看看官方文档还是介绍的比较详细，至于其他的圆环图，饼图响应式可以通过series下面的radius : [‘100%’, ‘100%’]和center: [‘100%’,‘100%’]来调试比例。对了echarts字体是不能通过设置来实现响应式的。我的处理办法如下

 //echarts字体大小设置方法setFontSize = function(size){var windowWidth = document.body.clientWidthif(windowWidth>1024 && windowWidth<4000){return size*windowWidth/1920;}else if(windowWidth<=800){return size*windowWidth/600;}else if(windowWidth<1024){return size*windowWidth/800;}else if(windowWidth==1024){return size*windowWidth/1366;}else if(windowWidth>=4000){return size*windowWidth/1600;}}

在echarts设置字体的时候采用setFontSize （数字）就行了。代码写的有点low没有优化，根据自己的实际情况来就行了。继续去爬echarts的坑，see you！！

实现echarts图表响应式效果相关推荐

eCharts好看的响应式圆环饼图及文字附vue源码代码
先看一下echarts图表效果图表只要resize就会随着页面比例的变化而变化,但是图表中的标识字不可以哦,官方api不接受rem,vh,vw来调整字体大小. 有两种解决办法,第一种是监听页面元素, ...
ECharts+Bootstrap实现响应式中国地图
BootStrap+Echarts实现响应式中国地图效果图: 1315×860 具体代码实现 <!DOCTYPE html> <html lang="en"&g ...
《响应式网页设计》系列分享专栏
2019独角兽企业重金招聘Python工程师标准>>> <响应式网页设计>已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/ ...
判断两个图片的特征向量_响应式布局提高篇图片正确的打开方式
作者 | Brilliant Open Web团队编辑 | Aaron 本文承接上一章的内容,接着介绍响应式布局设计,主要讲如何实现响应式图片.通过对图片适配问题的说明,加深对响应式图片的理解,并分 ...
20个响应式网页设计中的“神话”误区
关于响应式网页的重要性我们已经证实了很长时间了,现在是该把焦点放到如何做出好的响应式网页设计的时候了.一起来看看吧! 虽然很多人都在谈论响应式网页,但并不是每个人都知道他们在说什么.很多时候你看到网上 ...
html5 box布局,使用Flexbox打造响应式网页网格布局
CSS3的Flexbox可以非常容易的制作出各种布局效果.前面我们已经结束了flexbox的基本使用方法,水平布局和垂直布局方法.这篇文章我们来看看如果制作具有响应式效果的flexbox双列网格布局效 ...
手机端与pc端页面html5,浅谈pc和移动端的响应式的使用
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早 ...
检测屏幕.html,15款html5响应式网站跨屏幕测试工具
手机.平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于html5+css3技术,目前越来越多的网站开始采用了响应式设计,而下面 ...
响应式网页设计的20个误区
响应式网页已经成为当下比较主流的设计形式,似乎每一个人都在谈论,但实际上并不是每一个人都真的懂得.以下总结了在进行响应式网页设计时的20个误区,你可以看看自身是否存在入其中所说的问题. 1.响应式网页 ...

实现echarts图表响应式效果

echarts图表响应式

实现echarts图表响应式效果相关推荐

最新文章

热门文章