123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- import * as echarts from "echarts";
- export default function getData(params = []) {
- let resList = params.alarmList.map(val => {
- return {
- ...val,
- createTime: new Date(val.createTime).getDate()
- }
- }).reverse()
- let resList2 = params.unOnlineList.map(val => {
- return {
- ...val,
- createTime: new Date(val.createTime).getDate()
- }
- }).reverse()
- return {
- color: [
- "rgba(62,175,64,.8)",
- "rgba(239,107,61,.8)",
- ],
- title: {
- show: false,
- text: "渐变堆叠面积图",
- },
- tooltip: {
- trigger: "axis",
- textStyle: {
- color: "#FFF",
- },
- confine: true,
- backgroundColor: "rgba(11, 12, 72, 0.8)",
- borderColor: "rgba(11, 12, 72, 0.4)",
- position: "bottom",
- },
- legend: {
- show: true,
- top: 0,
- right: 10,
- itemGap: 20,
- textStyle: {
- color: "#FFF",
- },
- },
- // toolbox: {},
- grid: {
- top: 30,
- left: 10,
- right: 15,
- bottom: 10,
- containLabel: true,
- },
- xAxis: {
- type: "category",
- boundaryGap: false,
- data: resList.map(val => val.createTime),
- axisLabel: {
- color: "#FFFFFF",
- // rotate: 50,
- },
- axisTick: {
- show: false,
- },
- },
- yAxis: {
- type: "value",
- axisLabel: {
- color: "#FFFFFF",
- },
- splitLine: {
- lineStyle: {
- color: "#ccc",
- },
- },
- },
- series: [{
- name: "告警数",
- type: "line",
- smooth: true,
- showSymbol: true,
- areaStyle: {
- opacity: 0.8,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: "rgba(62,175,64)",
- },
- {
- offset: 1,
- color: "rgba(62,175,64,.1)",
- },
- ]),
- },
- data: resList.map(val => val.count),
- },
- {
- name: "离线数",
- type: "line",
- smooth: true,
- showSymbol: true,
- areaStyle: {
- opacity: 0.8,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- offset: 0,
- color: "rgba(62, 175, 64,1)",
- },
- {
- offset: 1,
- color: "rgba(62, 175, 64,.1)",
- },
- ]),
- },
- data: resList2.map(val => val.count),
- },
- ],
- }
- }
|