介于上一次本菜鸟的代码过low,现在更新,可能还是low,望见谅
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { width: 100%; height: 100%; background-color: gray; } #myChart { width: 80%; height: 70%; position: fixed; top: 15%; left: 10%; } </style> <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="echarts3.2.2/echarts.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { var myColor = ['#45fda5', '#3ffd55', '#11da01', '#118b43', '#c3eb18', '#dfde14', '#eac736', '#ed5501', '#9d0700', '#e80c00' ]; var option = { backgroundColor: 'black', grid: { top: 15, left: 15, right: 15, bottom: 15, containLabel: true //轴上的数值 }, xAxis: { type: 'category', splitLine: false, boundaryGap: false, axisLine: { show: false, lineStyle: { color: myColor[0] } }, axisTick: { lineStyle: { color: myColor[0] } }, data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30] }, yAxis: { type: 'value', min: 0, splitLine: false, axisLine: { show: false }, axisTick: { show: false }, interval: 10, axisLabel: { formatter: function (value) { return value + " 个 -"; }, textStyle: { color: function (value) { //注意:当值大于999(三位)时,会以“1,0000”形式,所以要做以下处理 value = parseInt(value.replace(/,/g, "")); var idx = parseInt(value / 10); return myColor[idx > 9 ? 9 : idx]; } } } }, visualMap: { show: false, calculable: true, min: 0, max: 100, inRange: { color: [myColor[0], myColor[1], myColor[2], myColor[3], myColor[4], myColor[5], myColor[6], myColor[7], myColor[8], myColor[9]] } }, tooltip: { trigger: 'axis', axisPointer: { label: { textStyle: { color: "white" } } } }, series: [{ name: '人', type: 'line', symbol: 'none', //这句就是去掉折线上的点的 smooth: true, //这句就是让曲线变平滑的 hoverAnimation: true, lineStyle: { normal: { width: 5 } }, itemStyle: { normal: { opacity: 0 } }, data: [54, 86, 46, 45, 77, 96, 89, 88, 23, 38, 3, 66, 98, 43, 73, 76, 44, 16, 21, 14, 71, 8, 61, 65, 1, 68, 33, 69, 49, 24 ] }] }; var myChart = echarts.init($("#myChart").get(0));//get()方法作用:将jQuery对象转Dom对象 myChart.setOption(option); }); </script> </head> <body> <div id="myChart"></div> </body> </html>