From 16936e742962bb8fe8e412dea808a808aa722d8a Mon Sep 17 00:00:00 2001 From: qsj <731458905@qq.com> Date: Sat, 16 Mar 2024 10:11:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85=E4=BB=AA=E5=99=A8=E6=8A=A4?= =?UTF-8?q?=E7=90=86=E8=84=B8=E9=83=A81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Echart_face/index.tsx | 602 +++++++++--------- .../face_report_one/face_report_one.less | 2 +- 2 files changed, 302 insertions(+), 302 deletions(-) diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx index c5ce263..1147913 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx +++ b/src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx @@ -22,88 +22,178 @@ function Index() { var endRGB = hexToRgb(endColor); var colors = []; for (var i = 0; i < steps; i++) { - var r = interpolate(startRGB.r, endRGB.r, steps, i); - var g = interpolate(startRGB.g, endRGB.g, steps, i); - var b = interpolate(startRGB.b, endRGB.b, steps, i); - colors.push(rgbToHex(r, g, b)); + var r = interpolate(startRGB.r, endRGB.r, steps, i); + var g = interpolate(startRGB.g, endRGB.g, steps, i); + var b = interpolate(startRGB.b, endRGB.b, steps, i); + colors.push(rgbToHex(r, g, b)); } return colors; - } - - function hexToRgb(hex) { +} + +function hexToRgb(hex) { var bigint = parseInt(hex.slice(1), 16); var r = (bigint >> 16) & 255; var g = (bigint >> 8) & 255; var b = bigint & 255; return { r: r, g: g, b: b }; - } - - function rgbToHex(r, g, b) { - return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); - } - - function interpolate(start, end, steps, count) { +} + +function rgbToHex(r, g, b) { + return ( + "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1) + ); +} + +function interpolate(start, end, steps, count) { return start + ((end - start) / steps) * count; - } - - const startColor = '#FFFF00'; // 黄色 - const endColor = '#FF0000'; // 红色 - const steps = 100; // 50个颜色 - - const colors = generateColorArray(startColor, endColor, steps); - const xList = [...new Array(361).fill(0).map((item, key) => key)]; - // const seriesData = [ - // ...xList.map((item) => { - // return Math.random() * 100; - // }) - // ]; - let seriesData=[ - 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3, - 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3, - 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 - ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 - ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 - ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 - ,1,2,2,3,3,4,5,1,2,3,4,2,8,5,1,2,3, - 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 - ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 - ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 - ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 - ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 - ] - console.log(seriesData,'seriesData',xList); +} + +const startColor = "#FFFF00"; // 黄色 +const endColor = "#FF0000"; // 红色 +const steps = 80; // 80个颜色 + + +const colors = generateColorArray(startColor, endColor, steps); +const xList = [...new Array(61).fill(0).map((item, key) => key)]; +const seriesData = [ + ...xList.map((item) => { + return Math.random() * 80; + }), +]; + // let seriesData=[ + // 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3, + // 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3, + // 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 + // ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 + // ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 + // ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 + // ,1,2,2,3,3,4,5,1,2,3,4,2,8,5,1,2,3, + // 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 + // ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 + // ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 + // ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 + // ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3 + // ] + // console.log(seriesData,'seriesData',xList); - // const option: EChartOption ={ + const option: EChartOption ={ + grid: { + // 让图表占满容器 + top: "0rpx", + left: "28rpx", + right: "28rpx", + bottom: "17rpx", + }, + xAxis: { + type: "category", + data: [...xList], + axisLabel: { + interval: 9, + formatter: function (value, index) { + return value * 6 + 's'; + }, + textStyle: { + color: '#999999', // 文字颜色 + fontSize: 8 // 文字大小 + }, + }, + axisTick: { + // alignWithLabel: true, + show: false, + interval: 9, + }, + // axisLine: { + // show: false, + // }, + }, + yAxis: [ + { + min: 0, + max: 80, + splitNumber: 10, + axisLabel: { + formatter: function (value, index) { + const num = value / 10 + 1 + return num === 9 ? '' : num + '级'; + }, + textStyle: { + color: '#999999', // 文字颜色 + fontSize: 8 // 文字大小 + }, + }, + type: "value", + splitLine: { + lineStyle: { + color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"], + type:'dashed' + }, + } + }, + ], + series: [ + + { + barCategoryGap:'0%', + data: seriesData, + type: "bar", + // barWidth: 15, + gapWidth: "0%", + itemStyle: { + normal: { + color: function (params) { + var value = params.data; + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colors[parseInt(value)], // 红色 + }, + { + offset: 1, + color: colors[0], // 黄色 + }, + ]);; + }, + }, + }, + }, + ], + }; + // const option: EChartOption = { // grid: { - // // 让图表占满容器 - // top: "28rpx", - // left: "18rpx", - // right: "28rpx", - // bottom: "17rpx", + // // 让图表占满容器 + // top: "28rpx", + // left: "18rpx", + // right: "28rpx", + // bottom: "17rpx", + // }, + // xAxis: [ + // { + // type: 'category', + // axisTick: { show: false }, + // data: ['2012', '2013', '2014', '2015', '2016'], + // axisLine: { + // show: false, + // }, + // axisLabel: { + // show: false, // }, - // xAxis: { - // type: 'category', - // data: [...xList], - // axisLabel: { - // interval: 59 - // }, - // axisTick: { - // alignWithLabel: true, - // interval: 10, - // show: false, - // }, - // axisLine: { - // show: false, - // }, - - + + // } + // ], + // yAxis: { + // type: "value", + // min: 0, + // max: 8, + // splitNumber: 8, + // splitLine: { + // show: false, + // // lineStyle: { + // // color: "#cccccc", + // // type: [4, 2], + // // dashOffset: 4, + // // }, // }, - // yAxis: { - // min: 0, - // max: 8, - // splitNumber: 8, - // type: 'value', - // axisLine: { + // axisLine: { // show: false, // }, // axisLabel: { @@ -112,223 +202,152 @@ function Index() { // axisTick: { // show: false, // }, - // }, + // }, + // series: [ + // { barCategoryGap:'0%', + // name: 'Forest', + // type: 'bar', + // barGap: 0, + // // label: labelOption, + // // emphasis: { + // // focus: 'series' + // // }, + // data: [2, 4, 4, 5, 7] + // }, + // { barCategoryGap:'0%', + // name: 'Steppe', + // type: 'bar', + // // label: labelOption, + // emphasis: { + // focus: 'series' + // }, + // data: [2, 4, 4, 5, 7] + // }, + // { barCategoryGap:'0%', + // name: 'Desert', + // type: 'bar', + // // label: labelOption, + // // emphasis: { + // // focus: 'series' + // // }, + // data: [2, 4, 4, 5, 7] + // }, + // { barCategoryGap:'0%', + // name: 'Wetland', + // type: 'bar', + // // label: labelOption, + // // emphasis: { + // // focus: 'series' + // // }, + // data: [2, 4, 4, 5, 7] + // }, + // { barCategoryGap:'0%', + // name: 'demo1', + // type: 'bar', + // // label: labelOption, + // // emphasis: { + // // focus: 'series' + // // }, + // data: [2, 4, 4, 5, 7] + // }, + // { barCategoryGap:'0%', + // name: 'demo2', + // type: 'bar', + // // label: labelOption, + // // emphasis: { + // // focus: 'series' + // // }, + // data: [2, 4, 4, 5, 7] + // }, + // { barCategoryGap:'0%', + // name: 'demo3', + // type: 'bar', + // // label: labelOption, + // // emphasis: { + // // focus: 'series' + // // }, + // data: [2, 4, 4, 5, 7] + // }, + // { barCategoryGap:'0%', + // name: 'demo4', + // type: 'bar', + // // label: labelOption, + // // emphasis: { + // // focus: 'series' + // // }, + // data: [2, 4, 4, 5, 7] + // }, + // { barCategoryGap:'0%', + // name: 'demo5', + // type: 'bar', + // // label: labelOption, + // // emphasis: { + // // focus: 'series' + // // }, + // data: [2, 4, 4, 5, 7] + // }, // { - // data: seriesData, + // color:'red', + // barCategoryGap:'0%', + // name: 'demo6', // type: 'bar', - // // barWidth: 15, - // itemStyle: { - // normal: { - // color: function (params) { - // var value = params.data; - // var color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - // { - // offset: 0, - // color: colors[parseInt(value)] // 红色 - // }, - // { - // offset: 1, - // color: colors[0] // 黄色 - // } - // ]); - // return value === 100 ? '#FF0000' : color; - // } - // } - // } + // // label: labelOption, + // // emphasis: { + // // focus: 'series' + // // }, + // data: [2, 4, 4, 5, 7] // } // ] - // } - const option: EChartOption = { - grid: { - // 让图表占满容器 - top: "28rpx", - left: "18rpx", - right: "28rpx", - bottom: "17rpx", - }, - xAxis: [ - { - type: 'category', - axisTick: { show: false }, - data: ['2012', '2013', '2014', '2015', '2016'], - axisLine: { - show: false, - }, - axisLabel: { - show: false, - }, - - } - ], - yAxis: { - type: "value", - min: 0, - max: 8, - splitNumber: 8, - splitLine: { - show: false, - // lineStyle: { - // color: "#cccccc", - // type: [4, 2], - // dashOffset: 4, - // }, - }, - axisLine: { - show: false, - }, - axisLabel: { - show: false, - }, - axisTick: { - show: false, - }, - }, - - series: [ - { barCategoryGap:'0%', - name: 'Forest', - type: 'bar', - barGap: 0, - // label: labelOption, - // emphasis: { - // focus: 'series' - // }, - data: [2, 4, 4, 5, 7] - }, - { barCategoryGap:'0%', - name: 'Steppe', - type: 'bar', - // label: labelOption, - emphasis: { - focus: 'series' - }, - data: [2, 4, 4, 5, 7] - }, - { barCategoryGap:'0%', - name: 'Desert', - type: 'bar', - // label: labelOption, - // emphasis: { - // focus: 'series' - // }, - data: [2, 4, 4, 5, 7] - }, - { barCategoryGap:'0%', - name: 'Wetland', - type: 'bar', - // label: labelOption, - // emphasis: { - // focus: 'series' - // }, - data: [2, 4, 4, 5, 7] - }, - { barCategoryGap:'0%', - name: 'demo1', - type: 'bar', - // label: labelOption, - // emphasis: { - // focus: 'series' - // }, - data: [2, 4, 4, 5, 7] - }, - { barCategoryGap:'0%', - name: 'demo2', - type: 'bar', - // label: labelOption, - // emphasis: { - // focus: 'series' - // }, - data: [2, 4, 4, 5, 7] - }, - { barCategoryGap:'0%', - name: 'demo3', - type: 'bar', - // label: labelOption, - // emphasis: { - // focus: 'series' - // }, - data: [2, 4, 4, 5, 7] - }, - { barCategoryGap:'0%', - name: 'demo4', - type: 'bar', - // label: labelOption, - // emphasis: { - // focus: 'series' - // }, - data: [2, 4, 4, 5, 7] - }, - { barCategoryGap:'0%', - name: 'demo5', - type: 'bar', - // label: labelOption, - // emphasis: { - // focus: 'series' - // }, - data: [2, 4, 4, 5, 7] - }, - { - color:'red', - barCategoryGap:'0%', - name: 'demo6', - type: 'bar', - // label: labelOption, - // emphasis: { - // focus: 'series' - // }, - data: [2, 4, 4, 5, 7] - } - ] - // grid: { - // // 让图表占满容器 - // top: "28rpx", - // left: "18rpx", - // right: "28rpx", - // bottom: "17rpx", - // }, - // xAxis: { - // type: 'category', - // // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], - // show: false, - // // axisLine: { - // // show: false, - // // }, + // // grid: { + // // // 让图表占满容器 + // // top: "28rpx", + // // left: "18rpx", + // // right: "28rpx", + // // bottom: "17rpx", + // // }, + // // xAxis: { + // // type: 'category', + // // // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], + // // show: false, + // // // axisLine: { + // // // show: false, + // // // }, - // }, - // yAxis: { - // type: "value", - // min: 0, - // max: 50, - // splitNumber: 10, - // splitLine: { - // show: false, - // // lineStyle: { - // // color: "#cccccc", - // // type: [4, 2], - // // dashOffset: 4, - // // }, - // }, - // axisLine: { - // show: false, - // }, - // axisLabel: { - // show: false, - // }, - // axisTick: { - // show: false, - // }, - // }, - // series: [ - // { - // data: [1, 6, 3, 4, 7, 6, 0,8, 0, 10, 11, 12, 13, 14,15, 16, 17, 18, 19, 20, 21,22, 23, 24, 25, 26, 27, 28,29, 30, 31, 32, 33, 34, 35,36], - // type: 'bar', - // barWidth:30, //设置柱子的宽度 - // barGap:'100%', - // barCategoryGap:'0%', - // } - // ] - }; + // // }, + // // yAxis: { + // // type: "value", + // // min: 0, + // // max: 50, + // // splitNumber: 10, + // // splitLine: { + // // show: false, + // // // lineStyle: { + // // // color: "#cccccc", + // // // type: [4, 2], + // // // dashOffset: 4, + // // // }, + // // }, + // // axisLine: { + // // show: false, + // // }, + // // axisLabel: { + // // show: false, + // // }, + // // axisTick: { + // // show: false, + // // }, + // // }, + // // series: [ + // // { + // // data: [1, 6, 3, 4, 7, 6, 0,8, 0, 10, 11, 12, 13, 14,15, 16, 17, 18, 19, 20, 21,22, 23, 24, 25, 26, 27, 28,29, 30, 31, 32, 33, 34, 35,36], + // // type: 'bar', + // // barWidth:30, //设置柱子的宽度 + // // barGap:'100%', + // // barCategoryGap:'0%', + // // } + // // ] + // }; const level = [8, 7, 6, 5, 4, 3, 2]; let arr =[2,3,4,5,6,7] @@ -341,28 +360,9 @@ function Index() { ref={echartsRef} // isPage={false} // style自定义设置echarts宽高 - style={{ width: "630rpx", height: "167rpx" }} + style={{ width: "630rpx", height: "240rpx" }} /> - - {level.map((item) => ( - - {item} - 8 - - ))} - - 1 - - {/* 时间 */} - - { - arr.map(item =>( - {item} - )) - } - - diff --git a/src/pages/face_report_one/face_report_one.less b/src/pages/face_report_one/face_report_one.less index 93c6a9f..f0ea911 100644 --- a/src/pages/face_report_one/face_report_one.less +++ b/src/pages/face_report_one/face_report_one.less @@ -77,7 +77,7 @@ page { } .eacharts{ // background-color: red; - margin-top: 14px; + // margin-top: 14px; margin-bottom: 45rpx; /* margin: 52rpx 0rpx; */ width: 100%;