异常规则数图表展示-优快云博客

属性说明
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>异常规则数</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
   <div id="main" style="height:400px;width:500px"></div>
   <!--  <div id="main" style="height:400px"></div> -->
    <!-- ECharts单文件引入 -->
    <script src="js/echarts.min.js"></script>
    <script src="js/newline-echarts.js"></script>    <!-- 类目换行js -->
    <script type="text/javascript">

        function makeBar(){
            // 基于准备好的dom，初始化echarts图表
            var chart = echarts.init(document.getElementById('main'));

            var option ={
                barWidth:'30%',
                title : {        //标题
                    text: '异常规则数（按供电局）',
                    x:'center',
                    y:'top'
                },
                tooltip: {
                    trigger:'axis',     //显示一条竖线
                    axisPointer:{
                         type:'shadow'
                    }
                },
                legend: {
                   //left:'65%',        //离左边的距离
                    right:'1px',        //离右边的距离
                    //x:'left',         //离左面距离
                    y:'30%',            //离右面距离
                    orient:'vertical',    //图表垂直显示
                    data:['异常规则数']　　//legend中的data数据对应series中的data数据的name，只有两个值相等的时候，才显示  “图例”
                },

                xAxis : [
                    {
                        type : 'category',
                        //axisTick:{    //设置横轴标尺密集与舒缓
                        //    interval:0
                        //},     
                        nameTextStyle:{
                            fontSize : 6
                        },           
                        splitLine : {        //纵轴 交互颜色显示（区分一组一组数据）
                            show:true,
                            lineStyle: {
                                color: '#483d8b',
                                type: 'dashed',
                                width: 0    //显示分割线（数字确定线粗细）
                            }
                        },
                        splitArea : {
                            interval : 0,    //分隔区域颜色 根据数字大小显示不同，从0开始
                            show: true,
                            areaStyle:{
                                color:['rgba(144,238,144,0.3)','rgba(135,200,250,0.3)']
                            }
                        },
                        axisLabel:{        //设置底端显示类别的角度
                            interval : 0,  // 因图缩小，类目个数显示不全，设置后隐藏的会显示出来
                            //rotate:'-60',    //显示类目的倾斜角度

                            formatter:function(val){    //横轴显示类目在没有倾斜情况下，竖排显示
                                return val.split("").join("\n");
                            }
                        },   

                        data : ['呼和浩特供电局','包头供电局']
                    }
                ],
                grid : {    //控制图的大小（解决横轴值显示不全）
                    x:40,
                    y:30,
                    x2:100,
                    y2:95
                },   
                yAxis : [          //java实现中的 valueAAxis 表示 纵轴
                    {
                        type : 'value',
                        name : '单位说明',     //纵坐标上面显示的提示
 axisLabel : {     //纵坐标显示label
                formatter: '{value} °C'
 }，
                    }
                ],
                series : [
                    {
                        color:['#3398DB'],  //可以用rgb形式（color:['rgb(212,130,101)'],）
                        "name":"异常规则数",
                        "type":"bar",        //类型：bar表示柱状图
                        barMaxWidth:30,     //设置柱子最大宽度
                        itemStyle: {   //显示数值
                            normal: {                   // 系列级个性化，横向渐变填充
                                borderRadius: 10,

                                color: function(params) {     //按给定的颜色一次显示 
                                    var colorList = [
                                      '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                       '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                       '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                },

                                label : {    //数值对象
                                    show : true,
                                    textStyle : {
                                        //color:'red',                                       
                                        fontSize : '12',
                                        fontFamily : '微软雅黑',
                                        fontWeight : 'bold'                                   
                                    },
                                    position:'top'  //显示数值位置
                                }
                            }
                        },
                        "data":[56, 28]
                    }
                ]
            }

            option = newline(option,4,'xAxis') //类目太长，根据给定的数字进行换行，这里的4个字
            chart.setOption(option);

        }   

        setTimeout(function(){
            makeBar();
        },0);

    </script>
</body>