echarts 图表建立步骤

需要引用的文件

<script src="web/mobile/js/jquery-1.8.3.min.js"></script>

<script src="web/mobile/js/echarts.js"></script>

html页面：

<div id="main2" style="width: 500px;height: 280px;"></div>

js部分：

$(function () {
// 运动/饥饿感/饮食echarts散点图
var myChart = echarts.init(document.getElementById('main2'));
option = {
color:['#A3C902'],
legend: {
data:['饮食']
},
grid: {
height:'200',
width:'450',
containLabel: true,
x: '9%',
x2: '1.5%',
y: '12%',
y2: '5%'
},
xAxis: {
name: '日期',
nameLocation: 'end',
nameTextStyle:{
color:'#1790CF',
align:'right',
baseline:'top'
},
type: 'category',
boundaryGap: false,
data: ['1', '', '3', '', '5', '', '7', '', '9', '', '11', '','13','','15','','17','','19','','21','','23','','25','','27','','29','','31'],
splitLine: {
show: true,
lineStyle:{
color: '#94999b',
width: 1,
type: 'solid'
}
},
axisLine: {
show: true,
lineStyle:{
color:'#94999b',
width: 0.5,
type: 'solid'
}
},
axisLabel: {
show: true,
interval:0
},
axisTick:{
show:true,
lineStyle:{
color:'#ccc'
}

}
},
yAxis: {
type: 'category',
boundaryGap: false,
data: ['6:00','','','','','','00:00','','','','','','18:00','','','','','', '12:00','','','','','','6:00'],
axisLabel: {
show:true,
interval:0
},
splitLine: {
show: true,
lineStyle:{
color: '#94999b',
width: 1,
type: 'solid'
}
},
axisLine: {
show: true,
lineStyle:{
color:'#94999b',
width: 0.5,
type: 'solid'
}
},
axisTick:{
show:true,
lineStyle:{
color:'#94999b'
}

}
},
series: [
name:'饮食',
type: 'scatter',
symbol:'rect',
data:[24,9.8, 9.7, 9.6, 9.2,8.9,0],
markPoint : {
symbol:'rect',
symbolSize:4,
itemStyle:{
normal:{
color:'#A3C902'

}

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);