314637581
/
flossom-miniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

封装仪器护理脸部1

Browse Source
master
qsj 2 years ago
parent 3310ce54d4
commit 16936e7429
2 changed files with 302 additions and 302 deletions
Show Stats Download Patch File Download Diff File

482
src/moduleIOT/pages/iotCarePlan/components/Echart_face/index.tsx
Unescape Escape View File

@ -39,247 +39,126 @@ function Index() {
} }
function rgbToHex(r, g, b) { function rgbToHex(r, g, b) {
return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); return (
"#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
);
} }
function interpolate(start, end, steps, count) { function interpolate(start, end, steps, count) {
return start + ((end - start) / steps) * count; return start + ((end - start) / steps) * count;
} }
const startColor = '#FFFF00'; // 黄色 const startColor = "#FFFF00"; // 黄色
const endColor = '#FF0000'; // 红色 const endColor = "#FF0000"; // 红色
const steps = 100; // 50个颜色 const steps = 80; // 80个颜色
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 option: EChartOption ={
// grid: {
// // 让图表占满容器
// top: "28rpx",
// left: "18rpx",
// right: "28rpx",
// bottom: "17rpx",
// },
// xAxis: {
// type: 'category',
// data: [...xList],
// axisLabel: {
// interval: 59
// },
// axisTick: {
// alignWithLabel: true,
// interval: 10,
// show: false,
// },
// axisLine: {
// show: false,
// },
// }, const colors = generateColorArray(startColor, endColor, steps);
// yAxis: { const xList = [...new Array(61).fill(0).map((item, key) => key)];
// min: 0, const seriesData = [
// max: 8, ...xList.map((item) => {
// splitNumber: 8, return Math.random() * 80;
// type: 'value', }),
// axisLine: { ];
// show: false, // 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,
// axisLabel: { // 1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3,
// show: false, // 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
// axisTick: { // ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
// show: false, // ,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
// series: [ // ,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
// data: seriesData, // ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
// type: 'bar', // ,1,2,2,3,3,4,5,1,2,3,4,2,3,5,1,2,3
// // 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;
// }
// }
// }
// }
// ] // ]
// } // console.log(seriesData,'seriesData',xList);
const option: EChartOption ={ const option: EChartOption ={
grid: { grid: {
// 让图表占满容器 // 让图表占满容器
top: "28rpx", top: "0rpx",
left: "18rpx", left: "28rpx",
right: "28rpx", right: "28rpx",
bottom: "17rpx", bottom: "17rpx",
}, },
xAxis: [ xAxis: {
{ type: "category",
type: 'category', data: [...xList],
axisTick: { show: false },
data: ['2012', '2013', '2014', '2015', '2016'],
axisLine: {
show: false,
},
axisLabel: { axisLabel: {
show: false, interval: 9,
}, formatter: function (value, index) {
return value * 6 + 's';
}
],
yAxis: {
type: "value",
min: 0,
max: 8,
splitNumber: 8,
splitLine: {
show: false,
// lineStyle: {
// color: "#cccccc",
// type: [4, 2],
// dashOffset: 4,
// },
}, },
axisLine: { textStyle: {
show: false, color: '#999999', // 文字颜色
fontSize: 8 // 文字大小
}, },
axisLabel: {
show: false,
}, },
axisTick: { axisTick: {
// alignWithLabel: true,
show: false, show: false,
interval: 9,
}, },
}, // axisLine: {
// show: false,
series: [
{ barCategoryGap:'0%',
name: 'Forest',
type: 'bar',
barGap: 0,
// label: labelOption,
// emphasis: {
// focus: 'series'
// }, // },
data: [2, 4, 4, 5, 7]
}, },
{ barCategoryGap:'0%', yAxis: [
name: 'Steppe', {
type: 'bar', min: 0,
// label: labelOption, max: 80,
emphasis: { splitNumber: 10,
focus: 'series' axisLabel: {
formatter: function (value, index) {
const num = value / 10 + 1
return num === 9 ? '' : num + '级';
}, },
data: [2, 4, 4, 5, 7] textStyle: {
color: '#999999', // 文字颜色
fontSize: 8 // 文字大小
}, },
{ barCategoryGap:'0%',
name: 'Desert',
type: 'bar',
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
data: [2, 4, 4, 5, 7]
}, },
{ barCategoryGap:'0%', type: "value",
name: 'Wetland', splitLine: {
type: 'bar', lineStyle: {
// label: labelOption, color: ["#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#ccc", "#fff"],
// emphasis: { type:'dashed'
// 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', series: [
type: 'bar',
// label: labelOption, {
// emphasis: { barCategoryGap:'0%',
// focus: 'series' data: seriesData,
// }, type: "bar",
data: [2, 4, 4, 5, 7] // 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)], // 红色
}, },
{ barCategoryGap:'0%', {
name: 'demo3', offset: 1,
type: 'bar', color: colors[0], // 黄色
// 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', // const option: EChartOption = {
// label: labelOption,
// emphasis: {
// focus: 'series'
// },
data: [2, 4, 4, 5, 7]
}
]
// grid: { // grid: {
// // 让图表占满容器 // // 让图表占满容器
// top: "28rpx", // top: "28rpx",
@ -287,20 +166,25 @@ function Index() {
// right: "28rpx", // right: "28rpx",
// bottom: "17rpx", // bottom: "17rpx",
// }, // },
// xAxis: { // xAxis: [
// {
// type: 'category', // type: 'category',
// // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // axisTick: { show: false },
// data: ['2012', '2013', '2014', '2015', '2016'],
// axisLine: {
// show: false,
// },
// axisLabel: {
// show: false, // show: false,
// // axisLine: {
// // show: false,
// // },
// }, // },
// }
// ],
// yAxis: { // yAxis: {
// type: "value", // type: "value",
// min: 0, // min: 0,
// max: 50, // max: 8,
// splitNumber: 10, // splitNumber: 8,
// splitLine: { // splitLine: {
// show: false, // show: false,
// // lineStyle: { // // lineStyle: {
@ -319,16 +203,151 @@ function Index() {
// show: false, // show: false,
// }, // },
// }, // },
// series: [ // series: [
// { // { barCategoryGap:'0%',
// 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], // 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', // type: 'bar',
// barWidth:30, //设置柱子的宽度 // // label: labelOption,
// barGap:'100%', // // 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%', // 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,
// // // },
// // },
// // 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]; const level = [8, 7, 6, 5, 4, 3, 2];
let arr =[2,3,4,5,6,7] let arr =[2,3,4,5,6,7]
@ -341,28 +360,9 @@ function Index() {
ref={echartsRef} ref={echartsRef}
// isPage={false} // isPage={false}
// style自定义设置echarts宽高 // style自定义设置echarts宽高
style={{ width: "630rpx", height: "167rpx" }} style={{ width: "630rpx", height: "240rpx" }}
/> />
<View className="box_background">
{level.map((item) => (
<View className="line" key={item}>
<View className="number">{item}</View>
<View className="bottom_line">8</View>
</View>
))}
<View className="line">
<View className="number">1</View>
</View>
{/* <View className="time">时间</View> */}
<View className="Seconds">
{
arr.map(item =>(
<View key={item} className="Seconds_item">{item}</View>
))
}
</View>
</View>
</View> </View>

2
src/pages/face_report_one/face_report_one.less
Unescape Escape View File

@ -77,7 +77,7 @@ page {
} }
.eacharts{ .eacharts{
// background-color: red; // background-color: red;
margin-top: 14px; // margin-top: 14px;
margin-bottom: 45rpx; margin-bottom: 45rpx;
/* margin: 52rpx 0rpx; */ /* margin: 52rpx 0rpx; */
width: 100%; width: 100%;

Write Preview
Loading…
Cancel
Save