<script>
    var water_name=[];//資料名稱
    var water_one=[];//前日資料
    var water_two=[];//昨日資料
    var water_three=[];//今日資料
    var myChart;
    function  water_mt(){
    // 基於準備好的dom，初始化echarts例項
        myChart= echarts.init(document.getElementById('water'));
    // 指定圖表的配置項和資料
    var option = {//option選項
        legend: {//圖例
            data: ['前日', '昨日', '今日'],
            itemHeight:5,
            itemWidth:20,
            right:'5%',
            top:'0',
            textStyle:{
                color:'#287DB0'
            },
            borderRadius: '50%',
            selectedMode:false//關閉圖例點選事件
        },
        xAxis: {
            type: 'category',//category類別
            axisLabel: {//軸標籤
                show: true,
                color: '#34a7e8'
            },
            data: water_name
            ,splitLine:{//splitLine分割線
                show:false,
                lineStyle:{
                    color:'rgba(250,250,250,.2)',
                    width: 1
                }
            }
        },
         grid:{
            left:'5%',
             top:'15%',
             bottom:'15%',
             right:'5%',
             containLabel:true
        },
        barWidth:'12%',//柱寬度
        yAxis: {
            axisLabel: {
                show: true,
                color: '#34a7e8',
                formatter:function(value){
                    return (value/10000).toFixed(1)+'萬噸'//toFixed(1)小數點後一位
                }
            },
            type: 'value',
            splitLine:{//分割線
                show:true,
                lineStyle:{
                    type:'dotted',
                    color:'#767779',
                    width: 1
                }
            },
            axisTick:{
                show: false
            }
        },
        series: [{//系列
            name: '前日',
            type: 'bar',
            data:water_one,//返回資料的名稱  試用可獨自寫一陣列例如：[255,362,246,145,356,256]
            itemStyle: {
                normal: {
                    barBorderRadius:[10, 10, 10, 10],//柱圓角度數
                    shadowBlur: 10,//柱寬
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{//柱漸變顏色
                        offset: 0,
                        color: '#ABCA14'
                    }, {
                        offset: 1,
                        color: '#50980E'
                    }])
                }
            }
        },
            {
                name: '昨日',
                type: 'bar',
                data: water_two,
                itemStyle: {
                    normal: {
                        barBorderRadius:[10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#40AAD4'
                        }, {
                            offset: 1,
                            color: '#0B4785'
                        }])
                    }
                }
            },
            {
                name: '今日',
                type: 'bar',
                data: water_three,
                itemStyle: {
                    normal: {
                        barBorderRadius:[10, 10, 10, 10],
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#CA4E50'
                        }, {
                            offset: 1,
                            color: '#9B1C16'
                        }])
                    }
                }
            }
        ]
    };
    // 使用剛指定的配置項和資料顯示圖表。
    myChart.setOption(option);
    }

    function water_ajax (){
        $.ajax({
            type:'get',//型別
            url: "",//地址
            success: function(elm){請求成功返回的函式
             //   $('#water_img').hide();資料顯示 loading圖片隱藏
                water_mt();//執行上一函式
            }
        });
    }
water_ajax();
</script>