1 <html> 2 <head> 3 <meta name="viewport" content="width=device-width" /> 4 <title>條形圖</title> 5 @*echarts畫圖必須要引用的*@ 6 <script src="~/Scripts/echarts.min.js"></script> 7 </head> 8 <body> 9 @* 畫圖要用的空間 *@ 10 <div id="divEcharts" style="width:800px;height:600px;"></div> 11 </body> 12 </html> 13 <script type="text/javascript"> 14 option = { 15 color: ['#3398DB'], 16 tooltip : { //提示信息 17 trigger: 'axis', //axis軸對稱 18 axisPointer : { // 坐標軸指示器，坐標軸觸發有效 19 type : 'shadow' // 默認為直線，可選為：'line' | 'shadow' 20 } 21 }, 22 grid: { //網格 23 left: '3%', 24 right: '4%', 25 bottom: '3%', 26 containLabel: true //把y軸的值顯示出來 27 }, 28 xAxis : [ //X軸的數據 29 { 30 type : 'category', 31 data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], 32 axisTick: { 33 alignWithLabel: true 34 } 35 } 36 ], 37 yAxis : [ //Y軸的網格已值為准 38 { 39 type : 'value' 40 } 41 ], 42 series : [ 43 { 44 name:'直接訪問', //提示中的信息 45 type:'bar', //圖的類型 bar條形 46 barWidth: '60%', //每個條形的寬度比例 47 data:[10, 52, 200, 334, 390, 330, 220] //Y軸數據 48 } 49 ] 50 }; 51 52 53 //初始化echarts實例 54 var myChart = echarts.init(document.getElementById('divEcharts')); 55 //使用制定的配置項和數據顯示圖表 56 myChart.setOption(option); 57 58 </script>