echarts 柱状图实例

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