调用官网的echarts实现网页中

页面中我写的自适应修改了好久可能有毛病

 

<div class="mCanvas">
<div id="main" class="canvas"></div>
</div>

 

样式

 

.mCanvas{width: 100%; padding: 10px 0px; height:270px; background: #ffffff !important;margin: 0 auto;text-align: center; overflow: hidden;}
.canvas{width:120%;height:270px; text-align: center; margin-left:-11%;}

 

 

 

 

 

js中需要调用并且写入这些

<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById("main"));
option = {
title: {
// text: '对数轴示例',
left: '',
},
tooltip: {
trigger: 'item',
formatter: '{a}:{c}'
},
legend: {
top:'10%',
left: '3%',
right:'3%',
data: ['收缩压', '舒张压', '心率'],
textStyle:{
fontSize :15//文字大小
}
},
xAxis: {
type: 'category',
name: '日期',
splitLine: { show: false },
data:['5/6', '5/10', '5/19', '5/24', '5/28'],
axisLabel:{
textStyle:{
fontSize :15//文字大小
}
},
nameTextStyle:{
fontSize:15//文字大小
}
},
grid: {
left: '5%',
right: '5%',
bottom: '10%',
containLabel: false
},
yAxis: {
type: 'log',
name: '',
axisLabel:{
textStyle:{
fontSize :15//文字大小
}
}
},
series: [{

name: '收缩压',
type: 'line',
data: [98, 100, 99, 97, 102, 99, 100, 99, 101]
},
{
name: '舒张压',
type: 'line',
data: [91, 92, 89, 99, 99, 80, 94, 90, 69]
},
{
name: '心率',
type: 'line',
data: [75, 60, 69, 67, 89,78, 77, 73, 71]
}
],
axisLabel:{
textStyle:{
fontSize :15//文字大小
}
}
};
window.onresize = myChart.resize;
// 为echarts对象加载数据
myChart.setOption(option);

 

 

在官网是自适应屏幕大小的但是在手机上也是但是效果很差，那两句样式个人觉得有毛病但是效果比刚引进来好看多了，还会研究研究