echarts入门基础，画折线图

2016-12-14 22:47 muamaker 阅读(3244) 评论(0) 编辑收藏举报
注意：一定要自己引入echarts库
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
transform: translate(50%,50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform-origin: translate(-50%,-50%);
text-align: center;
}
</style>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script type="text/javascript" src="js/echarts.js"></script>
<script type="text/javascript">

var arr = [1,2,3,4,5,6];
var option = {

tooltip : {/*鼠标跟随效果*/
trigger: \'axis\'
},
legend: { /*中间的小图标*/
data:[\'最高气温\',\'最低气温\']
},

//右上角工具条
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: [\'line\', \'bar\']},
restore : {show: true},
saveAsImage : {show: true}
}
},


xAxis : [
{
type : \'category\',

data : [\'周一\',\'周二\',\'周三\',\'周四\',\'周五\',\'周六\',\'周日\'],
show:true,
splitLine:{
show:true,
}
}
],
yAxis : [
{
type : \'value\',
name: \'总户数(户)\',
axisLabel : { /*坐标轴的刻度文字设置*/
formatter: \'{value} °C\',
textStyle:{
color:"yellowgreen"
}
},
splitLine:{ /*网格线的设置*/
show:true,
},
axisLine:{/*坐标轴，轴线的设置*/
lineStyle:{
color:"red",
}
},
axisTick:{ /*坐标轴刻度的设置*/
lineStyle:{
color:"blue",
}
},



},
{
type : \'value\',
name:"户均持股数(股/户)",
position :"right", /*轴的位置，默认是左边*/
axisLabel : {
formatter: \'{value} °C\' /*{value}指的series中对应的值， 可以用回调函数设置*/
},
splitLine:{ /*网格线，不画，*/
show:false,
},

}

],
series : [
{
name:\'最高气温\',/*数据的名称*/
type:\'line\', /*这个数据的类型，画折线*/
data:[11, 11, 20, 13, 12, 13, 10],
yAxisIndex:0, /*与上面y轴的数组中，第一组数据对应*/

},
{
name:\'最低气温\',
type:\'line\',
data:[1, 4, 2, 5, 3, 2, 0],
yAxisIndex:1,

}
]
};



var myChart = echarts.init(document.getElementById(\'main\'));
myChart.setOption(option);

 


</script>
<html>
分类 echarts