1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" /> 6 <title></title> 7 </head> 8 <body> 9 <div id="echarts_bar" style=" 100vw; height:400px;"></div> 10 11 </body> 12 <!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> --> 13 <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> 14 <script type="text/javascript"> 15 var myChart = echarts.init(document.getElementById("echarts_bar")); 16 17 option = { 18 xAxis: { 19 axisLabel: { 20 // inside: true,//把坐标值放到表格外(默认为false) 21 textStyle: { 22 color: 'red' 23 } 24 }, 25 /* 轴--开始 */ 26 axisTick: { 27 show: false 28 }, 29 axisLine: { 30 show: false 31 }, 32 /* 轴--结束 */ 33 type: 'category', 34 data: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'] 35 }, 36 yAxis: { 37 axisLabel: { 38 textStyle: { 39 color: 'red' 40 } 41 }, 42 axisTick: { 43 show: false 44 }, 45 axisLine: { 46 show: false 47 }, 48 type: 'value' 49 }, 50 series: [{ 51 data: [120, 200, 150, 80, 10, 110, 130], 52 type: 'line',//bar 53 itemStyle: { 54 normal: { 55 color: new echarts.graphic.LinearGradient( 56 0, 0, 0, 1, 57 [ 58 {offset: 0, color: '#00FEFC'}, 59 {offset: 0.3, color: '#00AFFF'}, 60 {offset: 0.6, color: '#007DF2'}, 61 {offset: 1, color: '#1E5FCE'} 62 ] 63 ) 64 } 65 }, 66 markPoint: { 67 data: [ 68 {type: 'max', name: '最大值'}, 69 {type: 'min', name: '最小值'} 70 ] 71 } 72 }] 73 }; 74 75 myChart.setOption(option); 76 </script> 77 </html>