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.clientWidth
if(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!!