JavaScript代碼 ： var barChart = { title: { text: '折柱混合圖' }, dataZoom: { type:'inside',//slider //orient:'horizontal'//vertical }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { //x:'left', data:['蒸發量','降水量'] }, xAxis: [ { type: 'category', data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', name: '水量', min: 0, max: 250, interval: 50, axisLabel: { formatter: '{value} ml' } } ], series: [ { name:'蒸發量', type:'bar', //stack: '總量', label: { normal: { show: true, position: 'top' } }, data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] }, { name:'降水量', type:'bar', //stack: '總量', label: { normal: { show: true, position: 'top' } }, data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] } ] }; //初始化echarts實例 var myBarChart = echarts.init(document.getElementById('barChart')); //使用制定的配置項和數據顯示圖表 myBarChart.setOption(barChart);

總結

以上是生活随笔為你收集整理的html制作柱状图教程,基于Echarts的HTML5 Canvas折线图柱状图DEMO演示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。