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

很抱歉,作为一个文本AI模型,我无法直接显示片。但是,你可以通过以下步骤来获取Echarts关系片: 1. 首先,你需要安装Echarts库。你可以在Echarts的官方网站(https://www.echartsjs.com/zh/index.html)上找到安装和使用文档。 2. 使用Echarts创建你想要的关系,并将其保存为片。你可以使用Echarts提供的API和配置选项来定义表的样式和数据。 3. 保存关系片。Echarts提供了`echarts.convertToImage`方法,可以将关系转换为片,并可以选择下载或保存。 以下是一个简单的示例代码,展示了如何使用Echarts创建一个关系并保存为片: ```javascript // 引入Echarts库 import echarts from 'echarts'; // 创建一个关系实例 const chart = echarts.init(document.getElementById('chart-container')); // 配置关系的样式和数据 const option = { // 配置选项... series: [{ type: 'graph', // 数据... }] }; // 设置关系的配置项 chart.setOption(option); // 将关系转换为片 chart.convertToImage({ type: 'png', // 片类型 pixelRatio: 1, // 分辨率 backgroundColor: '#fff', // 背景颜色 }); // 保存关系片 chart.saveAsImage('relation_chart.png'); ``` 请确保你已经正确安装了Echarts库,并在HTML文件中添加了一个具有唯一id的div元素(例如`<div id="chart-container"></div>`)作为关系的容器。 希望这能帮到你!如果你有任何其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值