从echart官网下载js，然后引入jq即可运行。足够简单应用了
关键词：echart控制：图标标题、数据标题、折线图、柱状图切换按钮、恢复刷新图表按钮、保存为图片按钮、坐标系控制、坐标数据、坐标倾斜角度、刻度位置、要显示的标线（平均值、最大值、最高点）、折线颜色、折线点颜色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>折线图</title> <script src="js/jquery.min.js"></script> <script src="js/echarts.js"></script> </head> <body> <div id="chart_box" style=" 100%;height:400px;margin:0 auto;"></div> </body> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart_box')); // 指定图表的配置项和数据 option = { title: { text: '图表标题',//图表标题 subtext: '近一周推广数据'//数据标题 }, tooltip: { trigger: 'axis' }, legend: { data:['日平均点击量','最高点击量'] }, toolbox: { show:true, feature: { dataZoom: { yAxisIndex: 'none' }, dataView: {readOnly: false}, //magicType: {type: ['line', 'bar']},//折线图、柱状图切换 //restore: {},//恢复，即刷新图表 //saveAsImage: {}//保存为图片 } }, grid:{//直角坐标系控制 left:50,//grid 组件离容器左侧的距离 top:70, right:40, bottom:50, }, xAxis: { //设置横坐标 type: 'category', axisLabel: {//横坐标的控制 show:true,//是否显示横坐标数据 rotate: 30,//坐标的倾斜角度 inside:false,//刻度是否朝内 margin:8,//标尺与轴线的距离，默认8 }, boundaryGap: false, data: ['05.02','05.03','05.04','05.05','05.06','05.07','05.08'] }, yAxis: { //设置纵坐标 type: 'value', axisLabel: { formatter: '{value}', rotate: 30,//坐标的倾斜角度 inside:true,//刻度是否朝内 } }, series: [ { name:'日平均点击量', type:'line', data:[400, 554, 1580, 1355, 1111, 1644, 1066], markPoint: { }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }, { name:'最高点击量', type:'line', data:[800, 1000, 1700, 1689, 1500, 1900, 2016], markPoint: { data: [ {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5} ] }, markLine: { data: [ {type: 'average', name: '平均值'}, [{ symbol: 'none', x: '90%', yAxis: 'max' }, { symbol: 'circle', // label: { // normal: { // position: 'start', // formatter: '最大值' // } // }, // type: 'max', // name: '最高点' }] ] },
itemStyle: {
normal: {
color: '#00FF00',//改变折线点的颜色
lineStyle: { //改变折线颜色
color: '#00FF00'
}
}
},
} ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </html>