HTML代碼?：

<div id="barChart" style="height: 400px;width:600px;background:white;margin:20px 0 0;"></div>

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);

?

總結

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

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