基本步骤：
1.去 echarts 官网下载 echarts 包，下载的同时查看官网文档API
2.创建项目，并在html中引入下载的js文件
3.先 init 一个图表实例，再 myChart.hideLoading()
4.ajax 取数剧，用数据拼装 option
5.myChart.setOption()
大致就这5个步骤，也有好多小细节
这是一个效果图 根据自己的理解做的 如有不对请评论指导
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="height:400px;width: 600px"></div> <!-- ECharts单文件引入 --> <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")); var arr = [11,12,12,12,12,12,15] var option = { title : { //提示的标题 text: '这是一级大标题', subtext: '这是二级小标题' }, tooltip : { trigger: 'axis' //鼠标移入提示 none代表不提示 axis坐标轴触发 item数据项图形触发 }, legend: { //做标记 控制显示区域 这里写控制的控件的名字 data:['显示最高气温','显示最低气温'] }, toolbox: { //工具栏 可以导出图片 数据视图 动态类型切换 数据区域缩放 重置 show : true, //是否显示本工具栏 orient : 'horizontal', //工具栏的显示位置 默认 vertical为右边竖向 feature : { //各工具配置项 可以自定义工具名字 不过只能以my开头 mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ //直角坐标系grid中的x轴，一般情况下只能放两个 多于两个需要配置offset属性防止同位置的多个x轴的重叠 { type : 'category', //坐标轴的数据类型 boundaryGap : false, //坐标两边留白侧略 决定x轴的开始位置 data : ['周一','周二','周三','周四','周五','周六','周日'] //x轴的数据 } ], yAxis : [ { type : 'value', axisLabel : { //坐标轴设置 formatter: '{value} °C' //支持字符串拼接 } } ], series : [ //系列列表 对应legend { name:'显示最高气温', type:'line', data: arr, //[11, 11, 15, 13, 12, 13, 10], 可以使用变量 markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { //添加标示线 data : [ {type : 'average', name: '平均值'} ] } }, { name:'显示最低气温', type:'line', data:[1, -2, 2, 5, 3, 2, 0], markPoint : { data : [ // {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5} {type : 'min', name: '周最低'} ] }, markLine : { data : [ {type : 'average', name : '平均值'} ] } } ] }; myChart.setOption(option); // 为echarts对象加载数据 </script> </body> </html>
