|
|
@@ -1,4 +1,5 @@
|
|
|
import EC from 'echarts'
|
|
|
+import BASE from '@tools/base';
|
|
|
const color = ["#00FFF0","#014EB5","#A800FF","#e82edb","#B5454C","#443bff","#e8cb25","#3dffb0","#e8a425","#ff7aab","#e84b1e","#552ce2","#ffae21","#e8861e","#d441ff","#35e8e4","#9c7aff","#e86fd8","#ffee38"];
|
|
|
|
|
|
/*
|
|
|
@@ -78,9 +79,502 @@ export function getBar_fdd(id, data , xdata) {
|
|
|
};
|
|
|
myChart.setOption(option, true);
|
|
|
}
|
|
|
+/**
|
|
|
+ *
|
|
|
+ * @param {id名称} id
|
|
|
+ * @param {第一台风机数据} value1
|
|
|
+ * @param {第一台风机名字} name1
|
|
|
+ * @param {第二台风机数据} value2
|
|
|
+ * @param {第二台风机名字} name2
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+export function leida_tc(id , value1 , name1 , value2 , name2) {
|
|
|
+ if(value1 === undefined || value2 === undefined){
|
|
|
+ message.error("没有找到报表数据，请检查！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ var option;
|
|
|
+
|
|
|
+ option = {
|
|
|
+ title: {
|
|
|
+ text: "对标排名分析",
|
|
|
+ left: 400,
|
|
|
+ top: -5,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 13,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: "10%",
|
|
|
+ left: "10%",
|
|
|
+ right: "10%",
|
|
|
+ bottom: "0",
|
|
|
+ },
|
|
|
+ tooltip: {},
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ x: "left", //可设定图例在左、右、居中
|
|
|
+ y: "0", //可设定图例在上、下、居中
|
|
|
+ padding: [0, 50, 0, 0],
|
|
|
+ },
|
|
|
+ radar: {
|
|
|
+ // shape: 'circle',
|
|
|
+ name: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ backgroundColor: "#999",
|
|
|
+ borderRadius: 3,
|
|
|
+ padding: [3, 5],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ indicator: [
|
|
|
+ { name: "风能利用率", max: 100 },
|
|
|
+ { name: "故障损失率", max: 100 },
|
|
|
+ { name: "检修损失率", max: 100 },
|
|
|
+ { name: "弃风率", max: 100 },
|
|
|
+ { name: "性能损失率", max: 100 },
|
|
|
+ { name: "受累损失率", max: 100 },
|
|
|
+ { name: "复位及时率", max: 100 },
|
|
|
+ { name: "状态转换率", max: 100 },
|
|
|
+ { name: "消缺及时率", max: 100 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "预算 vs 开销（Budget vs spending）",
|
|
|
+ type: "radar",
|
|
|
+ // areaStyle: {normal: {}},
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: value1,
|
|
|
+ name: name1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: value2,
|
|
|
+ name: name2,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ myChart.setOption(option, true);
|
|
|
+}
|
|
|
+/**
|
|
|
+ *
|
|
|
+ * @param {id名称} id
|
|
|
+ * @param {第一台风机数据} value1
|
|
|
+ * @param {第二台风机数据} value2
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+export function bar_tc(id , value1 , value2) {
|
|
|
+ if(value1 === undefined || value2 === undefined){
|
|
|
+ message.error("没有找到报表数据，请检查！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ var option;
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "cross",
|
|
|
+ crossStyle: {
|
|
|
+ color: "#999",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ text: "损失电量分析",
|
|
|
+ left: 100,
|
|
|
+ top: 8,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 13,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: "90",
|
|
|
+ left: "10%",
|
|
|
+ right: "10%",
|
|
|
+ bottom: "30",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ x: "right", //可设定图例在左、右、居中
|
|
|
+ y: 0, //可设定图例在上、下、居中
|
|
|
+ padding: [0, 50, 200, 0],
|
|
|
+ data: [
|
|
|
+ "限电损失电量(单位：万kwh)",
|
|
|
+ "故障损失电量(单位：万kwh)",
|
|
|
+ "检修损失电量(单位：万kwh)",
|
|
|
+ "性能损失电量(单位：万kwh)",
|
|
|
+ "受累损失电量(单位：万kwh)",
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: [
|
|
|
+ BASE.getBzDate(new Date(value1.recordDate),0),
|
|
|
+ BASE.getBzDate(new Date(value2.recordDate),0),
|
|
|
+ ],
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "电量",
|
|
|
+
|
|
|
+ interval: 50,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value} 万kw",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "限电损失电量(单位：万kwh)",
|
|
|
+ type: "bar",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: [value1.xdss, value2.xdss],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "故障损失电量(单位：万kwh)",
|
|
|
+ type: "bar",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: [value1.zzss, value2.gzss],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "检修损失电量(单位：万kwh)",
|
|
|
+ type: "bar",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: [value1.jxss, value2.jxss],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "性能损失电量(单位：万kwh)",
|
|
|
+ type: "bar",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: [value1.xnss, value2.xnss],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "受累损失电量(单位：万kwh)",
|
|
|
+ type: "bar",
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: [value1.slss, value2.slss],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ myChart.setOption(option, true);
|
|
|
+}
|
|
|
+/**
|
|
|
+ *
|
|
|
+ * @param {id名称} id
|
|
|
+ * @param {数据} value
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+export function bar_tc_2(id , value) {
|
|
|
+ if(value === undefined){
|
|
|
+ message.error("没有找到报表数据，请检查！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ let option = {
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ left: "right",
|
|
|
+ },
|
|
|
+ tooltip: {},
|
|
|
+ dataset: {
|
|
|
+ dimensions: [
|
|
|
+ "product",
|
|
|
+ "限电损失电量单位:万KWh",
|
|
|
+ "故障损失电量单位:万KWh",
|
|
|
+ "检修损失电量单位:万KWh",
|
|
|
+ "性能损失电量单位:万KWh",
|
|
|
+ "受累损失电量单位:万KWh",
|
|
|
+ ],
|
|
|
+ source: value,
|
|
|
+ },
|
|
|
+ xAxis: { type: "category" },
|
|
|
+ yAxis: {},
|
|
|
+ // Declare several bar series, each will be mapped
|
|
|
+ // to a column of dataset.source by default.
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ // barGap:'100%',/*多个并排柱子设置柱子之间的间距*/
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 30,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#D201D8",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 30,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#FD0100",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 30,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#FF7B16",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 30,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#8085E9",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 30,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#A6A6A6",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+};
|
|
|
+myChart.setOption(option, true);
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 用在单机饱和度分体 表格内雷达图
|
|
|
+ * @param {id名称} id
|
|
|
+ * @param {雷达图数据} value
|
|
|
+ * @param {雷达图名称} name
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+export function leida_djbhd(id , value , name) {
|
|
|
+ if(value === undefined){
|
|
|
+ message.error("没有找到报表数据，请检查！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ myChart.resize({ height: 300 });
|
|
|
+ let option = {
|
|
|
+ tooltip: {},
|
|
|
+ legend: {
|
|
|
+ top: "93%",
|
|
|
+ left: "10%",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ triggerOn: "none",
|
|
|
+ alwaysShowContent: true,
|
|
|
+ position: function (pt) {
|
|
|
+ return [pt[0], 130];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ radar: {
|
|
|
+ name: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ backgroundColor: "#999",
|
|
|
+ borderRadius: 3,
|
|
|
+ padding: [3, 5],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ indicator: [
|
|
|
+ { name: "北", max: 99 },
|
|
|
+ { name: "北北东", max: 99 },
|
|
|
+ { name: "北东", max: 99 },
|
|
|
+ { name: "东北东", max: 99 },
|
|
|
+ { name: "东", max: 99 },
|
|
|
+ { name: "东南东", max: 99 },
|
|
|
+ { name: "南东", max: 99 },
|
|
|
+ { name: "南南东", max: 99 },
|
|
|
+ { name: "南", max: 99 },
|
|
|
+ { name: "南南西", max: 99 },
|
|
|
+ { name: "南西", max: 99 },
|
|
|
+ { name: "西南西", max: 99 },
|
|
|
+ { name: "西", max: 99 },
|
|
|
+ { name: "西北西", max: 99 },
|
|
|
+ { name: "北西", max: 99 },
|
|
|
+ { name: "北北西", max: 99 },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "radar",
|
|
|
+ // areaStyle: {normal: {}},
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: value,
|
|
|
+ name: name,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "insideBottomRight",
|
|
|
+ distance: 14.5,
|
|
|
+ //rotate: -45,
|
|
|
+ offset: [11, 0],
|
|
|
+ formatter:function(params){
|
|
|
+ let list = ["北","北北东","北东","东北东","东","东南东","南东","南南东","南","南南西","南西","西南西","西","西北西","北西","北北西"]
|
|
|
+ if(params.value<10){
|
|
|
+ return ''
|
|
|
+ }else{
|
|
|
+ return list[params.dimensionIndex]+':'+params.value;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ opacity: 0.9,
|
|
|
+ color: new EC.graphic.RadialGradient(0.5, 0.5, 1, [
|
|
|
+ {
|
|
|
+ color: "#B8D3E4",
|
|
|
+ offset: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ color: "#72ACD1",
|
|
|
+ offset: 1,
|
|
|
+ },
|
|
|
+ ]),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ itemStyle: { normal: { label: { show: true } } },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ show:false,
|
|
|
+ position: function (p) {
|
|
|
+ //其中p为当前鼠标的位置
|
|
|
+ return [p[0] + 10, p[1] - 100];
|
|
|
+ },
|
|
|
+ // formatter: function (params) {
|
|
|
+ // //其中p为当前鼠标的位置
|
|
|
+ // debugger
|
|
|
+ // let fanhui = [];
|
|
|
+ // let str ='';
|
|
|
+ // let list = ["北","北北东","北东","东北东","东","东南东","南东","南南东","南","南南西","南西","西南西","西","西北西","北西","北北西"]
|
|
|
+ // for(let i=1;i<Object.keys(params.value).length;i++){
|
|
|
+ // if(params.value[i]>10){
|
|
|
+ // fanhui.push(params.value[i]+':'+list[i]);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // for(let j = 1 ;j<fanhui.length;j++){
|
|
|
+ // str.concat(fanhui[j]);
|
|
|
+ // }
|
|
|
+ // return str;
|
|
|
+ // },
|
|
|
+ textStyle: {
|
|
|
+ fontWeight: "16px",
|
|
|
+ fontSize: 16,
|
|
|
+ lineHeight: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+
|
|
|
+myChart.setOption(option, true);
|
|
|
+}
|
|
|
+/**
|
|
|
+ *
|
|
|
+ * @param {id名称} id
|
|
|
+ * @param {风机集合} fj
|
|
|
+ * @param {曲线数据} lineDate
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+export function bar_djbhd(id , fj , lineDate) {
|
|
|
+ if(lineDate === undefined){
|
|
|
+ message.error("没有找到报表数据，请检查！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var myChart = EC.init(document.getElementById(id));
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: "日功率曲线",
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: fj,
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ toolbox: {
|
|
|
+ feature: {
|
|
|
+ saveAsImage: {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+
|
|
|
+ data: lineDate.speed,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: fj[0],
|
|
|
+ type: "line",
|
|
|
+ stack: "总量",
|
|
|
+ smooth: true,
|
|
|
+ data: lineDate.value1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: fj[1],
|
|
|
+ type: "line",
|
|
|
+ stack: "总量",
|
|
|
+ smooth: true,
|
|
|
+ data: lineDate.value2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: fj[2],
|
|
|
+ type: "line",
|
|
|
+ stack: "总量",
|
|
|
+ smooth: true,
|
|
|
+ data: lineDate.value3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: fj[3],
|
|
|
+ type: "line",
|
|
|
+ stack: "总量",
|
|
|
+ smooth: true,
|
|
|
+ data: lineDate.value3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: fj[4],
|
|
|
+ type: "line",
|
|
|
+ stack: "总量",
|
|
|
+ smooth: true,
|
|
|
+ data: lineDate.value4,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+};
|
|
|
+myChart.setOption(option, true);
|
|
|
+}
|
|
|
|
|
|
export default {
|
|
|
getBar_fdd,
|
|
|
-
|
|
|
+ leida_tc,
|
|
|
+ bar_tc,
|
|
|
+ bar_tc_2,
|
|
|
+ leida_djbhd,
|
|
|
+ bar_djbhd,
|
|
|
color,
|
|
|
}
|
zhaomiao