ECharts框架的基本使用

1.第一步先下载一个echarts插件，
下载地址：http://echarts.baidu.com/

根据自己的需要任意下载一个就可；

2.第二步；

下载之后就是一个js文件，

把它放到你创建的文件夹里面

然后再引入进你写的html里面

引入之后就可编写你的HTML代码了，

3.第三步，
创建一容器，给他设置宽高，给他一个id；
例如：

<div id="main" style="width: 800px;height:400px;"></div>

以下为折线图实现的完整代码

<div id="main" style="width: 800px;height:400px;"></div><script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
title: {
text: '机票价格走势图'
},
tooltip: {},

//X轴的数值
xAxis: {
data: ["12-1", "12-10", "12-20", "12-30", "01-01", "01-10", "01-20", "01-30", "02-01", "02-10", "02-20", "02-30"]
},
yAxis: {
min: 0,
max: 1000
},
series: [{
name: '销量',
type: 'line',
data: [973, 752, 718, 885, 848, 890, 900, 972, 998, 825, 888, 949,800],
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
},

lineStyle:{
color:'blue'
},

},{
name: '销量',
type: 'line',
data: [723, 642, 618, 645, 648, 649, 700, 745, 618, 765, 779, 600],
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
},
lineStyle:{
color:'pink'
},
},{
name: '销量',
type: 'line',
data: [443, 352, 418, 345, 448, 349, 300,352, 418, 445, 348, 449,300],
markLine: {
data: [{
type: 'average',
name: '平均值'
}]
},
lineStyle:{
color:'green'
},
}]
};

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

实现的效果为；

最后的是>>如果有些属性不知道的话可以去API里面找，还有多种实例等。。。