<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>柱状图</title> <script type="text/javascript" src="../jquery.min.js"></script> <script type="text/javascript" src="../echarts .js"></script> </head> <body> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="height:400px;width: 800px"></div> <!-- ECharts单文件引入 --> <script src="../Vendor/echarts/build/dist/echarts-all.js"></script> <script type="text/javascript"> // 基于准备好的dom,初始化echarts图表 var myChart = echarts.init(document.getElementById("main")); var option = { // 头部 title: { text: '' }, // 居中的标题 legend: { data:['配水量','用水量'] }, // 控住状图的颜色 color: ['#9BB1DB',"#559CDB"], tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器,坐标轴触发有效 type : 'shadow' // 默认为直线,可选为:'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : ['2010', '2011', '2012', '2013', '2014', '2015', '2016'], axisTick: { alignWithLabel: true }, // 显示单位 axisLabel : { show:true, interval: 'auto', // {number} // rotate: 45, // margin: 8, formatter: '{value}年', /* textStyle: { color: 'blue', fontFamily: 'sans-serif', fontSize: 15, fontStyle: 'italic', fontWeight: 'bold' }*/}, } ], yAxis : [ { type : 'value', // 显示单位 axisLabel : { show:true, interval: 'auto', // {number} formatter: '{value}t', } } ], series : [ { name:'用水量', type:'bar', barWidth: '30%', label: { normal: { show: true, position: 'top' } }, data:[20, 22, 100, 234, 290, 230, 420] } , { name:'配水量', type:'bar', barWidth: '30%', label: { normal: { show: true, position: 'top' } }, data:[10, 52, 200, 334, 390, 330, 220] }, ] , }; // 为echarts对象加载数据 myChart.setOption(option); } </script> </body> </html>