diff --git a/ruoyi-admin/src/main/resources/static/css/main-style.css b/ruoyi-admin/src/main/resources/static/css/main-style.css
index a6c70c8..6764280 100644
--- a/ruoyi-admin/src/main/resources/static/css/main-style.css
+++ b/ruoyi-admin/src/main/resources/static/css/main-style.css
@@ -264,7 +264,7 @@ body.FoamerScada {
body.Foamer2 {
height: auto;
width: auto;
- background: url(../img/foamer2.jpg) no-repeat center fixed;
+ background: url(../img/foamer21.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
@@ -436,4 +436,4 @@ body.LinerDevice {
-o-background-size: cover;
background-size: 100% 100%;
color: rgba(255,255,255,.95);
-}
\ No newline at end of file
+}
diff --git a/ruoyi-admin/src/main/resources/static/img/foamer21.png b/ruoyi-admin/src/main/resources/static/img/foamer21.png
new file mode 100644
index 0000000..f38dc99
Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/foamer21.png differ
diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
index 7efbdf9..a35baa6 100644
--- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
+++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
@@ -9,3994 +9,4012 @@ var time4 = () => {
}
// 随机数
const random = (val = 1) => {
- return Math.ceil(Math.random() * val)
+ return Math.ceil(Math.random() * val)
}
// 水平圆角带背景柱状图
const horizontalRoundedBarChartWithBackground = function (data, id) {
- let charts = echarts.init(id);
- if (!data) {
- data = {
- yName: ["设备001", "设备001", "设备001", "设备001", "设备001"],
- xData: [53, 24, 66, 23, 100],
- xDataName: "达成率",
- }
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ yName: ["设备001", "设备001", "设备001", "设备001", "设备001"],
+ xData: [53, 24, 66, 23, 100],
+ xDataName: "达成率",
}
- let backGround = []
- data.xData.forEach(() => {
- backGround.push(100)
- })
- let option = {
- grid: {
- left: "0%",
- right: "12%",
- bottom: "0%",
- top: "0%",
- containLabel: true,
+ }
+ let backGround = []
+ data.xData.forEach(() => {
+ backGround.push(100)
+ })
+ let option = {
+ grid: {
+ left: "0%",
+ right: "12%",
+ bottom: "0%",
+ top: "0%",
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "none",
+ },
+ textStyle: {
+ fontSize: 0.8 * vw
+ },
+ formatter: function (params) {
+ return (
+ params[0].name +
+ "
" +
+ "" +
+ params[0].seriesName +
+ " : " + params[0].value + '%'
+ );
+ },
+ },
+ dataZoom: [],
+ xAxis: {
+ show: false,
+ type: "value",
+ },
+ yAxis: [
+ {
+ type: "category",
+ inverse: true,
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: "#fff",
+ fontSize: 0.75 * vw
+ },
},
- tooltip: {
- trigger: "axis",
- axisPointer: {
- type: "none",
- },
- textStyle: {
- fontSize: 0.8 * vw
- },
- formatter: function (params) {
- return (
- params[0].name +
- "
" +
- "" +
- params[0].seriesName +
- " : " + params[0].value + '%'
- );
- },
+ splitLine: {
+ show: false,
},
- dataZoom: [],
- xAxis: {
- show: false,
- type: "value",
+ axisTick: {
+ show: false,
},
- yAxis: [
- {
- type: "category",
- inverse: true,
- axisLabel: {
- show: true,
- textStyle: {
- color: "#fff",
- fontSize: 0.75 * vw
- },
- },
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- data: data.yName,
- }
- ],
- series: [
- {
- name: data.xDataName,
- type: "bar",
- zlevel: 1,
- itemStyle: {
- normal: {
- barBorderRadius: 30,
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- {
- offset: 0,
- color: "rgb(57,89,255,1)",
- },
- {
- offset: 1,
- color: "rgb(46,200,207,1)",
- },
- ]),
- },
- },
- barWidth: vw,
- data: data.xData,
- label: {
- show: true,
- position: "right",
- textStyle: {
- color: "#fff",
- fontSize: 0.75 * vw
- },
- formatter: '{c}%'
- },
- },
- {
- name: "背景",
- type: "bar",
- barWidth: vw,
- barGap: "-100%",
- data: backGround,
- itemStyle: {
- normal: {
- color: "rgba(24,31,68,1)",
- barBorderRadius: 30,
- },
- },
- },
- ],
- };
- // if (data.xData?.length >= 3) {
- // option.dataZoom.push({
- // show: true,
- // type: 'slider',
- // yAxisIndex: 0,
- // width: 0.75 * vw,
- // start: 0,
- // end: 1 / (data.xData.length / 4) * 100,
- // textStyle: {
- // fontSize: 0,
- // color: 'rgba(0,0,0,0)'
- // }
- // })
- // }
- charts.setOption(option);
- $(window).resize(charts.resize);
+ axisLine: {
+ show: false,
+ },
+ data: data.yName,
+ }
+ ],
+ series: [
+ {
+ name: data.xDataName,
+ type: "bar",
+ zlevel: 1,
+ itemStyle: {
+ normal: {
+ barBorderRadius: 30,
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ {
+ offset: 0,
+ color: "rgb(57,89,255,1)",
+ },
+ {
+ offset: 1,
+ color: "rgb(46,200,207,1)",
+ },
+ ]),
+ },
+ },
+ barWidth: vw,
+ data: data.xData,
+ label: {
+ show: true,
+ position: "right",
+ textStyle: {
+ color: "#fff",
+ fontSize: 0.75 * vw
+ },
+ formatter: '{c}%'
+ },
+ },
+ {
+ name: "背景",
+ type: "bar",
+ barWidth: vw,
+ barGap: "-100%",
+ data: backGround,
+ itemStyle: {
+ normal: {
+ color: "rgba(24,31,68,1)",
+ barBorderRadius: 30,
+ },
+ },
+ },
+ ],
+ };
+ // if (data.xData?.length >= 3) {
+ // option.dataZoom.push({
+ // show: true,
+ // type: 'slider',
+ // yAxisIndex: 0,
+ // width: 0.75 * vw,
+ // start: 0,
+ // end: 1 / (data.xData.length / 4) * 100,
+ // textStyle: {
+ // fontSize: 0,
+ // color: 'rgba(0,0,0,0)'
+ // }
+ // })
+ // }
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) {
- clearInterval(time1)
- let charts = echarts.init(id);
- if (!data) {
- data = {
- yNameOne: ["设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001"],
- yData: [41, 99, 32, 41, 24, 4, 16, 64, 18],
- xDataName: "达成率",
- status: [1, 1, 1, 1, 1, 1, 1, 1, 1]
- }
+ clearInterval(time1)
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ yNameOne: ["设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001"],
+ yData: [41, 99, 32, 41, 24, 4, 16, 64, 18],
+ xDataName: "达成率",
+ status: [1, 1, 1, 1, 1, 1, 1, 1, 1]
}
- let myColor = ["green", "red", "yellow", "blue", "#8B78F6"];
- let bgBar = []
- data.yData.forEach(() => {
- bgBar.push(100)
+ }
+ let myColor = ["green", "red", "yellow", "blue", "#8B78F6"];
+ let bgBar = []
+ data.yData.forEach(() => {
+ bgBar.push(100)
+ })
+ let option = {
+ grid: {
+ // left: "-10%",
+ left: "0%",
+ right: "8%",
+ bottom: "0%",
+ top: "0%",
+ containLabel: true,
+ },
+ dataZoom: [],
+ xAxis: {
+ show: false,
+ },
+ yAxis: [
+ {
+ show: true,
+ data: data.yNameOne,
+ inverse: true,
+ axisLine: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "#fff",
+ // margin:150,
+ fontSize: 0.75 * vw,
+ textStyle: {
+ textAlign: 'center'
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: "条",
+ type: "bar",
+ yAxisIndex: 0,
+ data: data.yData,
+ barWidth: '80%',
+ itemStyle: {
+ normal: {
+ barBorderRadius: 30,
+ color: function (params) {
+ return myColor[data.status[params.dataIndex]];
+ },
+ },
+ },
+ },
+ {
+ name: "框",
+ type: "bar",
+ yAxisIndex: 0,
+ barGap: "-100%",
+ data: bgBar,
+ barWidth: '80%',
+ label: {
+ show: true,
+ position: "right",
+ textStyle: {
+ color: "#fff",
+ fontSize: 0.75 * vw
+ },
+ formatter: function (val, index, e) {
+ return data.yData[val.dataIndex] + '%'
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: "none",
+ borderColor: "#00c1de",
+ borderWidth: 1,
+ barBorderRadius: 15,
+ },
+ },
+ },
+ ],
+ };
+
+ if (data.yNameOne.length > 8) {
+ option.dataZoom.push({
+ show: false,
+ type: 'slider',
+ bottom: '0%',
+ yAxisIndex: 0,
+ height: 12,
+ start: 0,
+ end: 1 / (data.yNameOne.length / 9) * 100,
+ textStyle: {
+ fontSize: 0,
+ color: 'rgba(0,0,0,0)'
+ }
})
- let option = {
- grid: {
- // left: "-10%",
- left: "0%",
- right: "8%",
- bottom: "0%",
- top: "0%",
- containLabel: true,
- },
- dataZoom: [],
- xAxis: {
- show: false,
- },
- yAxis: [
- {
- show: true,
- data: data.yNameOne,
- inverse: true,
- axisLine: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- color: "#fff",
- // margin:150,
- fontSize: 0.75 * vw,
- textStyle: {
- textAlign: 'center'
- },
- },
- },
- ],
- series: [
- {
- name: "条",
- type: "bar",
- yAxisIndex: 0,
- data: data.yData,
- barWidth: '80%',
- itemStyle: {
- normal: {
- barBorderRadius: 30,
- color: function (params) {
- return myColor[data.status[params.dataIndex]];
- },
- },
- },
- },
- {
- name: "框",
- type: "bar",
- yAxisIndex: 0,
- barGap: "-100%",
- data: bgBar,
- barWidth: '80%',
- label: {
- show: true,
- position: "right",
- textStyle: {
- color: "#fff",
- fontSize: 0.75 * vw
- },
- formatter: function (val, index, e) {
- return data.yData[val.dataIndex] + '%'
- }
- },
- itemStyle: {
- normal: {
- color: "none",
- borderColor: "#00c1de",
- borderWidth: 1,
- barBorderRadius: 15,
- },
- },
- },
- ],
- };
- if (data.yNameOne.length > 8) {
- option.dataZoom.push({
- show: false,
- type: 'slider',
- bottom: '0%',
- yAxisIndex: 0,
- height: 12,
- start: 0,
- end: 1 / (data.yNameOne.length / 9) * 100,
- textStyle: {
- fontSize: 0,
- color: 'rgba(0,0,0,0)'
- }
- })
-
- let step = 1 / (data.yNameOne.length / 9) * 100
- time1 = setInterval(() => {
- option.dataZoom[0].end += step
- option.dataZoom[0].start += step
- if (option.dataZoom[0].start >= 100) {
- option.dataZoom[0].start = 0
- option.dataZoom[0].end = step
- }
- if (option.dataZoom[0].end >= 100) {
- option.dataZoom[0].end = 100
- option.dataZoom[0].start = option.dataZoom[0].end - step
- }
- charts.setOption(option);
- }, 6000)
- // time()
- }
- charts.setOption(option);
- $(window).resize(charts.resize);
+ let step = 1 / (data.yNameOne.length / 9) * 100
+ time1 = setInterval(() => {
+ option.dataZoom[0].end += step
+ option.dataZoom[0].start += step
+ if (option.dataZoom[0].start >= 100) {
+ option.dataZoom[0].start = 0
+ option.dataZoom[0].end = step
+ }
+ if (option.dataZoom[0].end >= 100) {
+ option.dataZoom[0].end = 100
+ option.dataZoom[0].start = option.dataZoom[0].end - step
+ }
+ charts.setOption(option);
+ }, 6000)
+ // time()
+ }
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
// 柱状+折线图
const barChartAndLineChart = function (data, id, rotate = 0) {
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
- yDataOne: [200, 382, 102, 267, 186, 315, 316],
- yDataOneName: "成品数量",
- yDataTwo: [382, 102, 186, 200, 102, 186, 315],
- yDataTwoName: "成品数量",
- }
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+ yDataOne: [200, 382, 102, 267, 186, 315, 316],
+ yDataOneName: "成品数量",
+ yDataTwo: [382, 102, 186, 200, 102, 186, 315],
+ yDataTwoName: "成品数量",
}
- let option = {
+ }
+ let option = {
+ tooltip: {
+ textStyle: {
+ fontSize: 0.8 * vw
+ }
+ },
+ grid: {
+ top: "15%",
+ left: "1%",
+ right: "1%",
+ bottom: "8%",
+ containLabel: true,
+ },
+ legend: {
+ show: false,
+ itemGap: 50,
+ data: ["注册总量", "最新注册量"],
+ textStyle: {
+ color: "#f9f9f9",
+ borderColor: "#fff",
+ },
+ },
+ dataZoom: [],
+ xAxis: [
+ {
+ type: "category",
+ boundaryGap: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff',
+ opacity: 0.3,
+ },
+ },
+ axisLabel: {
+ rotate: rotate,
+ interval: 0,
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ fontSize: 0.75 * vw
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: '#777777',
+ opacity: 0.3,
+ },
+ },
+ data: data.xName,
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ min: 0,
+ // max: 140,
+ splitNumber: 7,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: '#777777',
+ opacity: 0.3,
+ },
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff',
+ opacity: 0.3,
+ },
+ },
+ axisLabel: {
+ margin: 20,
+ textStyle: {
+ color: "#d1e6eb",
+ fontSize: 0.75 * vw
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ series: [
+ {
+ name: data.yDataOneName || '',
+ type: "line",
+ // smooth: true, //是否平滑曲线显示
+ // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
+ showAllSymbol: true,
+ symbol: "emptyCircle",
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+ {
+ offset: 0,
+ color: "#8fb9d7",
+ },
+ {
+ offset: 1,
+ color: "#0F59E6",
+ },
+ ]),
+ },
+ borderColor: "#f0f",
+ },
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#fff",
+ fontSize: 0.75 * vw
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "#A5DBF3",
+ },
+ },
tooltip: {
- textStyle: {
- fontSize: 0.8 * vw
- }
+ show: false
},
- grid: {
- top: "15%",
- left: "1%",
- right: "1%",
- bottom: "8%",
- containLabel: true,
+ areaStyle: {
+ //区域填充样式
+ normal: {
+ //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(12,120,249,0.4)",
+ },
+ {
+ offset: 1,
+ color: "rgba(0,0,0, 0)",
+ },
+ ],
+ false
+ ),
+ shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
+ shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+ },
},
- legend: {
- show: false,
- itemGap: 50,
- data: ["注册总量", "最新注册量"],
- textStyle: {
- color: "#f9f9f9",
- borderColor: "#fff",
- },
+ data: data.yDataOne || [],
+ },
+ {
+ name: data.yDataTwoName,
+ type: "bar",
+ barWidth: vw,
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#fff",
+ },
},
- dataZoom: [],
- xAxis: [
- {
- type: "category",
- boundaryGap: true,
- axisLine: {
- show: true,
- lineStyle: {
- color: '#fff',
- opacity: 0.3,
- },
- },
- axisLabel: {
- rotate: rotate,
- interval: 0,
- //坐标轴刻度标签的相关设置
- textStyle: {
- color: "#d1e6eb",
- margin: 15,
- fontSize: 0.75 * vw
- },
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#777777',
- opacity: 0.3,
- },
- },
- data: data.xName,
- },
- ],
- yAxis: [
- {
- type: "value",
- min: 0,
- // max: 140,
- splitNumber: 7,
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#777777',
- opacity: 0.3,
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#fff',
- opacity: 0.3,
- },
- },
- axisLabel: {
- margin: 20,
- textStyle: {
- color: "#d1e6eb",
- fontSize: 0.75 * vw
- },
- },
- axisTick: {
- show: false,
- },
- },
- ],
- series: [
- {
- name: data.yDataOneName || '',
- type: "line",
- // smooth: true, //是否平滑曲线显示
- // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
- showAllSymbol: true,
- symbol: "emptyCircle",
- symbolSize: 6,
- lineStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
- {
- offset: 0,
- color: "#8fb9d7",
- },
- {
- offset: 1,
- color: "#0F59E6",
- },
- ]),
- },
- borderColor: "#f0f",
- },
- label: {
- show: true,
- position: "top",
- textStyle: {
- color: "#fff",
- fontSize: 0.75 * vw
- },
- },
- itemStyle: {
- normal: {
- color: "#A5DBF3",
- },
- },
- tooltip: {
- show: false
- },
- areaStyle: {
- //区域填充样式
- normal: {
- //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(12,120,249,0.4)",
- },
- {
- offset: 1,
- color: "rgba(0,0,0, 0)",
- },
- ],
- false
- ),
- shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
- shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
- },
- },
- data: data.yDataOne || [],
- },
- {
- name: data.yDataTwoName,
- type: "bar",
- barWidth: vw,
- label: {
- show: true,
- position: "top",
- textStyle: {
- color: "#fff",
- },
- },
- itemStyle: {
- normal: {
- barBorderRadius: 5,
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "#0CAFF6",
- },
- {
- offset: 1,
- color: "#0F59E6",
- },
- ]),
- },
- },
- data: data.yDataTwo,
- },
- ],
- };
+ itemStyle: {
+ normal: {
+ barBorderRadius: 5,
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: "#0CAFF6",
+ },
+ {
+ offset: 1,
+ color: "#0F59E6",
+ },
+ ]),
+ },
+ },
+ data: data.yDataTwo,
+ },
+ ],
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
const barChartAndLineChartTwo = function (data, id) {
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
- yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
- yDataOneName: "百分比",
- yDataTwo: [382, 102, 186, 200, 102, 186, 315, 255, 527, 837, 587, 173],
- yDataTwoName: "成品数量",
- }
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+ yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
+ yDataOneName: "百分比",
+ yDataTwo: [382, 102, 186, 200, 102, 186, 315, 255, 527, 837, 587, 173],
+ yDataTwoName: "成品数量",
}
- let option = {
- grid: {
- top: "15%",
- left: "1%",
- right: "1%",
- bottom: "2%",
- containLabel: true,
+ }
+ let option = {
+ grid: {
+ top: "15%",
+ left: "1%",
+ right: "1%",
+ bottom: "2%",
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999',
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- crossStyle: {
- color: '#999',
- },
- label: {
- fontSize: 0.5 * vw,
- }
- },
- textStyle: {
- fontSize: 0.5 * vw,
- }
+ label: {
+ fontSize: 0.5 * vw,
+ }
+ },
+ textStyle: {
+ fontSize: 0.5 * vw,
+ }
+ },
+ legend: {
+ data: [data.yDataOneName, data.yDataTwoName],
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ fontSize: 0.75 * vw
+ },
+ },
+ xAxis: [
+ {
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ fontSize: 0.75 * vw
+ },
},
- legend: {
- data: [data.yDataOneName, data.yDataTwoName],
- textStyle: {
- color: "#d1e6eb",
- margin: 15,
- fontSize: 0.75 * vw
- },
+ type: 'category',
+ data: data.xName,
+ axisPointer: {
+ type: 'shadow'
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,0.1)",
+ },
},
- xAxis: [
- {
- axisLabel: {
- //坐标轴刻度标签的相关设置
- textStyle: {
- color: "#d1e6eb",
- margin: 15,
- fontSize: 0.75 * vw
- },
- },
- type: 'category',
- data: data.xName,
- axisPointer: {
- type: 'shadow'
- }
- }
- ],
- yAxis: [
- {
- type: 'value',
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,0.1)",
- },
- },
- axisLabel: {
- //坐标轴刻度标签的相关设置
- textStyle: {
- color: "#d1e6eb",
- margin: 15,
- fontSize: 0.75 * vw
- },
- formatter: '{value} %'
- }
- },
- {
- type: 'value',
- splitLine: {
- show: false,
- },
- axisLabel: {
- //坐标轴刻度标签的相关设置
- textStyle: {
- color: "#d1e6eb",
- margin: 15,
- fontSize: 0.75 * vw
- },
- formatter: '{value} '
- }
- }
- ],
- series: [
- {
- name: data.yDataOneName,
- type: 'bar',
- data: data.yDataOne,
- label: {
- show: true,
- position: ['10%', `50%`],
- textStyle: {
- color: "rgba(255,255,255,0.5)",
- fontSize: 0.75 * vw
- },
- },
- itemStyle: {
- normal: {
- color: '#0BB5FB',
- },
- },
- },
- {
- name: data.yDataTwoName,
- type: 'line',
- yAxisIndex: 1,
- data: data.yDataTwo,
- itemStyle: {
- normal: {
- color: '#0DB99D',
- },
- },
- }
- ]
- };
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ fontSize: 0.75 * vw
+ },
+ formatter: '{value} %'
+ }
+ },
+ {
+ type: 'value',
+ splitLine: {
+ show: false,
+ },
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ fontSize: 0.75 * vw
+ },
+ formatter: '{value} '
+ }
+ }
+ ],
+ series: [
+ {
+ name: data.yDataOneName,
+ type: 'bar',
+ data: data.yDataOne,
+ label: {
+ show: true,
+ position: ['10%', `50%`],
+ textStyle: {
+ color: "rgba(255,255,255,0.5)",
+ fontSize: 0.75 * vw
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: '#0BB5FB',
+ },
+ },
+ },
+ {
+ name: data.yDataTwoName,
+ type: 'line',
+ yAxisIndex: 1,
+ data: data.yDataTwo,
+ itemStyle: {
+ normal: {
+ color: '#0DB99D',
+ },
+ },
+ }
+ ]
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
const barChartAndLineChartThree = function (data, id) {
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
- yDataOne: [200, 382, 102, 267, 186, 315, 316],
- yDataOneName: "实际产量",
- yDataTwo: [382, 102, 186, 200, 102, 186, 315],
- yDataTwoName: "目标产量",
- }
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+ yDataOne: [200, 382, 102, 267, 186, 315, 316],
+ yDataOneName: "实际产量",
+ yDataTwo: [382, 102, 186, 200, 102, 186, 315],
+ yDataTwoName: "目标产量",
}
- let option = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- crossStyle: {
- color: '#999',
- },
- label: {
- fontSize: 0.5 * vw,
- }
- },
- textStyle: {
- fontSize: 0.8 * vw
- }
+ }
+ let option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ crossStyle: {
+ color: '#999',
},
- grid: {
- top: "15%",
- left: "1%",
- right: "1%",
- bottom: "8%",
- containLabel: true,
+ label: {
+ fontSize: 0.5 * vw,
+ }
+ },
+ textStyle: {
+ fontSize: 0.8 * vw
+ }
+ },
+ grid: {
+ top: "15%",
+ left: "1%",
+ right: "1%",
+ bottom: "8%",
+ containLabel: true,
+ },
+ legend: {
+ show: true,
+ itemGap: 50,
+ data: [data.yDataOneName, data.yDataTwoName],
+ textStyle: {
+ color: "#f9f9f9",
+ borderColor: "#fff",
+ fontSize: 0.75 * vw
+ },
+ },
+ dataZoom: [],
+ xAxis: [
+ {
+ type: "category",
+ boundaryGap: true,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff',
+ opacity: 0.3,
+ },
},
- legend: {
- show: true,
- itemGap: 50,
- data: [data.yDataOneName, data.yDataTwoName],
- textStyle: {
- color: "#f9f9f9",
- borderColor: "#fff",
- fontSize: 0.75 * vw
- },
+ axisLabel: {
+ interval: 0,
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ fontSize: 0.75 * vw
+ },
},
- dataZoom: [],
- xAxis: [
- {
- type: "category",
- boundaryGap: true,
- axisLine: {
- show: true,
- lineStyle: {
- color: '#fff',
- opacity: 0.3,
- },
- },
- axisLabel: {
- interval: 0,
- //坐标轴刻度标签的相关设置
- textStyle: {
- color: "#d1e6eb",
- margin: 15,
- fontSize: 0.75 * vw
- },
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#777777',
- opacity: 0.3,
- },
- },
- data: data.xName,
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: '#777777',
+ opacity: 0.3,
+ },
+ },
+ data: data.xName,
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ min: 0,
+ // max: 140,
+ splitNumber: 7,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: '#777777',
+ opacity: 0.3,
+ },
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: '#fff',
+ opacity: 0.3,
+ },
+ },
+ axisLabel: {
+ margin: 20,
+ textStyle: {
+ color: "#d1e6eb",
+ fontSize: 0.75 * vw
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ series: [
+ {
+ name: data.yDataOneName,
+ type: "bar",
+ barWidth: '70%',
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#fff",
+ fontSize: 0.75 * vw
+ },
+ },
+ itemStyle: {
+ normal: {
+ barBorderRadius: 5,
+ color: function (val) {
+ console.log()
+ if (data.yDataOne[val.dataIndex] >= data.yDataTwo[val.dataIndex]) {
+ return '#30e391'
+ } else {
+ return '#FE70A6'
+ }
+ // return "#0D81ED"
},
- ],
- yAxis: [
- {
- type: "value",
- min: 0,
- // max: 140,
- splitNumber: 7,
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#777777',
- opacity: 0.3,
- },
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#fff',
- opacity: 0.3,
- },
- },
- axisLabel: {
- margin: 20,
- textStyle: {
- color: "#d1e6eb",
- fontSize: 0.75 * vw
- },
- },
- axisTick: {
- show: false,
- },
- },
- ],
- series: [
- {
- name: data.yDataOneName,
- type: "bar",
- barWidth: '70%',
- label: {
- show: true,
- position: "top",
- textStyle: {
- color: "#fff",
- fontSize: 0.75 * vw
- },
- },
- itemStyle: {
- normal: {
- barBorderRadius: 5,
- color: function (val) {
- console.log()
- if (data.yDataOne[val.dataIndex] >= data.yDataTwo[val.dataIndex]) {
- return '#30e391'
- } else {
- return '#FE70A6'
- }
- // return "#0D81ED"
- },
- },
- },
- data: data.yDataOne,
- },
- {
- name: data.yDataTwoName || '',
- type: "line",
- // smooth: true, //是否平滑曲线显示
- // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
- showAllSymbol: true,
- symbol: "emptyCircle",
- symbolSize: 6,
- lineStyle: {
- normal: {
- width: 3,
- color: '#fff',
- },
- borderColor: "#f0f",
- },
- label: {
- show: true,
- position: "top",
- textStyle: {
- color: "#fff",
- fontSize: 0.75 * vw
- },
- },
- itemStyle: {
- color: '#F2D770',
- border: 0,
- },
- // tooltip: {
- // show: false
- // },
- data: data.yDataTwo || [],
- },
- ],
- };
+ },
+ },
+ data: data.yDataOne,
+ },
+ {
+ name: data.yDataTwoName || '',
+ type: "line",
+ // smooth: true, //是否平滑曲线显示
+ // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
+ showAllSymbol: true,
+ symbol: "emptyCircle",
+ symbolSize: 6,
+ lineStyle: {
+ normal: {
+ width: 3,
+ color: '#fff',
+ },
+ borderColor: "#f0f",
+ },
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#fff",
+ fontSize: 0.75 * vw
+ },
+ },
+ itemStyle: {
+ color: '#F2D770',
+ border: 0,
+ },
+ // tooltip: {
+ // show: false
+ // },
+ data: data.yDataTwo || [],
+ },
+ ],
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
const barChartAndLineChartFour = function (data, id) {
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
- yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
- yDataOneName: "不良数",
- yDataTwo: [9, 3, 7, 7, 7, 2, 7, 1, 6, 7, 2, 1, 5],
- yDataTwoName: "一次装配不合格率",
- yDataThree: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
- yDataThreeName: "目标",
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+ yDataOne: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
+ yDataOneName: "不良数",
+ yDataTwo: [9, 3, 7, 7, 7, 2, 7, 1, 6, 7, 2, 1, 5],
+ yDataTwoName: "一次装配不合格率",
+ yDataThree: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
+ yDataThreeName: "目标",
+ }
+ }
+ let option = {
+ grid: {
+ top: "15%",
+ left: "1%",
+ right: "1%",
+ bottom: "2%",
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999',
+ },
+ label: {
+ fontSize: 0.5 * vw,
}
- }
- let option = {
- grid: {
- top: "15%",
- left: "1%",
- right: "1%",
- bottom: "2%",
- containLabel: true,
+ },
+ textStyle: {
+ width: 30,
+ fontSize: 0.5 * vw,
+ }
+ },
+ legend: {
+ itemWidth: 3 * vw,
+ data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ fontSize: 0.75 * vw
+ },
+ },
+ xAxis: [
+ {
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ fontSize: 0.75 * vw
+ },
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- crossStyle: {
- color: '#999',
- },
- label: {
- fontSize: 0.5 * vw,
- }
- },
- textStyle: {
- width: 30,
- fontSize: 0.5 * vw,
- }
+ type: 'category',
+ data: data.xName,
+ axisPointer: {
+ type: 'shadow'
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,0.1)",
+ },
},
- legend: {
- itemWidth: 3 * vw,
- data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
- textStyle: {
- color: "#d1e6eb",
- margin: 15,
- fontSize: 0.75 * vw
- },
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ fontSize: 0.75 * vw
+ },
+ formatter: '{value}'
+ }
+ },
+ {
+ type: 'value',
+ splitLine: {
+ show: false,
},
- xAxis: [
- {
- axisLabel: {
- //坐标轴刻度标签的相关设置
- textStyle: {
- color: "#d1e6eb",
- margin: 15,
- fontSize: 0.75 * vw
- },
- },
- type: 'category',
- data: data.xName,
- axisPointer: {
- type: 'shadow'
- }
- }
- ],
- yAxis: [
- {
- type: 'value',
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,0.1)",
- },
- },
- axisLabel: {
- //坐标轴刻度标签的相关设置
- textStyle: {
- color: "#d1e6eb",
- margin: 15,
- fontSize: 0.75 * vw
- },
- formatter: '{value}'
- }
+ axisLabel: {
+ //坐标轴刻度标签的相关设置
+ textStyle: {
+ color: "#d1e6eb",
+ margin: 15,
+ fontSize: 0.75 * vw
+ },
+ formatter: '{value}% '
+ }
+ }
+ ],
+ series: [
+ {
+ name: data.yDataOneName,
+ type: 'bar',
+ data: data.yDataOne,
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ color: "rgba(255,255,255,0.5)",
+ fontSize: 0.75 * vw
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: function (val) {
+ console.log()
+ if (data.yDataTwo[val.dataIndex] < data.yDataThree[val.dataIndex]) {
+ return '#30e391'
+ } else {
+ return '#FE70A6'
+ }
+ // return "#0D81ED"
},
- {
- type: 'value',
- splitLine: {
- show: false,
- },
- axisLabel: {
- //坐标轴刻度标签的相关设置
- textStyle: {
- color: "#d1e6eb",
- margin: 15,
- fontSize: 0.75 * vw
- },
- formatter: '{value}% '
- }
- }
- ],
- series: [
- {
- name: data.yDataOneName,
- type: 'bar',
- data: data.yDataOne,
- label: {
- show: true,
- position: 'top',
- textStyle: {
- color: "rgba(255,255,255,0.5)",
- fontSize: 0.75 * vw
- },
- },
- itemStyle: {
- normal: {
- color: function (val) {
- console.log()
- if (data.yDataTwo[val.dataIndex] < data.yDataThree[val.dataIndex]) {
- return '#30e391'
- } else {
- return '#FE70A6'
- }
- // return "#0D81ED"
- },
- },
- },
- },
- {
- name: data.yDataTwoName,
- type: 'line',
- yAxisIndex: 1,
- data: data.yDataTwo,
- itemStyle: {
- normal: {
- color: '#F9A25B',
- },
- },
- },
- {
- name: data.yDataThreeName,
- type: 'line',
- yAxisIndex: 1,
- data: data.yDataThree,
- itemStyle: {
- normal: {
- color: '#0DB99D',
- },
- },
- }
- ]
- };
- if (Math.max(...data.yDataOne) <= 5) {
- option.yAxis[0].max = 5
- }
+ },
+ },
+ },
+ {
+ name: data.yDataTwoName,
+ type: 'line',
+ yAxisIndex: 1,
+ data: data.yDataTwo,
+ itemStyle: {
+ normal: {
+ color: '#F9A25B',
+ },
+ },
+ },
+ {
+ name: data.yDataThreeName,
+ type: 'line',
+ yAxisIndex: 1,
+ data: data.yDataThree,
+ itemStyle: {
+ normal: {
+ color: '#0DB99D',
+ },
+ },
+ }
+ ]
+ };
+ if (Math.max(...data.yDataOne) <= 5) {
+ option.yAxis[0].max = 5
+ }
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
// 折线图
-const lineChart = function (data, id, unit = '',smooth=false,color='#14bd2d') {
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
- yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
- yDataName: "提升百分比",
- }
+const lineChart = function (data, id, unit = '', smooth = false, color = '#14bd2d') {
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+ yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
+ yDataName: "提升百分比",
}
- let min = Math.ceil(Math.min(...data.yData))
- let max = Math.ceil(Math.max(...data.yData))
- let option = {
- grid: {
- top: '28%',
- left: '5%',
- right: '5%',
- bottom: '0%',
- containLabel: true,
+ }
+ let min = Math.ceil(Math.min(...data.yData))
+ let max = Math.ceil(Math.max(...data.yData))
+ let option = {
+ grid: {
+ top: '28%',
+ left: '5%',
+ right: '5%',
+ bottom: '0%',
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ label: {
+ show: true,
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- label: {
- show: true,
- },
- },
+ },
+ },
+ legend: {
+ top: '5%',
+ itemWidth: 20,
+ itemHeight: 10,
+ itemStyle: {
+ borderWidth: 1,
+ borderHeight: 1,
+ },
+ formatter: function (val) {
+ return `${val} `
+ },
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: function () {
+
},
- legend: {
- top: '5%',
- itemWidth:20,
- itemHeight:10,
- itemStyle:{
- borderWidth:1,
- borderHeight:1,
- },
- formatter:function (val) {
- return `${val} `
- },
+ },
+ },
+ xAxis: {
+ type: 'category',
+ data: data.xName,
+ axisLine: {
+ show: true,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#ffffff', //X轴文字颜色
+ },
+ },
+ },
+ yAxis: [
+ {
+ name: '合格率',
+ min: (min - 2 < 0) ? 0 : min - 2,
+ max: (max + 2 > 100) ? 100 : max + 2,
+ type: 'value',
+ nameTextStyle: {
+ color: '#fff',
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#eeeeee',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ textStyle: {
+ color: '#ffffff',
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: data.yDataName,
+ type: 'line',
+ smooth: smooth,
+ showAllSymbol: true, //显示所有图形。
+ symbol: 'circle', //标记的图形为实心圆
+ symbolSize: 4, //标记的大小
+ itemStyle: {
+ //折线拐点标志的样式
+ color: color,
+ borderWidth: '2',
+ borderColor: color,
+ },
+ lineStyle: {
+ color: color,
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ formatter: `{c}${unit}`,
+ show: true,
+ position: "top",
textStyle: {
- fontSize: 0.75 * vw,
- color: function () {
-
- },
+ color: color,
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.5 * vw,
},
+ },
},
- xAxis: {
- type: 'category',
- data: data.xName,
- axisLine: {
- show: true,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#ffffff', //X轴文字颜色
- },
- },
- },
- yAxis: [
- {
- name:'合格率',
- min: (min - 2 < 0) ? 0 : min - 2,
- max: (max + 2 > 100) ? 100 : max + 2,
- type: 'value',
- nameTextStyle: {
- color: '#fff',
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: '#eeeeee',
- },
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: true,
- interval:0,
- textStyle: {
- color: '#ffffff',
- },
- },
- },
- ],
- series: [
- {
- name: data.yDataName,
- type: 'line',
- smooth:smooth,
- showAllSymbol: true, //显示所有图形。
- symbol: 'circle', //标记的图形为实心圆
- symbolSize: 4, //标记的大小
- itemStyle: {
- //折线拐点标志的样式
- color: color,
- borderWidth: '2',
- borderColor: color,
- },
- lineStyle: {
- color: color,
- },
- label: {
- //图形上的文本标签
- normal: {
- formatter: `{c}${unit}`,
- show: true,
- position: "top",
- textStyle: {
- color: color,
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.5 * vw,
- },
- },
- },
- data: data.yData,
- },
- ],
- };
+ data: data.yData,
+ },
+ ],
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
const lineChartTwo = function (data, id, unit = '') {
- let charts = echarts.init(id);
- let color = ['#3094ea','#2fd032','#6ba72c','#7b6931','#8909E5']
- if (!data) {
- data = {
- xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
- yData: [
- {
- name: "提升百分比",
- data: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
- },
- {
- name: "百分比",
- data: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
- },
- ],
- }
+ let charts = echarts.init(id);
+ let color = ['#3094ea', '#2fd032', '#6ba72c', '#7b6931', '#8909E5']
+ if (!data) {
+ data = {
+ xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+ yData: [
+ {
+ name: "提升百分比",
+ data: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
+ },
+ {
+ name: "百分比",
+ data: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
+ },
+ ],
}
- let num = data.yData.map(val => val.data).flat(Infinity)
- let min = Math.ceil(Math.min(...num))
- let max = Math.ceil(Math.max(...num))
- let series = data.yData.map((val,index) => {
- return {
- name: val.name,
- type: 'line',
- showAllSymbol: true, //显示所有图形。
- symbol: 'circle', //标记的图形为实心圆
- symbolSize: 4, //标记的大小
- itemStyle: {
- //折线拐点标志的样式
- color: color[index % color.length],
- borderWidth: '2',
- borderColor: color[index % color.length],
- },
- lineStyle: {
- color: color[index % color.length],
- },
- label: {
- //图形上的文本标签
- normal: {
- formatter: `{c}${unit}`,
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.8 * vw,
- },
- },
- },
- data: val.data,
- }
- })
- let option = {
- grid: {
- top: '20%',
- left: '5%',
- right: '5%',
- bottom: '8%',
- containLabel: true,
+ }
+ let num = data.yData.map(val => val.data).flat(Infinity)
+ let min = Math.ceil(Math.min(...num))
+ let max = Math.ceil(Math.max(...num))
+ let series = data.yData.map((val, index) => {
+ return {
+ name: val.name,
+ type: 'line',
+ showAllSymbol: true, //显示所有图形。
+ symbol: 'circle', //标记的图形为实心圆
+ symbolSize: 4, //标记的大小
+ itemStyle: {
+ //折线拐点标志的样式
+ color: color[index % color.length],
+ borderWidth: '2',
+ borderColor: color[index % color.length],
+ },
+ lineStyle: {
+ color: color[index % color.length],
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ formatter: `{c}${unit}`,
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.8 * vw,
+ },
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- label: {
- show: true,
- },
- },
+ },
+ data: val.data,
+ }
+ })
+ let option = {
+ grid: {
+ top: '20%',
+ left: '5%',
+ right: '5%',
+ bottom: '8%',
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ label: {
+ show: true,
},
- legend: {
- top: '5%',
- itemWidth:20,
- itemHeight:10,
- formatter:function (val) {
- return `${val}`
- },
- textStyle: {
- fontSize: 0.75 * vw,
- color: () => {},
- },
+ },
+ },
+ legend: {
+ top: '5%',
+ itemWidth: 20,
+ itemHeight: 10,
+ formatter: function (val) {
+ return `${val}`
+ },
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: () => {
},
- xAxis: {
- type: 'category',
- data: data.xName,
- axisLine: {
- show: true,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#ffffff', //X轴文字颜色
- },
- },
+ },
+ },
+ xAxis: {
+ type: 'category',
+ data: data.xName,
+ axisLine: {
+ show: true,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#ffffff', //X轴文字颜色
},
- yAxis: [
- {
- min: (min - 2 < 0) ? 0 : min - 2,
- max: (max + 2 > 100) ? 100 : max + 2,
- type: 'value',
- nameTextStyle: {
- color: '#393939',
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: '#eeeeee',
- },
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#ffffff',
- },
- },
- },
- ],
- series: series,
- };
+ },
+ },
+ yAxis: [
+ {
+ min: (min - 2 < 0) ? 0 : min - 2,
+ max: (max + 2 > 100) ? 100 : max + 2,
+ type: 'value',
+ nameTextStyle: {
+ color: '#393939',
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#eeeeee',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#ffffff',
+ },
+ },
+ },
+ ],
+ series: series,
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
-const lineChartThree = function (data, id, unit = '',smooth=false) {
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
- yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
- yDataName: "提升百分比",
- yDataTwo: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
- yDataTwoName: "百分比"
- }
+const lineChartThree = function (data, id, unit = '', smooth = false) {
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
+ yData: [61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],
+ yDataName: "提升百分比",
+ yDataTwo: [60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60],
+ yDataTwoName: "百分比"
}
- let min = Math.ceil(Math.min(...data.yData,...(data.yDataTwo || [])))
- let max = Math.ceil(Math.max(...data.yData,...(data.yDataTwo || [])))
- let option = {
- grid: {
- top: '28%',
- left: '5%',
- right: '5%',
- bottom: '0%',
- containLabel: true,
+ }
+ let min = Math.ceil(Math.min(...data.yData, ...(data.yDataTwo || [])))
+ let max = Math.ceil(Math.max(...data.yData, ...(data.yDataTwo || [])))
+ let option = {
+ grid: {
+ top: '28%',
+ left: '5%',
+ right: '5%',
+ bottom: '0%',
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ label: {
+ show: true,
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow',
- label: {
- show: true,
- },
- },
+ },
+ },
+ legend: {
+ top: '5%',
+ itemWidth: 20,
+ itemHeight: 10,
+ itemStyle: {
+ borderWidth: 1,
+ borderHeight: 1,
+ },
+ formatter: function (val) {
+ return `${val} `
+ },
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: function () {
+
},
- legend: {
- top: '5%',
- itemWidth:20,
- itemHeight:10,
- itemStyle:{
- borderWidth:1,
- borderHeight:1,
- },
- formatter:function (val) {
- return `${val} `
- },
+ },
+ },
+ xAxis: {
+ type: 'category',
+ data: data.xName,
+ axisLine: {
+ show: true,
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ textStyle: {
+ color: '#ffffff', //X轴文字颜色
+ },
+ },
+ },
+ yAxis: [
+ {
+ name: '(元/台)',
+ min: (min - 2 < 0) ? 0 : min - 2,
+ max: (max + 2 > 100) ? 100 : max + 2,
+ type: 'value',
+ nameTextStyle: {
+ color: '#fff',
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: '#eeeeee',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: true,
+ interval: 0,
+ textStyle: {
+ color: '#ffffff',
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: data.yDataName,
+ type: 'line',
+ smooth: smooth,
+ showAllSymbol: true, //显示所有图形。
+ symbol: 'circle', //标记的图形为实心圆
+ symbolSize: 4, //标记的大小
+ itemStyle: {
+ //折线拐点标志的样式
+ color: '#14bd2d',
+ borderWidth: '2',
+ borderColor: '#14bd2d',
+ },
+ lineStyle: {
+ color: '#14bd2d',
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ formatter: `{c}${unit}`,
+ show: true,
+ position: "top",
textStyle: {
- fontSize: 0.75 * vw,
- color: function () {
-
- },
+ color: "#14bd2d",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.8 * vw,
},
+ },
},
- xAxis: {
- type: 'category',
- data: data.xName,
- axisLine: {
- show: true,
- },
- axisTick: {
- show: false,
- },
- axisLabel: {
- show: true,
- textStyle: {
- color: '#ffffff', //X轴文字颜色
- },
- },
+ data: data.yData,
+ },
+ {
+ name: data.yDataTwoName,
+ type: 'line',
+ smooth: smooth,
+ showAllSymbol: true, //显示所有图形。
+ symbol: 'circle', //标记的图形为实心圆
+ symbolSize: 4, //标记的大小
+ itemStyle: {
+ //折线拐点标志的样式
+ color: '#3094ea',
+ borderWidth: '2',
+ borderColor: '#3094ea',
},
- yAxis: [
- {
- name:'(元/台)',
- min: (min - 2 < 0) ? 0 : min - 2,
- max: (max + 2 > 100) ? 100 : max + 2,
- type: 'value',
- nameTextStyle: {
- color: '#fff',
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: '#eeeeee',
- },
- },
- axisTick: {
- show: false,
- },
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: true,
- interval:0,
- textStyle: {
- color: '#ffffff',
- },
- },
+ lineStyle: {
+ color: '#3094ea',
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ formatter: `{c}${unit}`,
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#3094ea",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.8 * vw,
},
- ],
- series: [
- {
- name: data.yDataName,
- type: 'line',
- smooth:smooth,
- showAllSymbol: true, //显示所有图形。
- symbol: 'circle', //标记的图形为实心圆
- symbolSize: 4, //标记的大小
- itemStyle: {
- //折线拐点标志的样式
- color: '#14bd2d',
- borderWidth: '2',
- borderColor: '#14bd2d',
- },
- lineStyle: {
- color: '#14bd2d',
- },
- label: {
- //图形上的文本标签
- normal: {
- formatter: `{c}${unit}`,
- show: true,
- position: "top",
- textStyle: {
- color: "#14bd2d",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.8 * vw,
- },
- },
- },
- data: data.yData,
- },
- {
- name: data.yDataTwoName,
- type: 'line',
- smooth:smooth,
- showAllSymbol: true, //显示所有图形。
- symbol: 'circle', //标记的图形为实心圆
- symbolSize: 4, //标记的大小
- itemStyle: {
- //折线拐点标志的样式
- color: '#3094ea',
- borderWidth: '2',
- borderColor: '#3094ea',
- },
- lineStyle: {
- color: '#3094ea',
- },
- label: {
- //图形上的文本标签
- normal: {
- formatter: `{c}${unit}`,
- show: true,
- position: "top",
- textStyle: {
- color: "#3094ea",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.8 * vw,
- },
- },
- },
- areaStyle: {
- normal: {
- color: {
- type: 'linear',
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- colorStops: [{
- offset: 0, color: 'rgba(76,82,193,0.7)' // 0% 处的颜色
- }, {
- offset: 1, color: 'rgba(191,194,220,0.4)' // 100% 处的颜色
- }],
- global: false // 缺省为 false
- }
- },
- },
- data: data.yDataTwo,
- },
- ],
- };
+ },
+ },
+ areaStyle: {
+ normal: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [{
+ offset: 0, color: 'rgba(76,82,193,0.7)' // 0% 处的颜色
+ }, {
+ offset: 1, color: 'rgba(191,194,220,0.4)' // 100% 处的颜色
+ }],
+ global: false // 缺省为 false
+ }
+ },
+ },
+ data: data.yDataTwo,
+ },
+ ],
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
// 饼图
const pieChart = function (data, id, unit = '次') {
- let charts = echarts.init(id);
- if (!data) {
- data = [
- {
- value: 285,
- name: "类型1",
+ let charts = echarts.init(id);
+ if (!data) {
+ data = [
+ {
+ value: 285,
+ name: "类型1",
+ },
+ {
+ value: 410,
+ name: "类型2",
+ },
+ {
+ value: 274,
+ name: "类型3",
+ },
+ {
+ value: 235,
+ name: "类型4",
+ },
+ ]
+ }
+ if (data.length === 0) {
+ data = [{
+ value: 0,
+ name: ''
+ }]
+ }
+ let option = {
+ tooltip: {
+ trigger: "item",
+ formatter: "{b} : {c} ({d}%)",
+ textStyle: {
+ fontSize: 0.8 * vw
+ }
+ },
+
+ series: [
+ {
+ name: "访问来源",
+ type: "pie",
+ radius: "70%",
+ center: ["50%", "50%"],
+ colorBy: 'data',
+ // color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
+ data: data,
+ roseType: "radius",
+ label: {
+ normal: {
+ formatter: `{b|{b}} \n {c|{c}${unit}}`,
+ rich: {
+ c: {
+ color: "rgb(241,246,104)",
+ fontSize: 0.75 * vw,
+ lineHeight: 5,
+ },
+ b: {
+ color: "rgb(98,137,169)",
+ fontSize: 0.75 * vw,
+ height: 1.5 * vw,
+ },
},
- {
- value: 410,
- name: "类型2",
- },
- {
- value: 274,
- name: "类型3",
- },
- {
- value: 235,
- name: "类型4",
- },
- ]
- }
- if (data.length === 0) {
- data = [{
- value: 0,
- name: ''
- }]
- }
- let option = {
- tooltip: {
- trigger: "item",
- formatter: "{b} : {c} ({d}%)",
- textStyle: {
- fontSize: 0.8 * vw
- }
+ },
},
-
- series: [
- {
- name: "访问来源",
- type: "pie",
- radius: "70%",
- center: ["50%", "50%"],
- colorBy: 'data',
- // color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
- data: data,
- roseType: "radius",
- label: {
- normal: {
- formatter: `{b|{b}} \n {c|{c}${unit}}`,
- rich: {
- c: {
- color: "rgb(241,246,104)",
- fontSize: 0.75 * vw,
- lineHeight: 5,
- },
- b: {
- color: "rgb(98,137,169)",
- fontSize: 0.75 * vw,
- height: 1.5 * vw,
- },
- },
- },
- },
- emphasis: {
- label: {
- fontSize: 0.75 * vw
- }
- },
- labelLine: {
- normal: {
- lineStyle: {
- color: "rgb(98,137,169)",
- },
- smooth: true,
- length: 20,
- length2: 20,
- },
- },
+ emphasis: {
+ label: {
+ fontSize: 0.75 * vw
+ }
+ },
+ labelLine: {
+ normal: {
+ lineStyle: {
+ color: "rgb(98,137,169)",
},
- ],
- };
+ smooth: true,
+ length: 20,
+ length2: 20,
+ },
+ },
+ },
+ ],
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
const pieChartTwo = function (data, id, unit = '次') {
- let charts = echarts.init(id);
- if (!data) {
- data = [
- {
- value: 285,
- name: "类型1",
+ let charts = echarts.init(id);
+ if (!data) {
+ data = [
+ {
+ value: 285,
+ name: "类型1",
+ },
+ {
+ value: 410,
+ name: "类型2",
+ },
+ {
+ value: 274,
+ name: "类型3",
+ },
+ {
+ value: 235,
+ name: "类型4",
+ },
+ ]
+ }
+ if (data.length === 0) {
+ data = [{
+ value: 0,
+ name: ''
+ }]
+ }
+ let option = {
+ tooltip: {
+ trigger: "item",
+ formatter: "{b} : {c} ({d}%)",
+ textStyle: {
+ fontSize: 0.8 * vw
+ }
+ },
+
+ series: [
+ {
+ name: "访问来源",
+ type: "pie",
+ radius: "50%",
+ center: ["50%", "50%"],
+ colorBy: 'data',
+ // color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
+ data: data,
+ roseType: "radius",
+ overflow: 'break',
+ label: {
+ overflow: 'break',
+ normal: {
+ overflow: 'break',
+ formatter: `{b|{b}} \n {c|{c}${unit}}`,
+ rich: {
+ c: {
+ color: "rgb(241,246,104)",
+ fontSize: 0.75 * vw,
+ lineHeight: 5,
+ },
+ b: {
+ color: "rgb(98,137,169)",
+ fontSize: 0.75 * vw,
+ height: 1.5 * vw,
+ },
},
- {
- value: 410,
- name: "类型2",
- },
- {
- value: 274,
- name: "类型3",
- },
- {
- value: 235,
- name: "类型4",
- },
- ]
- }
- if (data.length === 0) {
- data = [{
- value: 0,
- name: ''
- }]
- }
- let option = {
- tooltip: {
- trigger: "item",
- formatter: "{b} : {c} ({d}%)",
- textStyle: {
- fontSize: 0.8 * vw
- }
+ },
},
-
- series: [
- {
- name: "访问来源",
- type: "pie",
- radius: "50%",
- center: ["50%", "50%"],
- colorBy: 'data',
- // color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
- data: data,
- roseType: "radius",
- overflow:'break',
- label: {
- overflow:'break',
- normal: {
- overflow:'break',
- formatter: `{b|{b}} \n {c|{c}${unit}}`,
- rich: {
- c: {
- color: "rgb(241,246,104)",
- fontSize: 0.75 * vw,
- lineHeight: 5,
- },
- b: {
- color: "rgb(98,137,169)",
- fontSize: 0.75 * vw,
- height: 1.5 * vw,
- },
- },
- },
- },
- emphasis: {
- label: {
- fontSize: 0.75 * vw
- }
- },
- labelLine: {
- normal: {
- lineStyle: {
- color: "rgb(98,137,169)",
- },
- smooth: true,
- length: 5,
- length2: 5,
- },
- },
+ emphasis: {
+ label: {
+ fontSize: 0.75 * vw
+ }
+ },
+ labelLine: {
+ normal: {
+ lineStyle: {
+ color: "rgb(98,137,169)",
},
- ],
- };
+ smooth: true,
+ length: 5,
+ length2: 5,
+ },
+ },
+ },
+ ],
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
// 垂直柱状图
const verticalBarChart = function (data, id, unit = '次') {
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: ["0-3分钟", "3-10分钟", ">10分钟"],
- yData: [254, 3254, 1654],
- }
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: ["0-3分钟", "3-10分钟", ">10分钟"],
+ yData: [254, 3254, 1654],
}
- let option = {
- tooltip: {
- textStyle: {
- fontSize: 0.8 * vw
- }
+ }
+ let option = {
+ tooltip: {
+ textStyle: {
+ fontSize: 0.8 * vw
+ }
+ },
+ grid: {
+ top: "10%",
+ left: "1%",
+ right: "1%",
+ bottom: "1%",
+ containLabel: true,
+ },
+ xAxis: {
+ data: data.xName,
+ axisLine: {
+ lineStyle: {
+ color: "#0177d4",
},
- grid: {
- top: "10%",
- left: "1%",
- right: "1%",
- bottom: "1%",
- containLabel: true,
+ },
+ axisLabel: {
+ color: "#fff",
+ fontSize: 0.8 * vw,
+ interval: 0,
+ },
+ },
+ yAxis: {
+ nameTextStyle: {
+ color: "#fff",
+ fontSize: 0.8 * vw,
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#0177d4",
},
- xAxis: {
- data: data.xName,
- axisLine: {
- lineStyle: {
- color: "#0177d4",
- },
- },
- axisLabel: {
- color: "#fff",
- fontSize: 0.8 * vw,
- interval: 0,
- },
+ },
+ axisLabel: {
+ color: "#fff",
+ fontSize: 0.8 * vw,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#0177d4",
},
- yAxis: {
- nameTextStyle: {
- color: "#fff",
- fontSize: 0.8 * vw,
- },
- axisLine: {
- lineStyle: {
- color: "#0177d4",
- },
- },
- axisLabel: {
- color: "#fff",
- fontSize: 0.8 * vw,
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: "#0177d4",
- },
- },
+ },
+ },
+ series: [
+ {
+ type: "bar",
+ barWidth: data.yData.length < 4 ? 2 * vw : '75%',
+ label: {
+ show: true,
+ position: 'top',
+ textStyle: {
+ fontSize: 0.8 * vw,
+ color: '#fff'
+ },
+ formatter: `{c}${unit}`
},
- series: [
- {
- type: "bar",
- barWidth: data.yData.length<4? 2*vw:'75%',
- label: {
- show: true,
- position: 'top',
- textStyle: {
- fontSize: 0.8 * vw,
- color: '#fff'
- },
- formatter: `{c}${unit}`
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "#00b0ff",
},
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "#00b0ff",
- },
- {
- offset: 0.8,
- color: "#7052f4",
- },
- ],
- false
- ),
- },
+ {
+ offset: 0.8,
+ color: "#7052f4",
},
- data: data.yData,
- },
- ],
- };
+ ],
+ false
+ ),
+ },
+ },
+ data: data.yData,
+ },
+ ],
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
// 多个垂直柱状图
const multipleVerticalBarChart1 = function (data, id) {
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: [
- "7:00",
- "8:00",
- "9:00",
- "10:00",
- "11:00",
- "12:00",
- ],
- yDataOne: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6],
- yDataOneName: "制氢",
- yDataTwo: [2.9, 5, 4.4, 2.7, 5.7, 4.6],
- yDataTwoName: "发电",
- yDataThree: [3.9, 6, 5.4, 3.7, 6.7, 5.6],
- yDataThreeName: "充装",
- }
+ let charts = echarts.init(id);
+ let num1 = data.yDataOne.slice(0,4)
+ let num2 = data.yDataTwo.slice(0,4)
+ let num3 = data.yDataThree.slice(0,4)
+ num1 = num1.map(e => {
+ if (e > 14) {
+ return 14
+ } else if (e < 10) {
+ return 10
+ } else {
+ return e
}
- let option = {
- tooltip: {
- //提示框组件
- tooltip: {
- trigger: "axis",
- axisPointer: {
- lineStyle: {
- color: "#57617B",
- },
- },
- },
- // trigger: "axis",
- // formatter: `{b}
{a0}: {c0}
{a1}: {c1}`,
- // axisPointer: {
- // type: "shadow",
- // label: {
- // backgroundColor: "#6a7985",
- // },
- // },
- // textStyle: {
- // color: "#fff",
- // fontStyle: "normal",
- // fontFamily: "微软雅黑",
- // fontSize: 12,
- // },
+ })
+ num2 = num2.map(e => {
+ if (e > 14) {
+ return 14
+ } else if (e < 10) {
+ return 10
+ } else {
+ return e
+ }
+ })
+ num3 = num3.map(e => {
+ if (e > 14) {
+ return 14
+ } else if (e < 10) {
+ return 10
+ } else {
+ return e
+ }
+ })
+ if (!data) {
+ data = {
+ xName: [
+ "7:00",
+ "8:00",
+ "9:00",
+ "10:00",
+ "11:00",
+ "12:00",
+ ],
+ yDataOne: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6],
+ yDataOneName: "制氢",
+ yDataTwo: [2.9, 5, 4.4, 2.7, 5.7, 4.6],
+ yDataTwoName: "发电",
+ yDataThree: [3.9, 6, 5.4, 3.7, 6.7, 5.6],
+ yDataThreeName: "充装",
+ }
+ }
+ let option = {
+ tooltip: {
+ //提示框组件
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ lineStyle: {
+ color: "#57617B",
+ },
},
- grid: {
- left: "1%",
- right: "4%",
- bottom: "0",
- top: 30,
- padding: "0 0 10 0",
- containLabel: true,
+ },
+ },
+ grid: {
+ left: "1%",
+ right: "4%",
+ bottom: "0",
+ top: 30,
+ padding: "0 0 10 0",
+ containLabel: true,
+ },
+ legend: {
+ //图例组件，颜色和名字
+ right: 10,
+ top: 0,
+ itemGap: 16,
+ itemWidth: vw,
+ itemHeight: 0.6 * vw,
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ dataZoom: [],
+ xAxis: [
+ {
+ type: "category",
+ boundaryGap: true, //坐标轴两边留白
+ data: ['A1', 'A2', 'A3', 'A4'],
+ axisLabel: {
+ show: true,
+ color: '#fff'
},
- legend: {
- //图例组件，颜色和名字
- right: 10,
- top: 0,
- itemGap: 16,
- itemWidth: vw,
- itemHeight: 0.6 * vw,
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
+ axisTick: {
+ //坐标轴刻度相关设置。
+ show: false,
},
- dataZoom: [],
- xAxis: [
- {
- type: "category",
- boundaryGap: true, //坐标轴两边留白
- data: data.xName,
- axisLabel: {
- show: true,
- color: '#fff'
- },
- axisTick: {
- //坐标轴刻度相关设置。
- show: false,
- },
- axisLine: {
- //坐标轴轴线相关设置
- lineStyle: {
- color: "#fff",
- opacity: 0.2,
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#777777',
- opacity: 0.3,
- },
- },
- },
- ],
- yAxis: {
- type: "value",
- splitNumber: 5,
- min: 10,
- max: 14,
- axisLabel: {
- show: true,
- color: '#fff'
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#777777',
- opacity: 0.3,
- },
- },
+ axisLine: {
+ //坐标轴轴线相关设置
+ lineStyle: {
+ color: "#fff",
+ opacity: 0.2,
+ },
},
- series: [
- {
- name: data.yDataOneName,
- type: "bar",
- data: data.yDataOne,
- barWidth: 1 * vw,
- barGap: 0, //柱间距离
- label: {
- //图形上的文本标签
- normal: {
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- itemStyle: {
- //图形样式
- normal: {
- barBorderRadius: [5, 5, 0, 0],
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- type: 'linear',
- global: false,
- colorStops: [
- {
- offset: 0,
- color: 'rgb(21, 148, 244)',
- },
- {
- offset: 1,
- color: 'rgb(13, 48, 243)',
- },
- ],
- },
- },
- },
- },
- {
- name: data.yDataTwoName,
- type: "bar",
- data: data.yDataTwo,
- barWidth: 1 * vw,
- barGap: 0.5, //柱间距离
- label: {
- //图形上的文本标签
- normal: {
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- itemStyle: {
- //图形样式
- normal: {
- barBorderRadius: [5, 5, 0, 0],
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- type: 'linear',
- global: false,
- colorStops: [
- {
- offset: 0,
- color: '#0DCEB1',
- },
- {
- offset: 1,
- color: '#14A15A',
- },
- ],
- },
- },
- },
- },
- {
- name: data.yDataThreeName,
- type: "bar",
- data: data.yDataThree,
- barWidth: 1 * vw,
- barGap: 0.5, //柱间距离
- label: {
- //图形上的文本标签
- normal: {
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- itemStyle: {
- //图形样式
- normal: {
- barBorderRadius: [5, 5, 0, 0],
- color: "rgba(26, 99, 74, 0.7)",
- },
- },
- },
- ],
- };
-
- if (data?.xName?.length >= 4) {
- option.dataZoom.push({
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: '#777777',
+ opacity: 0.3,
+ },
+ },
+ },
+ ],
+ yAxis: {
+ type: "value",
+ splitNumber: 5,
+ min: 10,
+ max: 14,
+ axisLabel: {
+ show: true,
+ color: '#fff'
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: '#777777',
+ opacity: 0.3,
+ },
+ },
+ },
+ series: [
+ {
+ name: data.yDataOneName,
+ type: "bar",
+ data: data.yDataOne,
+ barWidth: 1 * vw,
+ barGap: 0, //柱间距离
+ label: {
+ //图形上的文本标签
+ normal: {
show: true,
- type: 'slider',
- bottom: '0%',
- xAxisIndex: 0,
- height: 12,
- start: 0,
- end: 1 / (data.xName.length / 4) * 100,
+ position: "top",
textStyle: {
- fontSize: 0,
- color: 'rgba(0,0,0,0)'
- }
- })
- option.grid.bottom = '7%'
- }
- charts.setOption(option);
- $(window).resize(charts.resize);
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ barBorderRadius: [5, 5, 0, 0],
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ type: 'linear',
+ global: false,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgb(21, 148, 244)',
+ },
+ {
+ offset: 1,
+ color: 'rgb(13, 48, 243)',
+ },
+ ],
+ },
+ },
+ },
+ },
+ {
+ name: data.yDataTwoName,
+ type: "bar",
+ data: data.yDataTwo,
+ barWidth: 1 * vw,
+ barGap: 0.5, //柱间距离
+ label: {
+ //图形上的文本标签
+ normal: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ barBorderRadius: [5, 5, 0, 0],
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ type: 'linear',
+ global: false,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#0DCEB1',
+ },
+ {
+ offset: 1,
+ color: '#14A15A',
+ },
+ ],
+ },
+ },
+ },
+ },
+ {
+ name: data.yDataThreeName,
+ type: "bar",
+ data: data.yDataThree,
+ barWidth: 1 * vw,
+ barGap: 0.5, //柱间距离
+ label: {
+ //图形上的文本标签
+ normal: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ barBorderRadius: [5, 5, 0, 0],
+ color: "rgba(26, 99, 74, 0.7)",
+ },
+ },
+ },
+ ],
+ };
+
+ if (data?.xName?.length >= 4) {
+ option.dataZoom.push({
+ show: true,
+ type: 'slider',
+ bottom: '0%',
+ xAxisIndex: 0,
+ height: 12,
+ start: 0,
+ end: 1 / (data.xName.length / 4) * 100,
+ textStyle: {
+ fontSize: 0,
+ color: 'rgba(0,0,0,0)'
+ }
+ })
+ option.grid.bottom = '7%'
+ }
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
const multipleVerticalBarChart = function (data, id) {
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: [
- "7:00",
- "8:00",
- "9:00",
- "10:00",
- "11:00",
- "12:00",
- ],
- yDataOne: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6],
- yDataOneName: "制氢",
- yDataTwo: [2.9, 5, 4.4, 2.7, 5.7, 4.6],
- yDataTwoName: "发电",
- yDataThree: [3.9, 6, 5.4, 3.7, 6.7, 5.6],
- yDataThreeName: "充装",
- }
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: [
+ "7:00",
+ "8:00",
+ "9:00",
+ "10:00",
+ "11:00",
+ "12:00",
+ ],
+ yDataOne: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6],
+ yDataOneName: "制氢",
+ yDataTwo: [2.9, 5, 4.4, 2.7, 5.7, 4.6],
+ yDataTwoName: "发电",
+ yDataThree: [3.9, 6, 5.4, 3.7, 6.7, 5.6],
+ yDataThreeName: "充装",
}
- let option = {
- tooltip: {
- //提示框组件
- tooltip: {
- trigger: "axis",
- axisPointer: {
- lineStyle: {
- color: "#57617B",
- },
- },
- },
- // trigger: "axis",
- // formatter: `{b}
{a0}: {c0}
{a1}: {c1}`,
- // axisPointer: {
- // type: "shadow",
- // label: {
- // backgroundColor: "#6a7985",
- // },
- // },
- // textStyle: {
- // color: "#fff",
- // fontStyle: "normal",
- // fontFamily: "微软雅黑",
- // fontSize: 12,
- // },
+ }
+ let option = {
+ tooltip: {
+ //提示框组件
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ lineStyle: {
+ color: "#57617B",
+ },
},
- grid: {
- left: "1%",
- right: "4%",
- bottom: "0",
- top: 30,
- padding: "0 0 10 0",
- containLabel: true,
+ },
+ // trigger: "axis",
+ // formatter: `{b}
{a0}: {c0}
{a1}: {c1}`,
+ // axisPointer: {
+ // type: "shadow",
+ // label: {
+ // backgroundColor: "#6a7985",
+ // },
+ // },
+ // textStyle: {
+ // color: "#fff",
+ // fontStyle: "normal",
+ // fontFamily: "微软雅黑",
+ // fontSize: 12,
+ // },
+ },
+ grid: {
+ left: "1%",
+ right: "4%",
+ bottom: "0",
+ top: 30,
+ padding: "0 0 10 0",
+ containLabel: true,
+ },
+ legend: {
+ //图例组件，颜色和名字
+ right: 10,
+ top: 0,
+ itemGap: 16,
+ itemWidth: vw,
+ itemHeight: 0.6 * vw,
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ dataZoom: [],
+ xAxis: [
+ {
+ type: "category",
+ boundaryGap: true, //坐标轴两边留白
+ data: data.xName,
+ axisLabel: {
+ show: true,
+ color: '#fff'
},
- legend: {
- //图例组件，颜色和名字
- right: 10,
- top: 0,
- itemGap: 16,
- itemWidth: vw,
- itemHeight: 0.6 * vw,
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
+ axisTick: {
+ //坐标轴刻度相关设置。
+ show: false,
},
- dataZoom: [],
- xAxis: [
- {
- type: "category",
- boundaryGap: true, //坐标轴两边留白
- data: data.xName,
- axisLabel: {
- show: true,
- color: '#fff'
- },
- axisTick: {
- //坐标轴刻度相关设置。
- show: false,
- },
- axisLine: {
- //坐标轴轴线相关设置
- lineStyle: {
- color: "#fff",
- opacity: 0.2,
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#777777',
- opacity: 0.3,
- },
- },
- },
- ],
- yAxis: {
- type: "value",
- splitNumber: 5,
- max: Math.max(...data.yDataOne, ...data.yDataTwo) + 5,
- axisLabel: {
- show: true,
- color: '#fff'
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: '#777777',
- opacity: 0.3,
- },
- },
+ axisLine: {
+ //坐标轴轴线相关设置
+ lineStyle: {
+ color: "#fff",
+ opacity: 0.2,
+ },
},
- series: [
- {
- name: data.yDataOneName,
- type: "bar",
- data: data.yDataOne,
- barWidth: 1 * vw,
- barGap: 0, //柱间距离
- label: {
- //图形上的文本标签
- normal: {
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- itemStyle: {
- //图形样式
- normal: {
- barBorderRadius: [5, 5, 0, 0],
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- type: 'linear',
- global: false,
- colorStops: [
- {
- offset: 0,
- color: 'rgb(21, 148, 244)',
- },
- {
- offset: 1,
- color: 'rgb(13, 48, 243)',
- },
- ],
- },
- },
- },
- },
- {
- name: data.yDataTwoName,
- type: "bar",
- data: data.yDataTwo,
- barWidth: 1 * vw,
- barGap: 0.5, //柱间距离
- label: {
- //图形上的文本标签
- normal: {
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- itemStyle: {
- //图形样式
- normal: {
- barBorderRadius: [5, 5, 0, 0],
- color: {
- x: 0,
- y: 0,
- x2: 0,
- y2: 1,
- type: 'linear',
- global: false,
- colorStops: [
- {
- offset: 0,
- color: '#0DCEB1',
- },
- {
- offset: 1,
- color: '#14A15A',
- },
- ],
- },
- },
- },
- },
- {
- name: data.yDataThreeName,
- type: "bar",
- data: data.yDataThree,
- barWidth: 1 * vw,
- barGap: 0.5, //柱间距离
- label: {
- //图形上的文本标签
- normal: {
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- itemStyle: {
- //图形样式
- normal: {
- barBorderRadius: [5, 5, 0, 0],
- color: "rgba(26, 99, 74, 0.7)",
- },
- },
- },
- ],
- };
-
- if (data?.xName?.length >= 4) {
- option.dataZoom.push({
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: '#777777',
+ opacity: 0.3,
+ },
+ },
+ },
+ ],
+ yAxis: {
+ type: "value",
+ splitNumber: 5,
+ max: Math.max(...data.yDataOne, ...data.yDataTwo) + 5,
+ axisLabel: {
+ show: true,
+ color: '#fff'
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: '#777777',
+ opacity: 0.3,
+ },
+ },
+ },
+ series: [
+ {
+ name: data.yDataOneName,
+ type: "bar",
+ data: data.yDataOne,
+ barWidth: 1 * vw,
+ barGap: 0, //柱间距离
+ label: {
+ //图形上的文本标签
+ normal: {
show: true,
- type: 'slider',
- bottom: '0%',
- xAxisIndex: 0,
- height: 12,
- start: 0,
- end: 1 / (data.xName.length / 4) * 100,
+ position: "top",
textStyle: {
- fontSize: 0,
- color: 'rgba(0,0,0,0)'
- }
- })
- option.grid.bottom = '7%'
- }
- charts.setOption(option);
- $(window).resize(charts.resize);
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ barBorderRadius: [5, 5, 0, 0],
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ type: 'linear',
+ global: false,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgb(21, 148, 244)',
+ },
+ {
+ offset: 1,
+ color: 'rgb(13, 48, 243)',
+ },
+ ],
+ },
+ },
+ },
+ },
+ {
+ name: data.yDataTwoName,
+ type: "bar",
+ data: data.yDataTwo,
+ barWidth: 1 * vw,
+ barGap: 0.5, //柱间距离
+ label: {
+ //图形上的文本标签
+ normal: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ barBorderRadius: [5, 5, 0, 0],
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ type: 'linear',
+ global: false,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#0DCEB1',
+ },
+ {
+ offset: 1,
+ color: '#14A15A',
+ },
+ ],
+ },
+ },
+ },
+ },
+ {
+ name: data.yDataThreeName,
+ type: "bar",
+ data: data.yDataThree,
+ barWidth: 1 * vw,
+ barGap: 0.5, //柱间距离
+ label: {
+ //图形上的文本标签
+ normal: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ barBorderRadius: [5, 5, 0, 0],
+ color: "rgba(26, 99, 74, 0.7)",
+ },
+ },
+ },
+ ],
+ };
+
+ if (data?.xName?.length >= 4) {
+ option.dataZoom.push({
+ show: true,
+ type: 'slider',
+ bottom: '0%',
+ xAxisIndex: 0,
+ height: 12,
+ start: 0,
+ end: 1 / (data.xName.length / 4) * 100,
+ textStyle: {
+ fontSize: 0,
+ color: 'rgba(0,0,0,0)'
+ }
+ })
+ option.grid.bottom = '7%'
+ }
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
-const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '',margin=20,isColor=true) {
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
- yDataOne: [22, 52, 55, 12, 35, 44, 66],
- yDataOneName: 'a1',
- yDataTwo: [32, 42, 50, 22, 30, 40, 52],
- yDataTwoName: "a2",
- }
+const multipleVerticalBarChartTwo = function (data, id, rotate = 0, unit = '', margin = 20, isColor = true) {
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
+ yDataOne: [22, 52, 55, 12, 35, 44, 66],
+ yDataOneName: 'a1',
+ yDataTwo: [32, 42, 50, 22, 30, 40, 52],
+ yDataTwoName: "a2",
}
- let option = {
- grid: {
- top: "20%",
- left: "1%",
- right: "5%",
- bottom: "1%",
- containLabel: true,
+ }
+ let option = {
+ grid: {
+ top: "20%",
+ left: "1%",
+ right: "5%",
+ bottom: "1%",
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ right: '0',
+ data: [data.yDataOneName, data.yDataTwoName],
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
+ },
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {show: false},
+ axisLabel: {
+ rotate: rotate,
+ margin: margin,
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
+ },
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
+ data: data.xName
+ }
+ ],
+ yAxis: [
+ {
+ axisLabel: {
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
+ },
},
- legend: {
- right:'0',
- data: [data.yDataOneName, data.yDataTwoName],
- textStyle: {
- fontSize: 0.75 * vw,
- color: "#F1F1F3",
- },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,0.1)",
+ },
},
- xAxis: [
- {
- type: 'category',
- axisTick: {show: false},
- axisLabel: {
- rotate: rotate,
- margin: margin,
- textStyle: {
- fontSize: 0.75 * vw,
- color: "#F1F1F3",
- },
- },
- data: data.xName
- }
- ],
- yAxis: [
- {
- axisLabel: {
- textStyle: {
- fontSize: 0.75 * vw,
- color: "#F1F1F3",
- },
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,0.1)",
- },
- },
- type: 'value'
- }
- ],
- series: [
- {
- name: data.yDataOneName,
- type: 'bar',
- barGap: 0,
- emphasis: {
- focus: 'series'
- },
- barWidth: '30%',
- barMaxWidth: '50px',
- itemStyle: {
- //图形样式
- normal: {
- color: isColor? '#db8151': "#64BCEC",
- },
- },
- label: {
- show: true,
- position: "top",
- formatter: `{c}${unit}`,
- textStyle: {
- color: "rgba(255,255,255,0.5)",
- fontSize: 0.75 * vw
- },
- },
- data: data.yDataOne
- },
- {
- name: data.yDataTwoName,
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- barWidth: '30%',
- barMaxWidth: '50px',
- barGap: '40%',
- label: {
- show: true,
- position: "top",
- formatter: `{c}${unit}`,
- textStyle: {
- color: "rgba(255,255,255,0.5)",
- fontSize: 0.75 * vw
- },
- },
- itemStyle: {
- //图形样式
- normal: {
- color: isColor? '#9ce375': "#4FD3B9",
- },
- },
- data: data.yDataTwo
- },
- ]
- };
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: data.yDataOneName,
+ type: 'bar',
+ barGap: 0,
+ emphasis: {
+ focus: 'series'
+ },
+ barWidth: '30%',
+ barMaxWidth: '50px',
+ itemStyle: {
+ //图形样式
+ normal: {
+ color: isColor ? '#db8151' : "#64BCEC",
+ },
+ },
+ label: {
+ show: true,
+ position: "top",
+ formatter: `{c}${unit}`,
+ textStyle: {
+ color: "rgba(255,255,255,0.5)",
+ fontSize: 0.75 * vw
+ },
+ },
+ data: data.yDataOne
+ },
+ {
+ name: data.yDataTwoName,
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ barWidth: '30%',
+ barMaxWidth: '50px',
+ barGap: '40%',
+ label: {
+ show: true,
+ position: "top",
+ formatter: `{c}${unit}`,
+ textStyle: {
+ color: "rgba(255,255,255,0.5)",
+ fontSize: 0.75 * vw
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ color: isColor ? '#9ce375' : "#4FD3B9",
+ },
+ },
+ data: data.yDataTwo
+ },
+ ]
+ };
- if (data?.length >= 3) {
- option.dataZoom.push({
- show: true,
- type: 'slider',
- xAxisIndex: 0,
- width: 12,
- start: 0,
- end: 1 / (data.length / 3) * 100,
- textStyle: {
- fontSize: 0,
- }
- })
- }
- charts.setOption(option);
- $(window).resize(charts.resize);
+ if (data?.length >= 3) {
+ option.dataZoom.push({
+ show: true,
+ type: 'slider',
+ xAxisIndex: 0,
+ width: 12,
+ start: 0,
+ end: 1 / (data.length / 3) * 100,
+ textStyle: {
+ fontSize: 0,
+ }
+ })
+ }
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
const multipleVerticalBarChartThree = function (data, id, rotate = 0) {
- clearInterval(time4)
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '7月', '7月'],
- yDataOne: [22, 52, 55, 12, 35, 44, 66, 44, 66],
- yDataOneName: 'a1',
- yDataTwo: [32, 42, 50, 22, 30, 40, 52, 44, 66],
- yDataTwoName: "a2",
- yDataThree: [32, 42, 50, 22, 30, 40, 52, 44, 66],
- yDataThreeName: "a3",
- yDataFour: [32, 42, 50, 22, 30, 40, 52, 44, 66],
- yDataFourName: "a4",
- }
+ clearInterval(time4)
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '7月', '7月'],
+ yDataOne: [22, 52, 55, 12, 35, 44, 66, 44, 66],
+ yDataOneName: 'a1',
+ yDataTwo: [32, 42, 50, 22, 30, 40, 52, 44, 66],
+ yDataTwoName: "a2",
+ yDataThree: [32, 42, 50, 22, 30, 40, 52, 44, 66],
+ yDataThreeName: "a3",
+ yDataFour: [32, 42, 50, 22, 30, 40, 52, 44, 66],
+ yDataFourName: "a4",
}
- let option = {
- grid: {
- top: "20%",
- left: "1%",
- right: "1%",
- bottom: "1%",
- containLabel: true,
+ }
+ let option = {
+ grid: {
+ top: "20%",
+ left: "1%",
+ right: "1%",
+ bottom: "1%",
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName],
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
+ },
+ },
+ dataZoom: [],
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {show: false},
+ axisLabel: {
+ rotate: rotate,
+ margin: 20,
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
+ },
},
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'shadow'
- }
+ data: data.xName
+ }
+ ],
+ yAxis: [
+ {
+ axisLabel: {
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
+ },
},
- legend: {
- data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName],
- textStyle: {
- fontSize: 0.75 * vw,
- color: "#F1F1F3",
- },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,0.1)",
+ },
},
- dataZoom: [],
- xAxis: [
- {
- type: 'category',
- axisTick: {show: false},
- axisLabel: {
- rotate: rotate,
- margin: 20,
- textStyle: {
- fontSize: 0.75 * vw,
- color: "#F1F1F3",
- },
- },
- data: data.xName
- }
- ],
- yAxis: [
- {
- axisLabel: {
- textStyle: {
- fontSize: 0.75 * vw,
- color: "#F1F1F3",
- },
- },
- splitLine: {
- lineStyle: {
- color: "rgba(255,255,255,0.1)",
- },
- },
- type: 'value'
- }
- ],
- series: [
- {
- name: data.yDataOneName,
- type: 'bar',
- barGap: 0,
- emphasis: {
- focus: 'series'
- },
- itemStyle: {
- //图形样式
- normal: {
- color: "#1FEDCA",
- },
- },
- label: {
- show: true,
- position: "top",
- textStyle: {
- color: "rgba(255,255,255,0.5)",
- fontSize: 0.75 * vw
- },
- },
- data: data.yDataOne
- },
- {
- name: data.yDataTwoName,
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- label: {
- show: true,
- position: "top",
- textStyle: {
- color: "rgba(255,255,255,0.5)",
- fontSize: 0.75 * vw
- },
- },
- itemStyle: {
- //图形样式
- normal: {
- color: "#E65454",
- },
- },
- data: data.yDataTwo
- },
- {
- name: data.yDataThreeName,
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- label: {
- show: true,
- position: "top",
- textStyle: {
- color: "rgba(255,255,255,0.5)",
- fontSize: 0.75 * vw
- },
- },
- itemStyle: {
- //图形样式
- normal: {
- color: "#351865",
- },
- },
- data: data.yDataThree
- },
- {
- name: data.yDataFourName,
- type: 'bar',
- emphasis: {
- focus: 'series'
- },
- label: {
- show: true,
- position: "top",
- textStyle: {
- color: "rgba(255,255,255,0.5)",
- fontSize: 0.75 * vw
- },
- },
- itemStyle: {
- //图形样式
- normal: {
- color: "#4b7232",
- },
- },
- data: data.yDataFour
- },
- ]
- };
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: data.yDataOneName,
+ type: 'bar',
+ barGap: 0,
+ emphasis: {
+ focus: 'series'
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ color: "#1FEDCA",
+ },
+ },
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "rgba(255,255,255,0.5)",
+ fontSize: 0.75 * vw
+ },
+ },
+ data: data.yDataOne
+ },
+ {
+ name: data.yDataTwoName,
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "rgba(255,255,255,0.5)",
+ fontSize: 0.75 * vw
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ color: "#E65454",
+ },
+ },
+ data: data.yDataTwo
+ },
+ {
+ name: data.yDataThreeName,
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "rgba(255,255,255,0.5)",
+ fontSize: 0.75 * vw
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ color: "#351865",
+ },
+ },
+ data: data.yDataThree
+ },
+ {
+ name: data.yDataFourName,
+ type: 'bar',
+ emphasis: {
+ focus: 'series'
+ },
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "rgba(255,255,255,0.5)",
+ fontSize: 0.75 * vw
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ color: "#4b7232",
+ },
+ },
+ data: data.yDataFour
+ },
+ ]
+ };
- if (data.yDataOne.length > 7) {
- option.dataZoom.push({
- show: false,
- type: 'slider',
- bottom: '0%',
- xAxisIndex: 0,
- height: 12,
- start: 0,
- end: 1 / (data.yDataOne.length / 6) * 100,
- textStyle: {
- fontSize: 0,
- color: 'rgba(0,0,0,0)'
- }
- })
+ if (data.yDataOne.length > 7) {
+ option.dataZoom.push({
+ show: false,
+ type: 'slider',
+ bottom: '0%',
+ xAxisIndex: 0,
+ height: 12,
+ start: 0,
+ end: 1 / (data.yDataOne.length / 6) * 100,
+ textStyle: {
+ fontSize: 0,
+ color: 'rgba(0,0,0,0)'
+ }
+ })
- let step = 1 / (data.yDataOne.length / 6) * 100
- time4 = setInterval(() => {
- option.dataZoom[0].end += step
- option.dataZoom[0].start += step
- if (option.dataZoom[0].start >= 100) {
- option.dataZoom[0].start = 0
- option.dataZoom[0].end = step
- }
- if (option.dataZoom[0].end >= 100) {
- option.dataZoom[0].end = 100
- option.dataZoom[0].start = option.dataZoom[0].end - step
- }
- charts.setOption(option);
- }, 6000)
- // time()
- }
- charts.setOption(option);
- $(window).resize(charts.resize);
+ let step = 1 / (data.yDataOne.length / 6) * 100
+ time4 = setInterval(() => {
+ option.dataZoom[0].end += step
+ option.dataZoom[0].start += step
+ if (option.dataZoom[0].start >= 100) {
+ option.dataZoom[0].start = 0
+ option.dataZoom[0].end = step
+ }
+ if (option.dataZoom[0].end >= 100) {
+ option.dataZoom[0].end = 100
+ option.dataZoom[0].start = option.dataZoom[0].end - step
+ }
+ charts.setOption(option);
+ }, 6000)
+ // time()
+ }
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
// 单个垂直柱状图
const singleVerticalBarChart = function (data, id, rotate = 0, bottom = '15%') {
- clearInterval(time3)
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
- yData: [12, 20, 11, 30, 14, 80, 50],
- }
+ clearInterval(time3)
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+ yData: [12, 20, 11, 30, 14, 80, 50],
}
- let left = () => {
- if (vw < 10) return '18%'
- return '10%'
- }
- let option = {
- grid: {
- top: "10%",
- left: left(),
- right: "5%",
- bottom: bottom,
- // containLabel: true
+ }
+ let left = () => {
+ if (vw < 10) return '18%'
+ return '10%'
+ }
+ let option = {
+ grid: {
+ top: "10%",
+ left: left(),
+ right: "5%",
+ bottom: bottom,
+ // containLabel: true
+ },
+ dataZoom: [],
+ xAxis: {
+ data: data.xName,
+ axisLine: {
+ lineStyle: {
+ color: "#0177d4",
},
- dataZoom: [],
- xAxis: {
- data: data.xName,
- axisLine: {
- lineStyle: {
- color: "#0177d4",
- },
- },
- axisLabel: {
- color: "#fff",
- fontSize: 0.5 * vw,
- interval: 0,
- rotate: rotate,
- },
+ },
+ axisLabel: {
+ color: "#fff",
+ fontSize: 0.5 * vw,
+ interval: 0,
+ rotate: rotate,
+ },
+ },
+ yAxis: {
+ nameTextStyle: {
+ color: "#fff",
+ fontSize: 16,
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#0177d4",
},
- yAxis: {
- nameTextStyle: {
- color: "#fff",
- fontSize: 16,
- },
- axisLine: {
- lineStyle: {
- color: "#0177d4",
- },
- },
- axisLabel: {
- color: "#fff",
- fontSize: 16,
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: "#0177d4",
- },
- },
+ },
+ axisLabel: {
+ color: "#fff",
+ fontSize: 16,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#0177d4",
},
- series: [
- {
- type: "bar",
- barWidth: 1 * vw,
- itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "#00b0ff",
- },
- {
- offset: 0.8,
- color: "#7052f4",
- },
- ],
- false
- ),
- },
+ },
+ },
+ series: [
+ {
+ type: "bar",
+ barWidth: 1 * vw,
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "#00b0ff",
},
- label: {
- show: true,
- position: "top",
- textStyle: {
- color: "#fff",
- fontSize: 0.75 * vw
- },
+ {
+ offset: 0.8,
+ color: "#7052f4",
},
- data: data.yData,
- },
- ],
- };
- if (data.yData.length > 8) {
- option.dataZoom.push({
- show: false,
- type: 'slider',
- bottom: '0%',
- xAxisIndex: 0,
- height: 12,
- start: 0,
- end: 1 / (data.yData.length / 9) * 100,
- textStyle: {
- fontSize: 0,
- color: 'rgba(0,0,0,0)'
- }
- })
+ ],
+ false
+ ),
+ },
+ },
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#fff",
+ fontSize: 0.75 * vw
+ },
+ },
+ data: data.yData,
+ },
+ ],
+ };
+ if (data.yData.length > 8) {
+ option.dataZoom.push({
+ show: false,
+ type: 'slider',
+ bottom: '0%',
+ xAxisIndex: 0,
+ height: 12,
+ start: 0,
+ end: 1 / (data.yData.length / 9) * 100,
+ textStyle: {
+ fontSize: 0,
+ color: 'rgba(0,0,0,0)'
+ }
+ })
- let step = 1 / (data.yData.length / 9) * 100
- time3 = setInterval(() => {
- option.dataZoom[0].end += step
- option.dataZoom[0].start += step
- if (option.dataZoom[0].start >= 100) {
- option.dataZoom[0].start = 0
- option.dataZoom[0].end = step
- }
- if (option.dataZoom[0].end >= 100) {
- option.dataZoom[0].end = 100
- option.dataZoom[0].start = option.dataZoom[0].end - step
- }
- charts.setOption(option);
- }, 6000)
- // time()
- }
- charts.setOption(option);
- $(window).resize(charts.resize);
+ let step = 1 / (data.yData.length / 9) * 100
+ time3 = setInterval(() => {
+ option.dataZoom[0].end += step
+ option.dataZoom[0].start += step
+ if (option.dataZoom[0].start >= 100) {
+ option.dataZoom[0].start = 0
+ option.dataZoom[0].end = step
+ }
+ if (option.dataZoom[0].end >= 100) {
+ option.dataZoom[0].end = 100
+ option.dataZoom[0].start = option.dataZoom[0].end - step
+ }
+ charts.setOption(option);
+ }, 6000)
+ // time()
+ }
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
const singleVerticalBarChartTwo = function (data, id) {
- clearInterval(time2)
- let time = () => {
+ clearInterval(time2)
+ let time = () => {
+ }
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'],
+ yData: [38, 60, 40, 55, 42, 39, 45, 40],
+ yImg: ['', '', '', '', '', '', '', ''],
}
- let charts = echarts.init(id);
- if (!data) {
- data = {
- xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'],
- yData: [38, 60, 40, 55, 42, 39, 45, 40],
- yImg: ['', '', '', '', '', '', '', ''],
- }
- }
- let bottom = data.yData.map(val => 1)
- let option = {
- backgroundColor: 'rgba(0,0,0,0)',
- color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
- grid: {
- top: "20%",
- bottom: "15%",
- right: "5%"
+ }
+ let bottom = data.yData.map(val => 1)
+ let option = {
+ backgroundColor: 'rgba(0,0,0,0)',
+ color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
+ grid: {
+ top: "20%",
+ bottom: "15%",
+ right: "5%"
+ },
+ dataZoom: [],
+ xAxis: {
+ margin: 10,
+ nameTextStyle: {
+ color: '#c0c3cd',
+ padding: [0, 0, -10, 0],
+ fontSize: 14,
+ },
+ axisLabel: {
+ color: '#c0c3cd', //X轴文字
+ fontSize: 14,
+ interval: 0,
+ margin: 20,
+ rotate: -20,
+ },
+ axisTick: {
+ lineStyle: {
+ color: '#0B1535',
+ width: 1,
},
- dataZoom: [],
- xAxis: {
- margin: 10,
- nameTextStyle: {
- color: '#c0c3cd',
- padding: [0, 0, -10, 0],
- fontSize: 14,
- },
- axisLabel: {
- color: '#c0c3cd', //X轴文字
- fontSize: 14,
- interval: 0,
- margin: 20,
- rotate: -20,
- },
- axisTick: {
- lineStyle: {
- color: '#0B1535',
- width: 1,
- },
- show: false,
- },
- splitLine: {
- show: false,
- },
- axisLine: {
- lineStyle: {
- color: '#384267',
- width: 1,
- type: 'dashed',
- },
- show: true,
- },
- data: data.xName,
- type: 'category',
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#384267',
+ width: 1,
+ type: 'dashed',
},
- yAxis: {
- type: 'value',
- nameTextStyle: {
- color: '#c0c3cd',
- padding: [0, 0, -10, 0],
- fontSize: 14,
- },
- axisLabel: {
- color: '#c0c3cd', //Y轴文字
- fontSize: 14,
- },
- axisTick: {
- lineStyle: {
- color: '#384267',
- width: 1,
- },
- show: true,
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: '#384267',
- type: 'line',
- },
- },
- axisLine: {
- lineStyle: {
- color: '#fff',
- width: 1,
- type: 'line',
- },
- show: false,
- },
+ show: true,
+ },
+ data: data.xName,
+ type: 'category',
+ },
+ yAxis: {
+ type: 'value',
+ nameTextStyle: {
+ color: '#c0c3cd',
+ padding: [0, 0, -10, 0],
+ fontSize: 14,
+ },
+ axisLabel: {
+ color: '#c0c3cd', //Y轴文字
+ fontSize: 14,
+ },
+ axisTick: {
+ lineStyle: {
+ color: '#384267',
+ width: 1,
},
- series: [
- {
- data: data.yData,
- type: 'bar',
- barMaxWidth: 'auto',
- barWidth: 1.5 * vw,
- itemStyle: {
- color: function (val) {
- if (data.yData.length - val.dataIndex === 1) {
- return 'red'
- } else if (data.yData.length - val.dataIndex === 2) {
- return 'yellow'
+ show: true,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: '#384267',
+ type: 'line',
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#fff',
+ width: 1,
+ type: 'line',
+ },
+ show: false,
+ },
+ },
+ series: [
+ {
+ data: data.yData,
+ type: 'bar',
+ barMaxWidth: 'auto',
+ barWidth: 1.5 * vw,
+ itemStyle: {
+ color: function (val) {
+ if (data.yData.length - val.dataIndex === 1) {
+ return 'red'
+ } else if (data.yData.length - val.dataIndex === 2) {
+ return 'yellow'
- } else {
- return '#35AAFE'
- }
- }
- },
- label: {
- normal: {
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- }
- },
- {
- data: data.yData,
- type: 'pictorialBar',
- barMaxWidth: vw,
- symbolPosition: 'end',
- symbol: 'diamond',
- itemStyle: {
- color: function (val) {
- if (data.yData.length - val.dataIndex === 1) {
- return 'red'
- } else if (data.yData.length - val.dataIndex === 2) {
- return 'yellow'
-
- } else {
- return '#66c8ff'
- }
- }
- },
- symbolOffset: ['25%', '-50%'],
- symbolSize: [1.5 * vw, 10],
- zlevel: 4,
- },
- {
- data: bottom,
- type: 'pictorialBar',
- barMaxWidth: vw,
- symbolPosition: 'end',
- symbol: 'diamond',
- itemStyle: {
- color: function (val) {
- if (data.yData.length - val.dataIndex === 1) {
- return 'red'
- } else if (data.yData.length - val.dataIndex === 2) {
- return 'yellow'
-
- } else {
- return '#66c8ff'
- }
- }
- },
- symbolOffset: ['25%', '-20%'],
- symbolSize: [1.5 * vw, 10],
- zlevel: 4,
- },
- {
- type: 'pictorialBar',
- name: 'pictorial element',
- symbol: function (val, index) {
- return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
- },
- symbolSize: [40, 40],
- z: 10,
- data: data.yData.map(val => {
- return {
- value: val,
- symbolPosition: 'end',
- symbolOffset: [0, '-190%']
- }
- })
- },
- ],
- };
- if (data.xName.length > 10) {
- option.dataZoom.push({
- show: false,
- type: 'slider',
- bottom: '0%',
- xAxisIndex: 0,
- height: 12,
- start: 0,
- end: 1 / (data.xName.length / 11) * 100,
+ } else {
+ return '#35AAFE'
+ }
+ }
+ },
+ label: {
+ normal: {
+ show: true,
+ position: "top",
textStyle: {
- fontSize: 0,
- color: 'rgba(0,0,0,0)'
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ }
+ },
+ {
+ data: data.yData,
+ type: 'pictorialBar',
+ barMaxWidth: vw,
+ symbolPosition: 'end',
+ symbol: 'diamond',
+ itemStyle: {
+ color: function (val) {
+ if (data.yData.length - val.dataIndex === 1) {
+ return 'red'
+ } else if (data.yData.length - val.dataIndex === 2) {
+ return 'yellow'
+
+ } else {
+ return '#66c8ff'
}
+ }
+ },
+ symbolOffset: ['25%', '-50%'],
+ symbolSize: [1.5 * vw, 10],
+ zlevel: 4,
+ },
+ {
+ data: bottom,
+ type: 'pictorialBar',
+ barMaxWidth: vw,
+ symbolPosition: 'end',
+ symbol: 'diamond',
+ itemStyle: {
+ color: function (val) {
+ if (data.yData.length - val.dataIndex === 1) {
+ return 'red'
+ } else if (data.yData.length - val.dataIndex === 2) {
+ return 'yellow'
+
+ } else {
+ return '#66c8ff'
+ }
+ }
+ },
+ symbolOffset: ['25%', '-20%'],
+ symbolSize: [1.5 * vw, 10],
+ zlevel: 4,
+ },
+ {
+ type: 'pictorialBar',
+ name: 'pictorial element',
+ symbol: function (val, index) {
+ return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
+ },
+ symbolSize: [40, 40],
+ z: 10,
+ data: data.yData.map(val => {
+ return {
+ value: val,
+ symbolPosition: 'end',
+ symbolOffset: [0, '-190%']
+ }
})
+ },
+ ],
+ };
+ if (data.xName.length > 10) {
+ option.dataZoom.push({
+ show: false,
+ type: 'slider',
+ bottom: '0%',
+ xAxisIndex: 0,
+ height: 12,
+ start: 0,
+ end: 1 / (data.xName.length / 11) * 100,
+ textStyle: {
+ fontSize: 0,
+ color: 'rgba(0,0,0,0)'
+ }
+ })
- let step = 1 / (data.xName.length / 11) * 100
- time2 = setInterval(() => {
- option.dataZoom[0].end += step
- option.dataZoom[0].start += step
- if (option.dataZoom[0].start >= 100) {
- option.dataZoom[0].start = 0
- option.dataZoom[0].end = step
- }
- if (option.dataZoom[0].end >= 100) {
- option.dataZoom[0].end = 100
- option.dataZoom[0].start = option.dataZoom[0].end - step
- }
- charts.setOption(option);
- }, 3000)
- }
+ let step = 1 / (data.xName.length / 11) * 100
+ time2 = setInterval(() => {
+ option.dataZoom[0].end += step
+ option.dataZoom[0].start += step
+ if (option.dataZoom[0].start >= 100) {
+ option.dataZoom[0].start = 0
+ option.dataZoom[0].end = step
+ }
+ if (option.dataZoom[0].end >= 100) {
+ option.dataZoom[0].end = 100
+ option.dataZoom[0].start = option.dataZoom[0].end - step
+ }
+ charts.setOption(option);
+ }, 3000)
+ }
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
// 多个折线面积图(直线)
const multipleBrokenLineAreaDiagram1 = (data, ids) => {
- let charts = echarts.init(ids);
+ let charts = echarts.init(ids);
- function Fun() {
- this.randomNum = function () {
- let arr = []
- for (let i = 0; i < 12; i++) {
- arr.push(parseInt(Math.random() * 100))
- }
- return arr
- }
+ function Fun() {
+ this.randomNum = function () {
+ let arr = []
+ for (let i = 0; i < 12; i++) {
+ arr.push(parseInt(Math.random() * 100))
+ }
+ return arr
}
+ }
- if (!data) {
- data = {
- xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
- yDataOne: new Fun().randomNum(),
- yDataTwo: new Fun().randomNum(),
- yDataOneName: '制氢量',
- yDataTwoName: '发电量',
- }
+ if (!data) {
+ data = {
+ xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+ yDataOne: new Fun().randomNum(),
+ yDataTwo: new Fun().randomNum(),
+ yDataOneName: '制氢量',
+ yDataTwoName: '发电量',
}
- let max = 24
- let min = 18
- // let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo))
- // let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo))
+ }
+ let max = 24
+ let min = 18
+ // let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo))
+ // let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo))
- let option = {
- tooltip: {
- trigger: "axis",
- axisPointer: {
- lineStyle: {
- color: "#57617B",
- },
- },
+ let option = {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ lineStyle: {
+ color: "#57617B",
},
- legend: {
- icon: "rect",
- itemWidth: 0.75 * vw,
- itemHeight: 0.25 * vw,
- itemGap: 0.75 * vw,
- data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
- right: "4%",
- textStyle: {
- fontSize: 0.75 * vw,
- color: "#F1F1F3",
- },
+ },
+ },
+ legend: {
+ icon: "rect",
+ itemWidth: 0.75 * vw,
+ itemHeight: 0.25 * vw,
+ itemGap: 0.75 * vw,
+ data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
+ right: "4%",
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
+ },
+ },
+ grid: {
+ top: "20%",
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ dataZoom: [],
+ xAxis: [
+ {
+ show: false,
+ type: "category",
+ boundaryGap: false,
+ axisLine: {
+ lineStyle: {
+ color: "#57617B",
+ },
},
- grid: {
- top: "20%",
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
+ axisLabel: {
+ show: true,
+ color: '#fff',
+ interval: 0,
},
- dataZoom: [],
- xAxis: [
- {
- type: "category",
- boundaryGap: false,
- axisLine: {
- lineStyle: {
- color: "#57617B",
- },
+ data: data.xData,
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ axisTick: {
+ show: false,
+ },
+ max: 24,
+ min: 18,
+ axisLine: {
+ lineStyle: {
+ color: "#57617B",
+ },
+ },
+ axisLabel: {
+ show: true,
+ color: '#fff',
+ interval: 0.5,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#57617B",
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: data.yDataOneName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(137, 189, 27, 0.6)",
},
- axisLabel: {
- show: true,
- color: '#fff',
- interval: 0,
+ {
+ offset: 0.8,
+ color: "rgba(137, 189, 27, 0.2)",
},
- data: data.xData,
- },
- ],
- yAxis: [
- {
- type: "value",
- axisTick: {
- show: false,
- },
- max: max + 0.5,
- min: min - 1,
- axisLine: {
- lineStyle: {
- color: "#57617B",
- },
- },
- axisLabel: {
- show: true,
- color: '#fff',
- interval: 0.5,
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: "#57617B",
- },
- },
- },
- ],
- series: [
- {
- name: data.yDataOneName,
- type: "line",
- smooth: false,
- lineStyle: {
- normal: {
- width: 1,
- },
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(137, 189, 27, 0.6)",
- },
- {
- offset: 0.8,
- color: "rgba(137, 189, 27, 0.2)",
- },
- ],
- false
- ),
- shadowColor: "rgba(0, 0, 0, 0.1)",
- shadowBlur: 10,
- },
- },
- itemStyle: {
- normal: {
- color: "rgb(137,189,27)",
- },
- },
- label: {
- //图形上的文本标签
- normal: {
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- data: data.yDataOne,
- },
- {
- name: data.yDataTwoName,
- type: "line",
- smooth: false,
- lineStyle: {
- normal: {
- width: 1,
- },
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(0, 136, 212, 0.6)",
- },
- {
- offset: 0.8,
- color: "rgba(0, 136, 212, 0.2)",
- },
- ],
- false
- ),
- shadowColor: "rgba(0, 0, 0, 0.1)",
- shadowBlur: 10,
- },
- },
- itemStyle: {
- normal: {
- color: "rgb(0,136,212)",
- },
- },
- label: {
- //图形上的文本标签
- normal: {
- show: true,
- position: "bottom",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- data: data.yDataTwo,
- },
- {
- name: data.yDataThreeName,
- type: "line",
- smooth: false,
- lineStyle: {
- normal: {
- width: 1,
- },
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(219, 50, 51, 0.6)",
- },
- {
- offset: 0.8,
- color: "rgba(219, 50, 51, 0.2)",
- },
- ],
- false
- ),
- shadowColor: "rgba(0, 0, 0, 0.1)",
- shadowBlur: 10,
- },
- },
- itemStyle: {
- normal: {
- color: "rgb(219,50,51)",
- },
- },
- data: data.yDataThree,
- },
- ],
- };
-
- if (data?.xData?.length >= 4) {
- option.dataZoom.push({
+ ],
+ false
+ ),
+ shadowColor: "rgba(0, 0, 0, 0.1)",
+ shadowBlur: 10,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(137,189,27)",
+ },
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
show: true,
- type: 'slider',
- bottom: '0%',
- xAxisIndex: 0,
- height: 12,
- start: 0,
- end: 1 / (data.xData.length / 4) * 100,
+ position: "top",
textStyle: {
- fontSize: 0,
- color: 'rgba(0,0,0,0)'
- }
- })
- option.grid.bottom = '7%'
- }
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ data: data.yDataOne,
+ },
+ {
+ name: data.yDataTwoName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(0, 136, 212, 0.6)",
+ },
+ {
+ offset: 0.8,
+ color: "rgba(0, 136, 212, 0.2)",
+ },
+ ],
+ false
+ ),
+ shadowColor: "rgba(0, 0, 0, 0.1)",
+ shadowBlur: 10,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(0,136,212)",
+ },
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ show: true,
+ position: "bottom",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ data: data.yDataTwo,
+ },
+ {
+ name: data.yDataThreeName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(219, 50, 51, 0.6)",
+ },
+ {
+ offset: 0.8,
+ color: "rgba(219, 50, 51, 0.2)",
+ },
+ ],
+ false
+ ),
+ shadowColor: "rgba(0, 0, 0, 0.1)",
+ shadowBlur: 10,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(219,50,51)",
+ },
+ },
+ data: data.yDataThree,
+ },
+ ],
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ if (data?.xData?.length >= 4) {
+ option.dataZoom.push({
+ show: true,
+ type: 'slider',
+ bottom: '0%',
+ xAxisIndex: 0,
+ height: 12,
+ start: 0,
+ end: 1 / (data.xData.length / 4) * 100,
+ textStyle: {
+ fontSize: 0,
+ color: 'rgba(0,0,0,0)'
+ }
+ })
+ option.grid.bottom = '7%'
+ }
+
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
const multipleBrokenLineAreaDiagram = (data, ids) => {
- let charts = echarts.init(ids);
+ let charts = echarts.init(ids);
- function Fun() {
- this.randomNum = function () {
- let arr = []
- for (let i = 0; i < 12; i++) {
- arr.push(parseInt(Math.random() * 100))
- }
- return arr
- }
+ function Fun() {
+ this.randomNum = function () {
+ let arr = []
+ for (let i = 0; i < 12; i++) {
+ arr.push(parseInt(Math.random() * 100))
+ }
+ return arr
}
+ }
- if (!data) {
- data = {
- xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
- yDataOne: new Fun().randomNum(),
- yDataTwo: new Fun().randomNum(),
- yDataOneName: '制氢量',
- yDataTwoName: '发电量',
- }
+ if (!data) {
+ data = {
+ xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+ yDataOne: new Fun().randomNum(),
+ yDataTwo: new Fun().randomNum(),
+ yDataOneName: '制氢量',
+ yDataTwoName: '发电量',
}
- let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo))
- let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo))
+ }
+ let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo))
+ let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo))
- let option = {
- tooltip: {
- trigger: "axis",
- axisPointer: {
- lineStyle: {
- color: "#57617B",
- },
- },
+ let option = {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ lineStyle: {
+ color: "#57617B",
},
- legend: {
- icon: "rect",
- itemWidth: 0.75 * vw,
- itemHeight: 0.25 * vw,
- itemGap: 0.75 * vw,
- data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
- right: "4%",
- textStyle: {
- fontSize: 0.75 * vw,
- color: "#F1F1F3",
- },
+ },
+ },
+ legend: {
+ icon: "rect",
+ itemWidth: 0.75 * vw,
+ itemHeight: 0.25 * vw,
+ itemGap: 0.75 * vw,
+ data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
+ right: "4%",
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
+ },
+ },
+ grid: {
+ top: "20%",
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ dataZoom: [],
+ xAxis: [
+ {
+ type: "category",
+ boundaryGap: false,
+ axisLine: {
+ lineStyle: {
+ color: "#57617B",
+ },
},
- grid: {
- top: "20%",
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
+ axisLabel: {
+ show: true,
+ color: '#fff',
+ interval: 0,
},
- dataZoom: [],
- xAxis: [
- {
- type: "category",
- boundaryGap: false,
- axisLine: {
- lineStyle: {
- color: "#57617B",
- },
+ data: data.xData,
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ axisTick: {
+ show: false,
+ },
+ max: max + 0.5,
+ min: min - 1,
+ axisLine: {
+ lineStyle: {
+ color: "#57617B",
+ },
+ },
+ axisLabel: {
+ show: true,
+ color: '#fff',
+ interval: 0.5,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#57617B",
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: data.yDataOneName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(137, 189, 27, 0.6)",
},
- axisLabel: {
- show: true,
- color: '#fff',
- interval: 0,
+ {
+ offset: 0.8,
+ color: "rgba(137, 189, 27, 0.2)",
},
- data: data.xData,
- },
- ],
- yAxis: [
- {
- type: "value",
- axisTick: {
- show: false,
- },
- max: max + 0.5,
- min: min - 1,
- axisLine: {
- lineStyle: {
- color: "#57617B",
- },
- },
- axisLabel: {
- show: true,
- color: '#fff',
- interval: 0.5,
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: "#57617B",
- },
- },
- },
- ],
- series: [
- {
- name: data.yDataOneName,
- type: "line",
- smooth: false,
- lineStyle: {
- normal: {
- width: 1,
- },
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(137, 189, 27, 0.6)",
- },
- {
- offset: 0.8,
- color: "rgba(137, 189, 27, 0.2)",
- },
- ],
- false
- ),
- shadowColor: "rgba(0, 0, 0, 0.1)",
- shadowBlur: 10,
- },
- },
- itemStyle: {
- normal: {
- color: "rgb(137,189,27)",
- },
- },
- label: {
- //图形上的文本标签
- normal: {
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- data: data.yDataOne,
- },
- {
- name: data.yDataTwoName,
- type: "line",
- smooth: false,
- lineStyle: {
- normal: {
- width: 1,
- },
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(0, 136, 212, 0.6)",
- },
- {
- offset: 0.8,
- color: "rgba(0, 136, 212, 0.2)",
- },
- ],
- false
- ),
- shadowColor: "rgba(0, 0, 0, 0.1)",
- shadowBlur: 10,
- },
- },
- itemStyle: {
- normal: {
- color: "rgb(0,136,212)",
- },
- },
- label: {
- //图形上的文本标签
- normal: {
- show: true,
- position: "bottom",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- data: data.yDataTwo,
- },
- {
- name: data.yDataThreeName,
- type: "line",
- smooth: false,
- lineStyle: {
- normal: {
- width: 1,
- },
- },
- areaStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "rgba(219, 50, 51, 0.6)",
- },
- {
- offset: 0.8,
- color: "rgba(219, 50, 51, 0.2)",
- },
- ],
- false
- ),
- shadowColor: "rgba(0, 0, 0, 0.1)",
- shadowBlur: 10,
- },
- },
- itemStyle: {
- normal: {
- color: "rgb(219,50,51)",
- },
- },
- data: data.yDataThree,
- },
- ],
- };
-
- if (data?.xData?.length >= 4) {
- option.dataZoom.push({
+ ],
+ false
+ ),
+ shadowColor: "rgba(0, 0, 0, 0.1)",
+ shadowBlur: 10,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(137,189,27)",
+ },
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
show: true,
- type: 'slider',
- bottom: '0%',
- xAxisIndex: 0,
- height: 12,
- start: 0,
- end: 1 / (data.xData.length / 4) * 100,
+ position: "top",
textStyle: {
- fontSize: 0,
- color: 'rgba(0,0,0,0)'
- }
- })
- option.grid.bottom = '7%'
- }
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ data: data.yDataOne,
+ },
+ {
+ name: data.yDataTwoName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(0, 136, 212, 0.6)",
+ },
+ {
+ offset: 0.8,
+ color: "rgba(0, 136, 212, 0.2)",
+ },
+ ],
+ false
+ ),
+ shadowColor: "rgba(0, 0, 0, 0.1)",
+ shadowBlur: 10,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(0,136,212)",
+ },
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ show: true,
+ position: "bottom",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ data: data.yDataTwo,
+ },
+ {
+ name: data.yDataThreeName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(219, 50, 51, 0.6)",
+ },
+ {
+ offset: 0.8,
+ color: "rgba(219, 50, 51, 0.2)",
+ },
+ ],
+ false
+ ),
+ shadowColor: "rgba(0, 0, 0, 0.1)",
+ shadowBlur: 10,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(219,50,51)",
+ },
+ },
+ data: data.yDataThree,
+ },
+ ],
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ if (data?.xData?.length >= 4) {
+ option.dataZoom.push({
+ show: true,
+ type: 'slider',
+ bottom: '0%',
+ xAxisIndex: 0,
+ height: 12,
+ start: 0,
+ end: 1 / (data.xData.length / 4) * 100,
+ textStyle: {
+ fontSize: 0,
+ color: 'rgba(0,0,0,0)'
+ }
+ })
+ option.grid.bottom = '7%'
+ }
+
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
const multipleBrokenLineAreaDiagramTwo = (data, ids) => {
- let charts = echarts.init(ids);
+ let charts = echarts.init(ids);
- function Fun() {
- this.randomNum = function () {
- let arr = []
- for (let i = 0; i < 12; i++) {
- arr.push(parseInt(Math.random() * 100))
- }
- return arr
- }
+ function Fun() {
+ this.randomNum = function () {
+ let arr = []
+ for (let i = 0; i < 12; i++) {
+ arr.push(parseInt(Math.random() * 100))
+ }
+ return arr
}
+ }
- if (!data) {
- data = {
- xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
- yDataOne: new Fun().randomNum(),
- yDataTwo: new Fun().randomNum(),
- yDataOneName: '制氢量',
- yDataTwoName: '发电量',
- }
+ if (!data) {
+ data = {
+ xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+ yDataOne: new Fun().randomNum(),
+ yDataTwo: new Fun().randomNum(),
+ yDataOneName: '制氢量',
+ yDataTwoName: '发电量',
}
- let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo, ...data.yDataThree, ...data.yDataFour, ...data.yDataFive))
- let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo, ...data.yDataThree, ...data.yDataFour, ...data.yDataFive))
+ }
+ let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo, ...data.yDataThree, ...data.yDataFour, ...data.yDataFive))
+ let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo, ...data.yDataThree, ...data.yDataFour, ...data.yDataFive))
- let option = {
- tooltip: {
- trigger: "axis",
- // formatter:'{a} {c}%',
- axisPointer: {
- lineStyle: {
- color: "#57617B",
- },
- },
+ let option = {
+ tooltip: {
+ trigger: "axis",
+ // formatter:'{a} {c}%',
+ axisPointer: {
+ lineStyle: {
+ color: "#57617B",
},
- legend: {
- icon: "rect",
- itemWidth: 0.75 * vw,
- itemHeight: 0.25 * vw,
- itemGap: 0.75 * vw,
- data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName, data.yDataFiveName],
- right: "4%",
+ },
+ },
+ legend: {
+ icon: "rect",
+ itemWidth: 0.75 * vw,
+ itemHeight: 0.25 * vw,
+ itemGap: 0.75 * vw,
+ data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName, data.yDataFourName, data.yDataFiveName],
+ right: "4%",
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
+ },
+ },
+ grid: {
+ top: "20%",
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ dataZoom: [],
+ xAxis: [
+ {
+ type: "category",
+ boundaryGap: false,
+ axisLine: {
+ lineStyle: {
+ color: "#57617B",
+ },
+ },
+ axisLabel: {
+ show: true,
+ color: '#fff',
+ interval: 0,
+ },
+ data: data.xData,
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ axisTick: {
+ show: false,
+ },
+ max: max + 1,
+ min: 90,
+ axisLine: {
+ lineStyle: {
+ color: "#57617B",
+ },
+ },
+ axisLabel: {
+ formatter: '{value}%',
+ show: true,
+ color: '#fff',
+ interval: 0.5,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#57617B",
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: data.yDataOneName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(137,189,27)",
+ },
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ show: true,
+ position: "top",
+ formatter: '{c}%',
textStyle: {
- fontSize: 0.75 * vw,
- color: "#F1F1F3",
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
},
+ },
},
- grid: {
- top: "20%",
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
+ data: data.yDataOne,
+ },
+ {
+ name: data.yDataTwoName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
},
- dataZoom: [],
- xAxis: [
- {
- type: "category",
- boundaryGap: false,
- axisLine: {
- lineStyle: {
- color: "#57617B",
- },
- },
- axisLabel: {
- show: true,
- color: '#fff',
- interval: 0,
- },
- data: data.xData,
+ itemStyle: {
+ normal: {
+ color: "rgb(0,136,212)",
+ },
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ formatter: '{c}%',
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
},
- ],
- yAxis: [
- {
- type: "value",
- axisTick: {
- show: false,
- },
- max: max + 1,
- min: 90,
- axisLine: {
- lineStyle: {
- color: "#57617B",
- },
- },
- axisLabel: {
- formatter: '{value}%',
- show: true,
- color: '#fff',
- interval: 0.5,
- },
- splitLine: {
- show: false,
- lineStyle: {
- color: "#57617B",
- },
- },
+ },
+ },
+ data: data.yDataTwo,
+ },
+ {
+ name: data.yDataThreeName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(219,50,51)",
+ },
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ formatter: '{c}%',
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
},
- ],
- series: [
- {
- name: data.yDataOneName,
- type: "line",
- smooth: false,
- lineStyle: {
- normal: {
- width: 1,
- },
- },
- itemStyle: {
- normal: {
- color: "rgb(137,189,27)",
- },
- },
- label: {
- //图形上的文本标签
- normal: {
- show: true,
- position: "top",
- formatter: '{c}%',
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- data: data.yDataOne,
+ },
+ },
+ data: data.yDataThree,
+ },
+ {
+ name: data.yDataFourName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(0,136,212)",
+ },
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ formatter: '{c}%',
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
},
- {
- name: data.yDataTwoName,
- type: "line",
- smooth: false,
- lineStyle: {
- normal: {
- width: 1,
- },
- },
- itemStyle: {
- normal: {
- color: "rgb(0,136,212)",
- },
- },
- label: {
- //图形上的文本标签
- normal: {
- formatter: '{c}%',
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- data: data.yDataTwo,
+ },
+ },
+ data: data.yDataFour,
+ },
+ {
+ name: data.yDataFiveName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(219,50,51)",
+ },
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ formatter: '{c}%',
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
},
- {
- name: data.yDataThreeName,
- type: "line",
- smooth: false,
- lineStyle: {
- normal: {
- width: 1,
- },
- },
- itemStyle: {
- normal: {
- color: "rgb(219,50,51)",
- },
- },
- label: {
- //图形上的文本标签
- normal: {
- formatter: '{c}%',
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- data: data.yDataThree,
- },
- {
- name: data.yDataFourName,
- type: "line",
- smooth: false,
- lineStyle: {
- normal: {
- width: 1,
- },
- },
- itemStyle: {
- normal: {
- color: "rgb(0,136,212)",
- },
- },
- label: {
- //图形上的文本标签
- normal: {
- formatter: '{c}%',
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- data: data.yDataFour,
- },
- {
- name: data.yDataFiveName,
- type: "line",
- smooth: false,
- lineStyle: {
- normal: {
- width: 1,
- },
- },
- itemStyle: {
- normal: {
- color: "rgb(219,50,51)",
- },
- },
- label: {
- //图形上的文本标签
- normal: {
- formatter: '{c}%',
- show: true,
- position: "top",
- textStyle: {
- color: "#a8aab0",
- fontStyle: "normal",
- fontFamily: "微软雅黑",
- fontSize: 0.75 * vw,
- },
- },
- },
- data: data.yDataFive,
- },
- ],
- };
+ },
+ },
+ data: data.yDataFive,
+ },
+ ],
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
// 空心饼图
const hollowPieChart = function (data, id) {
- let charts = echarts.init(id);
- if (!data) {
- data = [
- {
- value: 10,
- name: "IQC1",
- },
- {
- value: 5,
- name: "IQC2",
- },
- {
- value: 15,
- name: "IQC3",
- },
- {
- value: 25,
- name: "IQC4",
- },
- {
- value: 20,
- name: "IQC5",
- },
- {
- value: 35,
- name: "IQC6",
- },
- ]
- }
- let option = {
- color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
- grid: {
- left: '-10%',
- top: '10%',
- bottom: '10%',
- right: '10%',
- containLabel: true,
+ let charts = echarts.init(id);
+ if (!data) {
+ data = [
+ {
+ value: 10,
+ name: "IQC1",
+ },
+ {
+ value: 5,
+ name: "IQC2",
+ },
+ {
+ value: 15,
+ name: "IQC3",
+ },
+ {
+ value: 25,
+ name: "IQC4",
+ },
+ {
+ value: 20,
+ name: "IQC5",
+ },
+ {
+ value: 35,
+ name: "IQC6",
+ },
+ ]
+ }
+ let option = {
+ color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"],
+ grid: {
+ left: '-10%',
+ top: '10%',
+ bottom: '10%',
+ right: '10%',
+ containLabel: true,
+ },
+ tooltip: {
+ trigger: "item",
+ formatter: "{b} : {c} ({d}%)",
+ },
+ polar: {},
+ angleAxis: {
+ interval: 1,
+ type: "category",
+ data: [],
+ z: 10,
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ }
+ },
+ radiusAxis: {
+ min: 40,
+ max: 120,
+ interval: 20,
+ axisLine: {
+ show: false,
+ },
+ axisLabel: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ },
+ },
+ // calculable: true,
+ series: [
+ {
+ stack: "a",
+ type: "pie",
+ radius: ["20%", "80%"],
+ zlevel: 10,
+ label: {
+ show: false
},
- tooltip: {
- trigger: "item",
- formatter: "{b} : {c} ({d}%)",
- },
- polar: {},
- angleAxis: {
- interval: 1,
- type: "category",
- data: [],
- z: 10,
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- }
- },
- radiusAxis: {
- min: 40,
- max: 120,
- interval: 20,
- axisLine: {
- show: false,
- },
- axisLabel: {
- show: false,
- },
- axisTick: {
- show: false,
- },
- splitLine: {
- show: false,
- },
- },
- // calculable: true,
- series: [
- {
- stack: "a",
- type: "pie",
- radius: ["20%", "80%"],
- zlevel: 10,
- label: {
- show: false
- },
- // roseType: "area",
- data: data,
- },
- ],
- };
+ // roseType: "area",
+ data: data,
+ },
+ ],
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
// 多个环形图
const percentageRingDiagram = function (data, id) {
- let charts = echarts.init(id);
- console.log(data)
- data ??= [
- {
- name: "内胆检漏",
- value: 54,
- },
- {
- name: "安全检测",
- value: 44,
- },
- {
- name: "成品检漏",
- value: 35,
- },
- {
- name: "测温性能",
- value: 30,
- },
- {
- name: "成品外观",
- value: 44,
- },
- ];
+ let charts = echarts.init(id);
+ console.log(data)
+ data ??= [
+ {
+ name: "内胆检漏",
+ value: 54,
+ },
+ {
+ name: "安全检测",
+ value: 44,
+ },
+ {
+ name: "成品检漏",
+ value: 35,
+ },
+ {
+ name: "测温性能",
+ value: 30,
+ },
+ {
+ name: "成品外观",
+ value: 44,
+ },
+ ];
- let titleArr = [],
- seriesArr = [];
- let colors = [
- ["#389af4", "#dfeaff"],
- ["#ff8c37", "#ffdcc3"],
- ["#ffc257", "#ffedcc"],
- ["#fd6f97", "#fed4e0"],
- ["#a181fc", "#e3d9fe"],
- ["#389af4", "#dfeaff"],
- ["#ff8c37", "#ffdcc3"],
- ["#ffc257", "#ffedcc"],
- ["#fd6f97", "#fed4e0"],
- ];
- data.forEach(function (item, index) {
- titleArr.push({
- text: item.name,
- x: index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
- y: index > 2 ? "93%" : "43%",
- // top: '65%',
- textAlign: "center",
- textStyle: {
- fontWeight: "normal",
- fontSize: 0.8 * vw,
- color: colors[index][0],
- textAlign: "center",
- },
- });
- seriesArr.push({
- // name: item.name,
- type: "pie",
- clockWise: false,
- radius: [2 * vw, 2.5 * vw],
- itemStyle: {
- normal: {
- color: colors[index][0],
- shadowColor: colors[index][0],
- shadowBlur: 0,
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- },
- },
- hoverAnimation: false,
- center: [
- index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
- index > 2 ? "75%" : "25%",
- ],
- data: [
- {
- value: item.value,
- label: {
- normal: {
- formatter: function (params) {
- return params.value + "%";
- },
- position: "center",
- show: true,
- textStyle: {
- fontSize: vw,
- fontWeight: "bold",
- color: colors[index][0],
- },
- },
- },
- },
- {
- value: 100 - item.value,
- name: "invisible",
- itemStyle: {
- normal: {
- color: colors[index][1],
- },
- emphasis: {
- color: colors[index][1],
- },
- },
- },
- ],
- });
+ let titleArr = [],
+ seriesArr = [];
+ let colors = [
+ ["#389af4", "#dfeaff"],
+ ["#ff8c37", "#ffdcc3"],
+ ["#ffc257", "#ffedcc"],
+ ["#fd6f97", "#fed4e0"],
+ ["#a181fc", "#e3d9fe"],
+ ["#389af4", "#dfeaff"],
+ ["#ff8c37", "#ffdcc3"],
+ ["#ffc257", "#ffedcc"],
+ ["#fd6f97", "#fed4e0"],
+ ];
+ data.forEach(function (item, index) {
+ titleArr.push({
+ text: item.name,
+ x: index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
+ y: index > 2 ? "93%" : "43%",
+ // top: '65%',
+ textAlign: "center",
+ textStyle: {
+ fontWeight: "normal",
+ fontSize: 0.8 * vw,
+ color: colors[index][0],
+ textAlign: "center",
+ },
});
+ seriesArr.push({
+ // name: item.name,
+ type: "pie",
+ clockWise: false,
+ radius: [2 * vw, 2.5 * vw],
+ itemStyle: {
+ normal: {
+ color: colors[index][0],
+ shadowColor: colors[index][0],
+ shadowBlur: 0,
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ },
+ },
+ hoverAnimation: false,
+ center: [
+ index > 2 ? (index - 3) * 25 + 30 + "%" : index * 25 + 20 + "%",
+ index > 2 ? "75%" : "25%",
+ ],
+ data: [
+ {
+ value: item.value,
+ label: {
+ normal: {
+ formatter: function (params) {
+ return params.value + "%";
+ },
+ position: "center",
+ show: true,
+ textStyle: {
+ fontSize: vw,
+ fontWeight: "bold",
+ color: colors[index][0],
+ },
+ },
+ },
+ },
+ {
+ value: 100 - item.value,
+ name: "invisible",
+ itemStyle: {
+ normal: {
+ color: colors[index][1],
+ },
+ emphasis: {
+ color: colors[index][1],
+ },
+ },
+ },
+ ],
+ });
+ });
- let option = {
- title: titleArr,
- series: seriesArr,
- };
+ let option = {
+ title: titleArr,
+ series: seriesArr,
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
const percentageRingDiagramTwo = function (data, id) {
- let charts = echarts.init(id);
- if (!data) {
- data = [
- {
- name: "内胆检测",
- value: 99,
- },
- {
- name: "安全检测",
- value: 98.5,
- },
- {
- name: "压力检测",
- value: 99.8,
- },
- {
- name: "温度检测",
- value: 98.8,
- },
- {
- name: "外观检测",
- value: 99,
- },
- ];
- }
-
- let titleArr = [],
- seriesArr = [];
- let colors = [
- ["#389af4", "#dfeaff"],
- ["#ff8c37", "#ffdcc3"],
- ["#ffc257", "#ffedcc"],
- ["#fd6f97", "#fed4e0"],
- ["#a181fc", "#e3d9fe"],
- ["#389af4", "#dfeaff"],
- ["#ff8c37", "#ffdcc3"],
- ["#ffc257", "#ffedcc"],
- ["#fd6f97", "#fed4e0"],
+ let charts = echarts.init(id);
+ if (!data) {
+ data = [
+ {
+ name: "内胆检测",
+ value: 99,
+ },
+ {
+ name: "安全检测",
+ value: 98.5,
+ },
+ {
+ name: "压力检测",
+ value: 99.8,
+ },
+ {
+ name: "温度检测",
+ value: 98.8,
+ },
+ {
+ name: "外观检测",
+ value: 99,
+ },
];
- data.forEach(function (item, index) {
- titleArr.push({
- text: item.name,
- x: index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%",
- y: '85%',
- // top: '65%',
- textAlign: "center",
- textStyle: {
- fontWeight: "normal",
- fontSize: 0.8 * vw,
- color: colors[index][0],
- textAlign: "center",
- },
- });
- seriesArr.push({
- // name: item.name,
- type: "pie",
- clockWise: false,
- radius: [2 * vw, 2.5 * vw],
- itemStyle: {
- normal: {
- color: colors[index][0],
- shadowColor: colors[index][0],
- shadowBlur: 0,
- label: {
- show: false,
- },
- labelLine: {
- show: false,
- },
- },
- },
- hoverAnimation: false,
- center: [
- index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%",
- '50%',
- ],
- data: [
- {
- value: item.value,
- label: {
- normal: {
- formatter: function (params) {
- return params.value + "%";
- },
- position: "center",
- show: true,
- textStyle: {
- fontSize: vw,
- fontWeight: "bold",
- color: colors[index][0],
- },
- },
- },
- },
- {
- value: 100 - item.value,
- name: "invisible",
- itemStyle: {
- normal: {
- color: colors[index][1],
- },
- emphasis: {
- color: colors[index][1],
- },
- },
- },
- ],
- });
+ }
+
+ let titleArr = [],
+ seriesArr = [];
+ let colors = [
+ ["#389af4", "#dfeaff"],
+ ["#ff8c37", "#ffdcc3"],
+ ["#ffc257", "#ffedcc"],
+ ["#fd6f97", "#fed4e0"],
+ ["#a181fc", "#e3d9fe"],
+ ["#389af4", "#dfeaff"],
+ ["#ff8c37", "#ffdcc3"],
+ ["#ffc257", "#ffedcc"],
+ ["#fd6f97", "#fed4e0"],
+ ];
+ data.forEach(function (item, index) {
+ titleArr.push({
+ text: item.name,
+ x: index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%",
+ y: '85%',
+ // top: '65%',
+ textAlign: "center",
+ textStyle: {
+ fontWeight: "normal",
+ fontSize: 0.8 * vw,
+ color: colors[index][0],
+ textAlign: "center",
+ },
});
+ seriesArr.push({
+ // name: item.name,
+ type: "pie",
+ clockWise: false,
+ radius: [2 * vw, 2.5 * vw],
+ itemStyle: {
+ normal: {
+ color: colors[index][0],
+ shadowColor: colors[index][0],
+ shadowBlur: 0,
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ },
+ },
+ hoverAnimation: false,
+ center: [
+ index > 4 ? (index - 5) * 20 + 10 + "%" : index * 20 + 10 + "%",
+ '50%',
+ ],
+ data: [
+ {
+ value: item.value,
+ label: {
+ normal: {
+ formatter: function (params) {
+ return params.value + "%";
+ },
+ position: "center",
+ show: true,
+ textStyle: {
+ fontSize: vw,
+ fontWeight: "bold",
+ color: colors[index][0],
+ },
+ },
+ },
+ },
+ {
+ value: 100 - item.value,
+ name: "invisible",
+ itemStyle: {
+ normal: {
+ color: colors[index][1],
+ },
+ emphasis: {
+ color: colors[index][1],
+ },
+ },
+ },
+ ],
+ });
+ });
- let option = {
- title: titleArr,
- series: seriesArr,
- };
+ let option = {
+ title: titleArr,
+ series: seriesArr,
+ };
- charts.setOption(option);
- $(window).resize(charts.resize);
+ charts.setOption(option);
+ $(window).resize(charts.resize);
}
diff --git a/ruoyi-admin/src/main/resources/templates/broad/box.html b/ruoyi-admin/src/main/resources/templates/broad/box.html
index c73b4a6..40df0a1 100644
--- a/ruoyi-admin/src/main/resources/templates/broad/box.html
+++ b/ruoyi-admin/src/main/resources/templates/broad/box.html
@@ -18,9 +18,10 @@
+
@@ -367,14 +369,14 @@