首页 » PHP » 正文

echarts做折线图,手机端图表显示不全的问题

shengao

最近有个项目需要用到echarts来实现一个手机端、微信端的折线图功能,发现在pc端是正常的,放到移动端后图表显示不全,后边被截掉一部分。谷歌了一下,原来是x轴的interval参数设置问题。

首先引入js:

 <script language="javascript" src="js/echarts.simple.min.js"></script>

设置容器:

<div id="chart1" name="chart1" style="height: 400px; width: 100%;"></div>

配置echarts:

<script language="javascript">
var myChart = echarts.init(document.getElementById('chart1'));
var optionxxx = {
    title: {
        text: '这里是标题',
        subtext: '',
		x:'center',
		y:'top',
		textAlign:'center'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['']
    },
    xAxis: {
	axisLabel:{interval:0,rotate:-60},
        type: 'category',
        boundaryGap: false,
        data: [<?=$final1?>]
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '',
        type: 'line',
        smooth: true,
        itemStyle : { normal: {label : {show: true}}},
        data: [<?=$final2?>]
    }]
};
myChart.setOption(optionxxx);
</script>

$final1为x轴数据,数据格式:’2016-11-21′,’2016-11-22′,’2016-11-23′,’2016-11-24′,’2016-11-25′,’2016-11-27′,’2016-11-28′,’2016-11-29′

$final2为y轴数据,数据格式:240,230,220,203,203,201,280,280

关键配置:axisLabel:{interval:0,rotate:-60}, ,interval参数设置为0,即可解决手机端显示不全的问题。

博主的文章或程序如果给您带来了价值,感谢您打赏一二
微信扫码支付 支付宝扫码支付

发表评论