ECharts测量图,功率图

/**
     * 测量图，功率图1，仪表盘
     */

　　

    mainpage.prototype.initEcharsGLT1= function(oneJZ){ //
        if(myChartGLT1 = null && myChartGLT1 != "" && myChartGLT1 != undefined) {
            myChartGLT1.dispose(); //每次加载之前清除之前的echarts
        }
        var myChartGLT1 = echarts.init(document.getElementById('GLTONE'));
        // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
        var resizeMainContainer = function() {
            document.getElementById('GLTONE').style.width = $("#GLTONE").parent().width() + 'px';
            document.getElementById('GLTONE').style.height = $("#GLTONE").parent().height() + 'px';
        };
        // 设置div容器高宽
        resizeMainContainer();
        $(window).on('resize', function() {//
            // 屏幕大小自适应，重置容器高宽
            resizeMainContainer();
            myChartGLT1.resize();
        });
        optionGLT1 = {
                title:{
                    show: true,
                    text: '1号机组',
                    x:'center', //标题在x横向位置
                    y:'bottom', //标题在y纵向位置
                    textStyle:{//标题内容的样式
                        fontFamily:"san-serif",//主题文字字体，默认微软雅黑
                        fontSize:14//主题文字字体大小，默认为18px
                    },
                },
                tooltip : {
                    formatter: "{b}{a} : {c} MW" //鼠标移动到指针的hover事件/弹窗
                },
               
                series: [{
                        name: '功率',
                        type: 'gauge', 
                        //date: oneJZ,
                        min:0, //最大值
                        max:650,//最小值
                        splitNumber:65,
                        detail: {formatter:'{value} MW',fontSize:12,offsetCenter :[0, '70%']},//70与上边的距离
                        data: [{value: oneJZ, name: '有功'}],
                        radius: '70%',
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                               // 0-30   （30-140 280-420）（140-280  420-650）
                                color: [
                                    [0.046153, '#8E8E38'],//0-30
                                    [0.21538, '#ff4500'],//30-140
                                    [0.43076, '#66CD00'],//140-280
                                    [0.64615, '#ff4500'],//280-420
                                    [1, '#66CD00'],//420-650
                                ],
                                width: 9,// 这个是修改宽度的属性  
                            }
                        },
                        axisLabel: {
                            formatter:function(v){
                                switch (v + '') {
                                    case '30' : return ' 30';
                                    case '140' : return ' 140';
                                    case '250' : return '  280';
                                    case '440' : return '420 ';
                                    case '650' : return '650 ';
                                }
                            }
                        },
                        title: {
                            textStyle: { // 负荷两个字的字体样式  //全局表盘里面的样式
                                fontWeight: 'bolder',
                                fontSize: 10,
                                color: '#3196DC',
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length :0,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                shadowBlur: 5
                            }
                        },
                        splitLine: {           // 分隔线
                            length: 0,      // 属性length控制线长
                            
                        },
                    }
                ]
            };


          // 使用刚指定的配置项和数据显示图表。
          myChartGLT1.setOption(optionGLT1);
          //一分钟刷新一次
          setInterval(function () {
              mainpage.initJZYGZ();//查询机组测量图
              mainpage.initJZAGC();//查询AGC
         },60000);
    }

 

　　

//加载饼图

mainpage.prototype.initGZBJ = function(data) {  

if(myChartBJ != null && myChartBJ != "" && myChartBJ != undefined) {
                myChartBJ.dispose(); //每次加载之前清除之前的echarts
            }
            var myChartBJ = echarts.init(document.getElementById('bt_mainPie'));
            var optionBJ = {
                title : {
                    x:'center'
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    left:10,
                    top:10,
                    data:['一级故障','一级异常','二级故障','二级异常','三级故障']
                },
                tooltip: {
                     trigger: 'item',
                     formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                calculable : true,
                series: [  {
                    name:'异常信息',
                    type:'pie',
                    radius: ['40%', '70%'],
                    data:[
                        {value:data.ALARM_LEVEL1GZ, name:'一级故障'},
                        {value:data.ALARM_LEVEL1ALARM, name:'一级异常'},
                        {value:data.ALARM_LEVEL2GZ, name:'二级故障'},
                        {value:data.ALARM_LEVEL2ALARM, name:'二级异常'},
                        {value:data.ALARM_LEVEL3GZ, name:'三级故障'}
                    ],
                    color:['#0000FF','#B0C4DE','#FFA500','#FFFF00','#FF0000'],
                   // radius : [10, 60],
                    center : ['50%', 70],//left/top
                    //roseType : 'radius',
                    width: '40%',       // for funnel
                    max: 40,            // for funnel
                    itemStyle : {
                      normal : {
                            label : {
                                show : false
                            },
                            labelLine : {
                                show : false
                            }
                        },
                        emphasis : {
                            label : {
                                show : true
                            },
                            labelLine : {
                                show : true
                            }
                        }
                    }, 
                    center:['60%','45%']  //marging[left ，top]饼图位置
                }]
            };
            
            myChartBJ.setOption(optionBJ, true);
}

 

　　

　　

转载于:https://www.cnblogs.com/jianghengchao/p/9126844.html