echarts相关配置及图示
来源:互联网 发布:泰格至尊软件说明书 编辑:程序博客网 时间:2024/05/01 12:43
xAxis.boundaryGap配置为false,默认为 true。
(1)
var power=10;var totalPower=14;var percent = (100*power/totalPower).toFixed(2);option = { title: { text: power+"KW", x: "center", top: '40%', textStyle:{ color:'#fff', fontSize:48 } }, tooltip: { formatter: "{a} <br/>{b} : {c}%" }, series: [{ name: '', type: 'gauge', center: ['50%', '50%'], // 默认全局居中 radius: '70%', axisLine: { show: false, lineStyle: { // 属性lineStyle控制线条样式 color: [ [0.8, '#FCC65B'], [1, '#FEFFFE'] ], shadowColor: 'rgba(0, 0, 0, 0.3)', shadowBlur: 20, shadowOffsetX:-3, shadowOffsetY:3, width: 10 } }, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: false }, pointer: { show: false, length: '0', width: '0' }, detail: { formatter: '{value}%', offsetCenter: [0, '25%'], textStyle:{ color:'#fff', fontSize:18 } }, data: [{ value: percent, label: { textStyle: { fontSize: 12 } } }] }]};
(2)
var data = [{ value: 45, name: '严重告警'}, { value: 20, name: '重要告警'}, { value: 65, name: '一般告警'}];option = { backgroundColor: '#fff', tooltip: { show: true, trigger: 'item', formatter: "{b}: {c}个 ({d}%)" }, legend: { orient: 'horizontal', bottom: '0%', data: ['<10w', '10w-50w', '50w-100w', '100w-500w', '>500w'] }, series: [{ type: 'pie', radius: ['15%', '22%'], silent:true, z:2, label: { normal: { show: false, } }, itemStyle: { normal: { color: '#fff', opacity:0.4 } }, data: [' '] },{ type: 'pie', radius: ['77%', '78%'], silent:true, itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#8fe5fa' // 0% 处的颜色 }, { offset: 0.5, color: '#fff' // 100% 处的颜色 },{ offset: 1, color: '#8fe5fa' // 0% 处的颜色 }], false) } }, data: [''] },{ type: 'pie', roseType: "radius", selectedMode: 'single', radius: ['15%', '70%'], color: ['#ffb980', '#fc5043', '#23b4ff'], z:1, label: { normal: { formatter: '{c}%', position:'inner', textStyle: { fontSize:16 } } }, labelLine: { normal: { show: false } }, data: data }]};
(3)
var base = +new Date(1968, 9, 3);var oneDay = 24 * 3600 * 1000;var date = [];var data = [Math.random() * 300];function PowerCalculator(base,power){ var number=base; if(power == 1){ return number; } if(power == 0){ return 1; } for(var i=2;i<=power;i++){ number = number * base; } return number;}// for (var i = 1; i < 20000; i++) {// var now = new Date(base += oneDay);// date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));// data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));// }var datem=['00','15','30','45'];var xData = getMinu();function getYdata(param,bas){var yData = [];var getY;for (var i = 0; i < xData.length; i++) { if(i<24||i>80){ getY=0; }else{ getY =bas+bas*Math.sin((i-param)/(3.14*3)); //getY = -((i-param)*(i-param)-param*15)*basic; if(getY<0){getY =0} if(Math.abs((i-54))<10){ getY+=bas*Math.random()/15; } getY=getY/10 } yData.push(getY)} return yData}function getMinu(){ var dateh=[]; var datehs=[]; for(var i=0;i<24;i++){ if(i<10){ dateh='0'+i; }else{ dateh=''+i; } for(var j=0;j<4;j++){ datehs.push(dateh+':'+datem[j]); } } return datehs;}option = { legend: { top: 'top', data:[{ name:'逆变器功率(直流输入)', icon:'line' },{ name:'逆变器功率(交流输出)', icon:'line' },{ name:'瞬时辐射', icon:'line' }] }, xAxis: { type: 'category', boundaryGap: false, data: xData }, yAxis: [{ name:'功率(MW)', max:5, type: 'value', boundaryGap: [0, '100%'], },{ name:'瞬时辐射(W/m²)', max:1000, type: 'value', boundaryGap: [0, '100%'], }], dataZoom: [{ type: 'inside', start: 10, end: 90 }, { start: 10, end: 90, handleSize: '80%', handleStyle: { color: '#fff', shadowBlur: 3, shadowColor: 'rgba(0, 0, 0, 0.6)', shadowOffsetX: 2, shadowOffsetY: 2 } }], series: [ { name:'逆变器功率(直流输入)', type:'line', symbol: 'none', itemStyle: { normal: { color: '#0299D9' } }, data: getYdata(38.7,13) }, { name:'逆变器功率(交流输出)', type:'line', symbol: 'none', itemStyle: { normal: { color: '#36BC27' } }, data: getYdata(38.7,12) }, { name:'瞬时辐射', type:'line', smooth:false, symbol: 'none', yAxisIndex: 1, itemStyle: { normal: { color: '#FB483A' } }, data: getYdata(39,2880) } ]};
(4)
var easingFuncs = { quadraticInOut: function (k) { if ((k *= 2) < 1) { return 2200 * k * k; } return -2200 * (--k * (k - 2) - 1); }};var N_POINT = 24;var grids = [];var xAxes = [];var yAxes = [];var series = [];var titles = [];var tooltip = [];var count = 0;echarts.util.each(easingFuncs, function (easingFunc, name) { var data = []; for (var i = 0; i <= N_POINT; i++) { var x = i / N_POINT; var y = easingFunc(x); data.push([x, y]); } tooltip.push({ show:true, trigger:'item' }); grids.push({ show: true, borderWidth: 0, backgroundColor: '#fff', shadowColor: 'rgba(0, 0, 0, 0.3)', shadowBlur: 2 }); xAxes.push({ type: 'value', show: true, min: 0, max:1.2, gridIndex: count, axisLabel:{ show:true, formatter:function(value,index){ return index } }, splitLine:{ show:false }, splitNumber:10 }); yAxes.push({ name:'元', type: 'value', show: true, max:5000, gridIndex: count, splitLine:{ show:true, lineStyle:{ type:'dashed' } }, splitNumber:5 }); series.push({ name: name, type: 'line', xAxisIndex: count, yAxisIndex: count, data: data, showSymbol: false, animationEasing: name, animationDuration: 1000, markLine:{ label:{show:true}, data: [{ yAxis: 3000 }], lineStyle: { normal: { type: "dashed", color: "#CE1C08" } } } }); titles.push({ textAlign: 'center', text: name, textStyle: { fontSize: 12, fontWeight: 'normal' } }); count++;});option = { grid: grids, xAxis: xAxes, yAxis: yAxes, series: series, tooltip:tooltip};
(5)
var xData=[],yData=[];var curDate = new Date();var curDay = curDate.getDate(); //目前的日// getDaysInOneMonth(2016,12,31);function getDaysInOneMonth(year, month,curDay){ //数据 按月统计 month = parseInt(month, 10); var d= new Date(year, month, 0); //当月有多少天 var days = d.getDate(); //当前月的最后一天 for(var i=1;i<=days;i++){ if(i<10){ xData.push('0'+i); }else{ xData.push(i); } if(i<=curDay){ yData.push(parseFloat(Math.random()*10+30).toFixed(2)); }else{ yData.push(' '); } tooltipFormatter='{b}h<br>'+'{a0}:'+'{c}万kWh'; } tooltipFormatter='{b}日<br>'+'{a}:'+'{c}万元';} getDays(24);function getDays(param){ //数据 按周统计 num = parseInt(param, 10); var week=['周一','周二','周三','周四','周五','周六','周日']; if(num==7){ for(var i=0;i<num;i++){ xData.push(week[i]); yData.push(parseFloat(Math.random()*10+30).toFixed(2)); } tooltipFormatter='{b}<br>'+'{a}:'+'{c}万元'; }else if(num==24){ for(var i=1;i<num;i++){ xData.push(i); yData.push(parseFloat(Math.random()*10+30).toFixed(2)); } tooltipFormatter='{b}h<br>'+'{a}:'+'{c}万元'; }else{ } } function getCurDate(){ //获取当前日期 var formatDate = curDate.getFullYear()+'年'+(curDate.getMonth()+1)+'月'+curDate.getDate()+'日' return formatDate;}option = { title:{ text:getCurDate(), left:'center' }, tooltip : { trigger: 'axis', axisPointer:{ lineStyle:{ color:'#3398DB' } }, formatter:tooltipFormatter }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', boundaryGap : false, data : xData } ], yAxis : [ { max:50, type : 'value', name:'万元' } ], series : [ { name:'收益', type:'line', stack: '总量', label: { normal: { show: true, position: 'top' } }, areaStyle: {normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ACDDFD' // 0% 处的颜色 }, { offset: 1, color: '#F2FAFF' // 100% 处的颜色 }], false) }}, lineStyle:{ normal:{ color: '#55B5F1' } }, itemStyle:{ normal:{ color: '#0D95ED' } }, data:yData } ]};
(6)
function getData(param, maxNum) { var y; var arr = []; arr = xData.map(function(x){ if(x<param){ y=maxNum; }else{ y=-(x-param)*(x-param)+maxNum; } y = y<0?0:y; return y.toFixed(2); }); return arr;}function getAverageData(maxNum, total) { var j = maxNum / total; var sum=0; var arr = [0]; for (var i = 0; i < total; i++) { sum+=j; arr.push(sum.toFixed(2)); } return arr;}var xData = getAverageData(30, 300);var legendData=['光伏板1','光伏板2','光伏板3'];option = { tooltip: { trigger: 'axis' }, legend: { textStyle: { fontFamily: "Arial", fontSize: 14, color: '#000000' }, data: legendData }, calculable: true, xAxis: [{ type: 'category', anme: '输出电压(V)', nameLocation :'center', axisLabel: { formatter:function(value,index){ return parseInt(value) }, interval:function(index,item){ if(item%5===0){ return true; }else{ return false; } }, textStyle: { fontFamily: "Arial", fontSize: 12 } }, data:xData }], yAxis: [{ fontFamily: "Arial", type: 'value', name: '输出电流(A)', nameTextStyle: { fontFamily: "Arial", fontSize: 12 }, axisLabel: { formatter: '{value}', textStyle: { fontFamily: "Arial", fontSize: 14 } } }], series: [{ itemStyle: { normal: { fontFamily: "Arial", borderColor: "#5ab1ef", color: "#5ab1ef", lineStyle: { type: 'solid' } } }, type: 'line', symbol: 'none', symbolSize: 3, smooth: true, name: '光伏板1', data: getData(14.6,33) }, { itemStyle: { normal: { fontFamily: "Arial", borderColor: "#b6a2de", color: "#b6a2de", lineStyle: { type: 'solid' } } }, type: 'line', symbol: 'none', symbolSize: 3, smooth: true, name: '光伏板2', data: getData(13.3,34) }, { itemStyle: { normal: { fontFamily: "Arial", borderColor: "#f69b51", color: "#f69b51", lineStyle: { type: 'solid' } } }, type: 'line', symbol: 'none', smooth: true, name: '光伏板3', data: getData(10,35.5) }]};
0 0
- echarts相关配置及图示
- echarts3相关配置及图示
- echarts相关配置
- echarts圆环百分比图示
- echarts圆环百分比图示
- echarts中datazoom相关配置
- 各种echarts图示例代码
- ECharts配置
- 图示CCScrollView的相关概念
- 使用echarts插件画折线图,及echarts配置项解释
- ECharts图表初级入门篇:如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表
- ECharts图表入门:如何配置ECharts图表相关文件以及基本配置呈现最基本线性图表
- SDF数据库与数据控件DataSet和bindingSource及TableAdapter及tableAdapterManager配置图示
- ECharts相关小结
- php相关配置及相关基础知识点
- Raspberry Pi: 相关配置及相关命令
- ubuntu_JAVA 环境配置及相关
- FTP相关配置及备忘
- MySQL】恢复误操作的方法
- CentOS设置网络访问代理
- jquery的ajax提交时“加载中”提示的处理方法
- LearnOpenGL学习笔记4:纹理
- vpn tomcat
- echarts相关配置及图示
- 编译Unix高级编程源代码出现的格式warning
- iOS中有关沙盒的一些知识的介绍(获取沙盒路径以及沙盒文件操作等)
- apache tomcat 默认访问项目(直接输入IP就能访问项目)
- racle instr函数(oracle 用instr 来代替 like)
- json字符串返回给前端处理
- java三大版本
- Window下硬盘安装Ubuntu系统
- apache/nginx/nodejs原理简析