/*** 测量图,功率图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 funnelmax: 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

ECharts测量图,功率图相关推荐

  1. Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图(带炫光特效)

    场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...

  2. echarts 堆叠树状图排序

    echarts 堆叠树状图.没有相关的配置API,要自己先把数据排好,再传到数据配置中... 未排序: 它的配置项: option = {tooltip: {trigger: 'axis',axisP ...

  3. 数字化测图是利用计算机自动绘制地形图,运用VirtuoZo软件实现航空摄影测量数字化测图...

    摘 要 本文简单介绍了航空摄影测量地形图成图的内业数据处理步骤,并结合VirtuoZo.NT版数字摄影测量软件进行了具体说明. Abstract:this text to in brief intro ...

  4. 噪音曲线图测试软件,利用示波器统计工具分析有噪声信号之测量统计和余晖图...

    利用示波器统计工具分析有噪声信号之测量统计和余晖图 2019-09-24 数字示波提供了多种基于统计的工具,除了前文提到的平均和直方图之外,测量参数统计和余晖图,也是非常有用的工具,协助快速获取有用信 ...

  5. layui + echarts股票K线图(含案例、代码、截图)(转载篇)

    文章目录 layui + echarts股票K线图(含案例.代码.截图)(转载篇) 一.案例.代码.截图 经验 · 补充说明: layui + echarts股票K线图(含案例.代码.截图)(转载篇) ...

  6. Echarts散点象限图

    Echarts散点象限图 // 散点数据 const marksData = [{name: '点1',value: [10, 20],},{name: '点2',value: [15, 22],}, ...

  7. Vue项目中Echarts流向图迁徙图实现

    在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...

  8. Mapbox + ECharts 实现简单迁徙图

    文章目录 概述 预览效果 实现代码 说明 相关链接 概述 ECharts是开源的可视化图表库,其中有丰富的图表.本文使用Mapbox结合ECharts插件实现了简单的迁徙地图. 预览效果 实现代码 & ...

  9. 更改echarts中盒须图横坐标

    echarts的盒须图研究了一下,不知道有啥方便的方法,使用了一个笨办法解决更改x坐标,使用switch echarts中原始盒须图: var text = ['1年以上', '2年以上', '3年以 ...

最新文章

  1. python 获取当前ip
  2. Error opening zip file or JAR manifest missing的解决方法
  3. 国内唯一,阿里云容器服务进入 Forrester 领导者象限
  4. Spring Boot Serverless 实战系列“架构篇” | 光速入门函数计算
  5. SpringCloud 应用在 Kubernetes 上的最佳实践 — 诊断(线上联调)
  6. mysql etc my.cnf_mysql配置文件 /etc/my.cnf 详细解释
  7. loginButton.setOnClickListener(this);这里为什么要用this呢?
  8. Hibernate与MyBatis区别
  9. JVM各个组成部分和其基本功能
  10. 不填写内容用哪个斜杠代替_python3用单反斜杠代替双反斜杠
  11. 概率、随机数、随机数生成函数(面试题)
  12. 树莓派4B设置双网卡静态IP、网卡优先级、查看系统多少位
  13. hibernate使用sql语句查询实体时,要写上addEntity
  14. [程序设计]Java实现解析抖音无水印视频
  15. 寻找发帖水王java_SWUST_OJ 水王发帖排序
  16. 决策树系列(四)——基于决策树算法实现员工离职率预测
  17. 深度学习图像-半自动和自动标注工具
  18. 区块链未来前景及运用领域
  19. 用 Python 解数独(Sudoku)
  20. 花一周时间整理了3.5W字的全栈自动化测试面试题(答案+学习路线)!为了找到好工作,拼了!

热门文章

  1. 【FFmpeg】便捷函数汇总(持续更新中...)
  2. linux驱动:TI+DM8127+GPIO(五)之plarform
  3. mllib逻辑回归 spark_Spark Mllib中逻辑回归
  4. java 抓屏_java抓屏代码
  5. python将string转换为json_python -- 将string转换成dict的方法
  6. zuul 启动 threw exception_SpringCloud-Zuul-网关路由过滤器
  7. oracle判断非空并拼接,oracle sql 判断字段非空,数据不重复,插入多跳数据
  8. 【蓝桥java】递归基础之车辆进出栈
  9. CSS实现超过一定的宽度添加省略
  10. 值传递 和 地址传递 的区别(好多句话才可以说清)