基于Echarts的HTML5 Canvas折线图柱状图DEMO演示

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