|
@@ -2,22 +2,162 @@ import * as echarts from 'echarts';
|
|
let xLabel = [11, 12, 13, 14, 15, 16, 17, 18, 19]
|
|
let xLabel = [11, 12, 13, 14, 15, 16, 17, 18, 19]
|
|
let goToSchool = [9.019096, 17.795139, 6.467014, 5.746528, 10.16493, 10.112847, 7.75, 6.74, 7.14]
|
|
let goToSchool = [9.019096, 17.795139, 6.467014, 5.746528, 10.16493, 10.112847, 7.75, 6.74, 7.14]
|
|
|
|
|
|
|
|
+export const getAreaOptions = ({ xAxisData, seriesList }) => {
|
|
|
|
+ const series = seriesList.map((data, index) => {
|
|
|
|
+ const i = !index;
|
|
|
|
+ return {
|
|
|
|
+ name: i ? '过去' : '未来',
|
|
|
|
+ type: 'line',
|
|
|
|
+ symbol: 'circle',
|
|
|
|
+ showAllSymbol: true,
|
|
|
|
+ symbolSize: 5,
|
|
|
|
+ smooth: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ normal: {
|
|
|
|
+ width: 2,
|
|
|
|
+ color: i ? "rgba(25,163,223,1)" : "rgba(36,175,83,1)", // 线条颜色
|
|
|
|
+ },
|
|
|
|
+ borderColor: 'rgba(0,0,0,.4)',
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: i ? "#b7f9ff" : "#fff",
|
|
|
|
+ borderColor: i ? "#2185da" : "#2ee055",
|
|
|
|
+ borderWidth: 1,
|
|
|
|
+ shadowColor: 'rgba(22, 137, 229)',
|
|
|
|
+ shadowBlur: 1
|
|
|
|
+ },
|
|
|
|
+ areaStyle: {
|
|
|
|
+ normal: {
|
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
|
+ offset: 0,
|
|
|
|
+ color: i ? "rgba(25,163,223,.3)" : "rgba(48, 209, 136,.3)"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ offset: 1,
|
|
|
|
+ color: i ? "rgba(25,163,223, 0)" : "rgba(48, 209, 136, 0)"
|
|
|
|
+ }
|
|
|
|
+ ], false),
|
|
|
|
+ shadowColor: 'rgba(25,163,223, 0.5)',
|
|
|
|
+ shadowBlur: 20
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ z: i ? 3 : 2,
|
|
|
|
+ data
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ return {
|
|
|
|
+ backgroundColor: '#fff',
|
|
|
|
+ tooltip: {
|
|
|
|
+ trigger: "axis",
|
|
|
|
+ show: true,
|
|
|
|
+ formatter: function (params) {
|
|
|
|
+ const [item] = params.filter(item => item.value);
|
|
|
|
+ const color = item.dataIndex <= 5 ? '#2185da' : '#2ee055'
|
|
|
|
+ return `
|
|
|
|
+ <div class="text-[12px]">
|
|
|
|
+ <p>时间:${item.name + ':00'}</p>
|
|
|
|
+ <p class="flex items-center space-x-[6px]">
|
|
|
|
+ <span class="block w-[6px] h-[6px] rounded-full bg-[${color}]"></span>
|
|
|
|
+ <span>${Number(item.value.toFixed(2))} mg/L</span>
|
|
|
|
+ </p>
|
|
|
|
+ </div>
|
|
|
|
+ `
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ grid: {
|
|
|
|
+ top: '10%',
|
|
|
|
+ left: 40,
|
|
|
|
+ right: '5%',
|
|
|
|
+ bottom: '15%',
|
|
|
|
+ },
|
|
|
|
+ xAxis: [{
|
|
|
|
+ type: 'category',
|
|
|
|
+ boundaryGap: false,
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: '#e0e6f1'
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: '#1F2328',
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ },
|
|
|
|
+ formatter: function (data) {
|
|
|
|
+ return data + ":00"
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ splitLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ type: 'dashed',
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false,
|
|
|
|
+ },
|
|
|
|
+ data: xLabel
|
|
|
|
+ }],
|
|
|
|
+ yAxis: [{
|
|
|
|
+ name: '',
|
|
|
|
+ nameTextStyle: {
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ align: 'right',
|
|
|
|
+ padding: [10, 5],
|
|
|
|
+ },
|
|
|
|
+ min: 0,
|
|
|
|
+ splitLine: {
|
|
|
|
+ show: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ type: 'dashed',
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ axisLine: {
|
|
|
|
+ show: false,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ color: "#233653"
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ axisLabel: {
|
|
|
|
+ show: true,
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: '#1F2328',
|
|
|
|
+ // align: 'right',
|
|
|
|
+ padding: 0
|
|
|
|
+ },
|
|
|
|
+ formatter: function (value) {
|
|
|
|
+ if (value === 0) {
|
|
|
|
+ return value
|
|
|
|
+ }
|
|
|
|
+ return value
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ axisTick: {
|
|
|
|
+ show: false,
|
|
|
|
+ },
|
|
|
|
+ }],
|
|
|
|
+ series
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
export const areaOptions = {
|
|
export const areaOptions = {
|
|
backgroundColor: '#fff',
|
|
backgroundColor: '#fff',
|
|
tooltip: {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
trigger: "axis",
|
|
- // backgroundColor: "#202630",
|
|
|
|
- // borderColor: "#202630",
|
|
|
|
- // textStyle: {
|
|
|
|
- // color: "#fff",
|
|
|
|
- // fontSize: 12,
|
|
|
|
- // },
|
|
|
|
- // axisPointer: {
|
|
|
|
- // type: "line",
|
|
|
|
- // lineStyle: {
|
|
|
|
- // type: "solid",
|
|
|
|
- // },
|
|
|
|
- // },
|
|
|
|
|
|
+ backgroundColor: "#202630",
|
|
|
|
+ borderColor: "#202630",
|
|
|
|
+ textStyle: {
|
|
|
|
+ color: "#fff",
|
|
|
|
+ fontSize: 12,
|
|
|
|
+ },
|
|
|
|
+ axisPointer: {
|
|
|
|
+ type: "line",
|
|
|
|
+ lineStyle: {
|
|
|
|
+ type: "solid",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
formatter: function (params) {
|
|
formatter: function (params) {
|
|
return params[0].name + 'asda' + ':<br/>' + params[0].value + '万';
|
|
return params[0].name + 'asda' + ':<br/>' + params[0].value + '万';
|
|
},
|
|
},
|
|
@@ -104,7 +244,7 @@ export const areaOptions = {
|
|
if (value === 0) {
|
|
if (value === 0) {
|
|
return value
|
|
return value
|
|
}
|
|
}
|
|
- return value
|
|
|
|
|
|
+ return value
|
|
}
|
|
}
|
|
},
|
|
},
|
|
axisTick: {
|
|
axisTick: {
|
|
@@ -113,51 +253,85 @@ export const areaOptions = {
|
|
}],
|
|
}],
|
|
series: [
|
|
series: [
|
|
{
|
|
{
|
|
- name: '上学',
|
|
|
|
- type: 'line',
|
|
|
|
- symbol: 'circle', // 默认是空心圆(中间是白色的),改成实心圆
|
|
|
|
- showAllSymbol: true,
|
|
|
|
- symbolSize: 5,
|
|
|
|
- smooth: true,
|
|
|
|
- lineStyle: {
|
|
|
|
- normal: {
|
|
|
|
- width: 2,
|
|
|
|
- color: "rgba(25,163,223,1)", // 线条颜色
|
|
|
|
- },
|
|
|
|
- borderColor: 'rgba(0,0,0,.4)',
|
|
|
|
- },
|
|
|
|
- itemStyle: {
|
|
|
|
- color: "#b7f9ff",
|
|
|
|
- borderColor: "#2185da",
|
|
|
|
- borderWidth: 1,
|
|
|
|
- shadowColor: 'rgba(22, 137, 229)',
|
|
|
|
- shadowBlur: 1
|
|
|
|
- },
|
|
|
|
- tooltip: {
|
|
|
|
- show: true,
|
|
|
|
- valueFormatter: function (value) {
|
|
|
|
- return value + '元';
|
|
|
|
|
|
+ name: '上学',
|
|
|
|
+ type: 'line',
|
|
|
|
+ symbol: 'circle', // 默认是空心圆(中间是白色的),改成实心圆
|
|
|
|
+ showAllSymbol: true,
|
|
|
|
+ symbolSize: 5,
|
|
|
|
+ smooth: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ normal: {
|
|
|
|
+ width: 2,
|
|
|
|
+ color: "rgba(25,163,223,1)", // 线条颜色
|
|
|
|
+ },
|
|
|
|
+ borderColor: 'rgba(0,0,0,.4)',
|
|
},
|
|
},
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: "#b7f9ff",
|
|
|
|
+ borderColor: "#2185da",
|
|
|
|
+ borderWidth: 1,
|
|
|
|
+ shadowColor: 'rgba(22, 137, 229)',
|
|
|
|
+ shadowBlur: 1
|
|
|
|
+ },
|
|
|
|
+ areaStyle: { //区域填充样式
|
|
|
|
+ normal: {
|
|
|
|
+ //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
|
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
|
+ offset: 0,
|
|
|
|
+ color: "rgba(25,163,223,.3)"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ offset: 1,
|
|
|
|
+ color: "rgba(25,163,223, 0)"
|
|
|
|
+ }
|
|
|
|
+ ], false),
|
|
|
|
+ shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
|
|
|
|
+ shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ z: 3,
|
|
|
|
+ data: [9.019096, 17.795139, 6.467014, 5.746528, 10.16493, 10.112847, null, null, null]
|
|
},
|
|
},
|
|
- areaStyle: { //区域填充样式
|
|
|
|
- normal: {
|
|
|
|
- //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
|
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
|
- offset: 0,
|
|
|
|
- color: "rgba(25,163,223,.3)"
|
|
|
|
|
|
+ {
|
|
|
|
+ name: '2222222',
|
|
|
|
+ type: 'line',
|
|
|
|
+ symbol: 'circle', // 默认是空心圆(中间是白色的),改成实心圆
|
|
|
|
+ showAllSymbol: true,
|
|
|
|
+ symbolSize: 5,
|
|
|
|
+ smooth: true,
|
|
|
|
+ lineStyle: {
|
|
|
|
+ normal: {
|
|
|
|
+ width: 2,
|
|
|
|
+ color: "rgba(36,175,83,1)", // 线条颜色
|
|
},
|
|
},
|
|
- {
|
|
|
|
- offset: 1,
|
|
|
|
- color: "rgba(25,163,223, 0)"
|
|
|
|
|
|
+ borderColor: 'rgba(0,0,0,.4)',
|
|
|
|
+ },
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: "#fff",
|
|
|
|
+ borderColor: "#2ee055",
|
|
|
|
+ borderWidth: 1,
|
|
|
|
+ shadowColor: 'rgba(22, 137, 229)',
|
|
|
|
+ shadowBlur: 1
|
|
|
|
+ },
|
|
|
|
+ areaStyle: { //区域填充样式
|
|
|
|
+ normal: {
|
|
|
|
+ //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
|
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
|
+ offset: 0,
|
|
|
|
+ color: "rgba(48, 209, 136,.3)"
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ offset: 1,
|
|
|
|
+ color: "rgba(48, 209, 136, 0)"
|
|
|
|
+ }
|
|
|
|
+ ], false),
|
|
|
|
+ shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
|
|
|
|
+ shadowBlur: 20
|
|
}
|
|
}
|
|
- ], false),
|
|
|
|
- shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
|
|
|
|
- shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- data: goToSchool
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
-]
|
|
|
|
|
|
+ },
|
|
|
|
+ z: 2,
|
|
|
|
+ data: [null, null, null, null, null, 10.112847, 7.75, 6.74, 7.14]
|
|
|
|
+ }
|
|
|
|
+ ]
|
|
};
|
|
};
|
|
|
|
|