echarts3相关配置及图示
来源：互联网 发布：刘亦菲 陈金飞 知乎 编辑：程序博客网 时间：2024/05/01 09:06
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）
图例： 
代码：
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) }]};（3）
图例： 
代码：
function getData(param, add) { var radBas = param === undefined ? 1 : param; var addBas = param === undefined ? 0 : add; var arr = []; for (var i = 0; i < xData.length; i++) { arr.push(addBas + radBas * Math.random().toFixed(2)); } return arr;}var xData = ['电站A', '电站B', '电站C', '电站D', '电站E', '电站F'];option = { tooltip: { trigger: 'axis' }, legend: { textStyle: { fontFamily: "Arial", fontSize: 14, color: '#000000' }, data: ['理论发电量', '计划发电量', '上网电量', '发电效率'] }, calculable: true, grid: { x: 36, y: 40, x2: 52, y2: 40 }, xAxis: [{ axisLabel: { textStyle: { fontFamily: "Arial", fontSize: 12 } }, type: 'category', data: xData }], yAxis: [{ max: 100, type: 'value', name: '万kWh', nameTextStyle: { fontFamily: "Arial", fontSize: 12 }, axisLabel: { formatter: '{value}', textStyle: { fontFamily: "Arial", fontSize: 14 } } }, { max: 100, fontFamily: "Arial", type: 'value', name: '%', nameTextStyle: { fontFamily: "Arial", fontSize: 12 }, axisLabel: { formatter: '{value}', textStyle: { fontFamily: "Arial", fontSize: 14 } } }], series: [{ itemStyle: { normal: { barBorderRadius: 5, borderColor: '#7cdbfe', color: "#7cdbfe", fontFamily: "Arial" } }, name: '发电效率', type: 'bar', barWidth: 30, yAxisIndex: 1, data: getData(10,60) }, { itemStyle: { normal: { fontFamily: "Arial", borderColor: "#5ab1ef", color: "#5ab1ef", lineStyle: { type: 'solid' } } }, type: 'line', symbol: 'emptyCircle', symbolSize: 3, smooth: true, name: '理论发电量', data: getData(20,60) }, { itemStyle: { normal: { fontFamily: "Arial", borderColor: "#b6a2de", color: "#b6a2de", lineStyle: { type: 'solid' } } }, type: 'line', symbol: 'emptyCircle', symbolSize: 3, smooth: true, name: '计划发电量', data: getData(10,80) }, { itemStyle: { normal: { fontFamily: "Arial", borderColor: "#f69b51", color: "#f69b51", lineStyle: { type: 'solid' } } }, type: 'line', symbol: 'emptyCircle', symbolSize: 3, smooth:true, name: '上网电量', data: getData(5,5) }]};（4）
图例： 
代码：
var data = [{ value: 750, name: '并网电站'}, { value: 539, name: '在建电站'}, { value: 300, name: '未建电站'}];option = { backgroundColor: '#fff', title: { text: ['100MW'], subtext: '总装机容量', itemGap:12, top:'43%', x: 'center', y: 'center', textStyle: { color:['#4ab05a'], fontWeight:700, fontSize: 40 }, subtextStyle: { fontWeight: 'normal', fontSize: 22 } }, 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: ['45%', '46%'], silent:true, itemStyle: { normal: { color: '#e3e3e3' } }, data: [''] },{ type: 'pie', radius: ['74%', '75%'], silent:true, itemStyle: { normal: { color: '#e3e3e3' } }, data: [''] },{ type: 'pie', selectedMode: 'single', radius: ['50%', '70%'], hoverAnimation:false, color: ['#2ec8ca', '#5ab0ed', '#ffb880'], label: { normal: { formatter: ' ' } }, selectedOffset:2, labelLine: { normal: { show: false } }, data: data }]};（5）
图例： 
代码：
var xData = ['电站A', '电站B', '电站C', '电站D', '电站E', '电站F'];var dataName = ['等效利用小时数(h)', '等效发电率(%)'];function getData(param, add) { var radBas = param === undefined ? 1 : param; var addBas = add === undefined ? 0 : add; var arr = []; for (var i = 0; i < xData.length; i++) { arr.push(radBas + addBas * (Math.random()).toFixed(2)); } return arr;}var yData = getData(45, 45);var randomY = 0;var yData1 = yData.map(function(x) { randomY = 20 * (parseFloat(Math.random()).toFixed(2) - 0.5); return x += randomY;});option = { grid: { x: 90, x2: 100 }, tooltip: { trigger: 'axis', axisPointer:{ lineStyle:{ color:'#3398DB' } }, }, legend: { textStyle: { fontSize: 14, color: '#000000' }, data: dataName }, xAxis: [{ axisLabel: { textStyle: { fontSize: 14 } }, type: 'category', data: xData }], yAxis: [{ type: 'value', name: dataName[0], nameTextStyle: { fontSize: 12, }, max: 100, axisLabel: { formatter: '{value}', textStyle: { fontSize: 14 } }, axisTick: { show: false }, splitNumber: 5, splitArea: { show: true, areaStyle: { color: ['#F6F8F9', '#ECEEEF'] } } }, { type: 'value', name: dataName[1], max: 100, nameTextStyle: { fontSize: 12 }, axisTick: { show: false }, axisLabel: { textStyle: { fontSize: 14 } }, splitLine: { show: false }, splitNumber: 5 }], series: [{ itemStyle: { normal: { borderWidth: 2, barBorderRadius: 5, borderColor: '#7cdbfe', color: "#7cdbfe" } }, type: 'bar', barWidth: 30, name: dataName[1], yAxisIndex: 1, data: yData }, { itemStyle: { normal: { borderColor: "#f69b51", color: "#f69b51", lineStyle: { type: 'solid' } } }, symbol: 'emptyCircle', symbolSize: 5, smooth: true, name: dataName[0], type: 'line', data: yData1 }]};（6）
图例： 
代码：
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 }]};（7）
图例： 
代码：
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};（8）
图例： 
代码：
function getData(param){ var radBas = param === undefined?1:param; console.log(radBas); var arr=[]; for(var i=0;i<xData.length;i++){ arr.push(radBas*Math.random().toFixed(2)); } console.log(arr); return arr;}var xData=['电站A','电站B','电站C','电站D','电站E','电站F'];option = { grid:{ x: 56, y: 40, x2:20, y2:40 }, tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { axisLabel:{ textStyle:{ fontFamily: "Arial", fontSize: 14 } }, data:['0-5%','5-10%','10-20%','above 20%','Abnormal','Not Analyzed'] }, calculable : true, xAxis : [ { axisLabel:{ textStyle:{ fontFamily: "Arial", fontSize: 12 } }, type : 'category', data : xData } ], yAxis : [ { type : 'value', max: 5, name : '比例(%)', nameTextStyle:{ fontFamily: "Arial", fontSize: 12 } } ], series : [ { itemStyle: { normal: { barBorderRadius: 5, fontFamily:"Arial" } }, name:'0-5%', type:'bar', stack: '损耗时长', barWidth:35, data:getData() }, { itemStyle: { normal: { barBorderRadius: 5, fontFamily:"Arial" } }, name:'5-10%', type:'bar', stack: '损耗时长', barWidth:35, data:getData() }, { itemStyle: { normal: { barBorderRadius: 5, fontFamily:"Arial" } }, name:'10-20%', type:'bar', stack: '损耗时长', barWidth:35, data:getData() }, { itemStyle: { normal: { barBorderRadius: 5, fontFamily:"Arial" } }, name:'above 20%', type:'bar', stack: '损耗时长', barWidth:35, data:getData() }, { itemStyle: { normal: { barBorderRadius: 5, fontFamily:"Arial" } }, name:'Abnormal', type:'bar', stack: '损耗时长', barWidth:35, data:getData() }, { itemStyle: { normal: { barBorderRadius: 5, fontFamily:"Arial" } }, name:'Not Analyzed', type:'bar', stack: '损耗时长', barWidth:35, data:getData() } ]};（9）
图例： 
代码：
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 } ]};（10）
图例： 
代码：
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) } ]};阅读全文
0 0
- echarts3相关配置及图示
- echarts相关配置及图示
- echarts3各种配置项
- echarts3.x实用配置
- echarts3 图表配置小总结
- 图示CCScrollView的相关概念
- echarts3点击事件及获取index值
- 关于echarts3总chinamap的配置问题
- ECharts3基础教程（三）title配置篇
- SDF数据库与数据控件DataSet和bindingSource及TableAdapter及tableAdapterManager配置图示
- php相关配置及相关基础知识点
- Raspberry Pi: 相关配置及相关命令
- ubuntu_JAVA 环境配置及相关
- FTP相关配置及备忘
- MySql配置及相关命令
- myeclipse--相关配置及优化
- vim及相关插件配置
- maven常用命令及相关配置
- TCP三次握手原理详解
- python模块系列之-urllib2
- Java ArrayList、Vector和LinkedList等的差别与用法
- linux忘记root密码
- 斐波那契数列
- echarts3相关配置及图示
- 欢迎使用CSDN-markdown编辑器
- java 内存 堆 栈 方法区 常量池
- cognos 安装
- Win7下用IIS发布网站
- 前端工程师的面试套路
- 如何理解矩阵特征值 II？
- SVN使用方法
- SQL Server
