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="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>