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 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测量图,功率图相关推荐
- Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图(带炫光特效)
场景 Leaflet中使用leaflet-echarts插件实现Echarts的Migration迁徙图: Leaflet中使用leaflet-echarts插件实现Echarts的Migration ...
- echarts 堆叠树状图排序
echarts 堆叠树状图.没有相关的配置API,要自己先把数据排好,再传到数据配置中... 未排序: 它的配置项: option = {tooltip: {trigger: 'axis',axisP ...
- 数字化测图是利用计算机自动绘制地形图,运用VirtuoZo软件实现航空摄影测量数字化测图...
摘 要 本文简单介绍了航空摄影测量地形图成图的内业数据处理步骤,并结合VirtuoZo.NT版数字摄影测量软件进行了具体说明. Abstract:this text to in brief intro ...
- 噪音曲线图测试软件,利用示波器统计工具分析有噪声信号之测量统计和余晖图...
利用示波器统计工具分析有噪声信号之测量统计和余晖图 2019-09-24 数字示波提供了多种基于统计的工具,除了前文提到的平均和直方图之外,测量参数统计和余晖图,也是非常有用的工具,协助快速获取有用信 ...
- layui + echarts股票K线图(含案例、代码、截图)(转载篇)
文章目录 layui + echarts股票K线图(含案例.代码.截图)(转载篇) 一.案例.代码.截图 经验 · 补充说明: layui + echarts股票K线图(含案例.代码.截图)(转载篇) ...
- Echarts散点象限图
Echarts散点象限图 // 散点数据 const marksData = [{name: '点1',value: [10, 20],},{name: '点2',value: [15, 22],}, ...
- Vue项目中Echarts流向图迁徙图实现
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图.数据地图可以最直观的表达出数据之间的空 ...
- Mapbox + ECharts 实现简单迁徙图
文章目录 概述 预览效果 实现代码 说明 相关链接 概述 ECharts是开源的可视化图表库,其中有丰富的图表.本文使用Mapbox结合ECharts插件实现了简单的迁徙地图. 预览效果 实现代码 & ...
- 更改echarts中盒须图横坐标
echarts的盒须图研究了一下,不知道有啥方便的方法,使用了一个笨办法解决更改x坐标,使用switch echarts中原始盒须图: var text = ['1年以上', '2年以上', '3年以 ...
最新文章
- python 获取当前ip
- Error opening zip file or JAR manifest missing的解决方法
- 国内唯一,阿里云容器服务进入 Forrester 领导者象限
- Spring Boot Serverless 实战系列“架构篇” | 光速入门函数计算
- SpringCloud 应用在 Kubernetes 上的最佳实践 — 诊断(线上联调)
- mysql etc my.cnf_mysql配置文件 /etc/my.cnf 详细解释
- loginButton.setOnClickListener(this);这里为什么要用this呢?
- Hibernate与MyBatis区别
- JVM各个组成部分和其基本功能
- 不填写内容用哪个斜杠代替_python3用单反斜杠代替双反斜杠
- 概率、随机数、随机数生成函数(面试题)
- 树莓派4B设置双网卡静态IP、网卡优先级、查看系统多少位
- hibernate使用sql语句查询实体时,要写上addEntity
- [程序设计]Java实现解析抖音无水印视频
- 寻找发帖水王java_SWUST_OJ 水王发帖排序
- 决策树系列(四)——基于决策树算法实现员工离职率预测
- 深度学习图像-半自动和自动标注工具
- 区块链未来前景及运用领域
- 用 Python 解数独(Sudoku)
- 花一周时间整理了3.5W字的全栈自动化测试面试题(答案+学习路线)!为了找到好工作,拼了!
热门文章
- 【FFmpeg】便捷函数汇总(持续更新中...)
- linux驱动:TI+DM8127+GPIO(五)之plarform
- mllib逻辑回归 spark_Spark Mllib中逻辑回归
- java 抓屏_java抓屏代码
- python将string转换为json_python -- 将string转换成dict的方法
- zuul 启动 threw exception_SpringCloud-Zuul-网关路由过滤器
- oracle判断非空并拼接,oracle sql 判断字段非空,数据不重复,插入多跳数据
- 【蓝桥java】递归基础之车辆进出栈
- CSS实现超过一定的宽度添加省略
- 值传递 和 地址传递 的区别(好多句话才可以说清)