123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367 |
- 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"];
- /*
- * 柱状图(非堆叠柱状图)
- * id: 元素ID
- * data 数据
- * [
- {
- name: "限电损失电量(单位:万kwh)",
- type: "bar",
- data: this.histogram.xdss,
- },
- {
- name: "故障损失电量(单位:万kwh)",
- type: "bar",
- data: this.histogram.gzss,
- },
- ,
- {
- name: "检修损失电量(单位:万kwh)",
- type: "bar",
- data: this.histogram.jxss,
- },
- {
- name: "性能损失电量(单位:万kwh)",
- type: "bar",
- data: this.histogram.xnss,
- },
- {
- name: "受累损失电量(单位:万kwh)",
- type: "bar",
- data: this.histogram.slss,
- },
- ]
- * xdata : 横坐标数据
- * */
- export function getBar_fdd(id, data , xdata) {
- if(data === undefined){
- message.error("没有找到报表数据,请检查!");
- return;
- }
- var myChart = EC.init(document.getElementById(id));
- var option = {
- title: {
- text: "损失电量分析",
- },
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "shadow",
- },
- },
- legend: {
- data: [
- "限电损失电量(单位:万kwh)",
- "故障损失电量(单位:万kwh)",
- "检修损失电量(单位:万kwh)",
- "性能损失电量(单位:万kwh)",
- "受累损失电量(单位:万kwh)",
- ],
- },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
- yAxis: {
- type: "value",
- boundaryGap: [0, 0.01],
- },
- xAxis: {
- type: "category",
- data: xdata,
- },
- series: data,
- };
- 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);
- }
- export default {
- getBar_fdd,
- leida_tc,
- bar_tc,
- bar_tc_2,
- color,
- }
|