注意:必定要本身引入echarts庫javascript
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ transform: translate(50%,50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform-origin: translate(-50%,-50%); text-align: center; } </style> </head> <body> <!-- 爲 ECharts 準備一個具有大小(寬高)的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </body> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript"> var arr = [1,2,3,4,5,6]; var option = { tooltip : {/*鼠標跟隨效果*/ trigger: 'axis' }, legend: { /*中間的小圖標*/ data:['最高氣溫','最低氣溫'] }, //右上角工具條 toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis : [ { type : 'category', data : ['週一','週二','週三','週四','週五','週六','週日'], show:true, splitLine:{ show:true, } } ], yAxis : [ { type : 'value', name: '總戶數(戶)', axisLabel : { /*座標軸的刻度文字設置*/ formatter: '{value} °C', textStyle:{ color:"yellowgreen" } }, splitLine:{ /*網格線的設置*/ show:true, }, axisLine:{/*座標軸,軸線的設置*/ lineStyle:{ color:"red", } }, axisTick:{ /*座標軸刻度的設置*/ lineStyle:{ color:"blue", } }, }, { type : 'value', name:"戶均持股數(股/戶)", position :"right", /*軸的位置,默認是左邊*/ axisLabel : { formatter: '{value} °C' /*{value}指的series中對應的值, 能夠用回調函數設置*/ }, splitLine:{ /*網格線,不畫,*/ show:false, }, } ], series : [ { name:'最高氣溫',/*數據的名稱*/ type:'line', /*這個數據的類型,畫折線*/ data:[11, 11, 20, 13, 12, 13, 10], yAxisIndex:0, /*與上面y軸的數組中,第一組數據對應*/ }, { name:'最低氣溫', type:'line', data:[1, 4, 2, 5, 3, 2, 0], yAxisIndex:1, } ] }; var myChart = echarts.init(document.getElementById('main')); myChart.setOption(option); </script> <html>