You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
345 lines
10 KiB
TypeScript
345 lines
10 KiB
TypeScript
import Taro from "@tarojs/taro";
|
|
import classnames from "classnames";
|
|
import { Block, View, Image, Text, Input } from "@tarojs/components";
|
|
import { Popup, Progress, Slider } from "@antmjs/vantui";
|
|
import { useRef } from "react";
|
|
import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts";
|
|
// import echarts from "@/utils/echarts.min.js";
|
|
import * as echarts from "echarts";
|
|
|
|
import React, { useState, useEffect,useMemo } from 'react';
|
|
|
|
import "./index.less";
|
|
|
|
interface Props {
|
|
EchartsData:any
|
|
}
|
|
|
|
function Index({
|
|
EchartsData
|
|
}:Props) {
|
|
|
|
|
|
let type =0
|
|
// console.log(EchartsData,'EchartsDataEchartsData');
|
|
|
|
switch(EchartsData.modeName) {
|
|
case '基础班脸部':
|
|
type=37
|
|
break;
|
|
case '基础版眼部':
|
|
type=25
|
|
break;
|
|
case '法令纹Pro':
|
|
type=25
|
|
break;
|
|
case '下颌线Pro':
|
|
type=19
|
|
break;
|
|
case '抬头纹Pro':
|
|
type=13
|
|
break;
|
|
default:
|
|
|
|
}
|
|
// const chartRef = useRef(null);
|
|
// console.log(chartRef,'chartRefchartRef');
|
|
|
|
// let chartInstance = echarts.init(chartRef.current);
|
|
const echartsRef = useRef<EchartsHandle>(null);
|
|
// const echartsRef = useRef< null>(null);
|
|
// let echartsRef:any = React.createRef();;
|
|
// console.log(chartRef,'echartsRefechartsRef',chartInstance);
|
|
|
|
function generateColorArray(startColor, endColor, steps) {
|
|
var startRGB = hexToRgb(startColor);
|
|
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));
|
|
}
|
|
return colors;
|
|
}
|
|
|
|
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) {
|
|
return start + ((end - start) / steps) * count;
|
|
}
|
|
|
|
const startColor = "#FFFF00"; // 黄色
|
|
const endColor = "#FF0000"; // 红色
|
|
const steps = 81; // 80个颜色
|
|
|
|
|
|
const colors = generateColorArray(startColor, endColor, steps);
|
|
// const xList = [...new Array(type).fill(0).map((item, key) => key)];
|
|
let seriesData:any =[]
|
|
seriesData = EchartsData?.data?.groupedAa
|
|
const xList = [...new Array(37).fill(0).map((item, key) => key)];
|
|
// const seriesData = [
|
|
// ...xList.map((item) => {
|
|
// return Math.random() * 80;
|
|
// }),
|
|
// ];
|
|
let [option, setOption] = useState<EChartOption>({
|
|
grid: {
|
|
// 让图表占满容器
|
|
top: "10rpx",
|
|
left: "45rpx",
|
|
right: "28rpx",
|
|
bottom: "17rpx",
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: [...xList],
|
|
axisLabel: {
|
|
interval: 5,
|
|
formatter: function (value, index) {
|
|
return value * 10 + '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], // 黄色
|
|
},
|
|
]);;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
})
|
|
useEffect(() =>{
|
|
setOption({...option,
|
|
|
|
series:[
|
|
|
|
{
|
|
barCategoryGap: '0%',
|
|
data: [11,22,33,44,55,55],
|
|
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], // 黄色
|
|
},
|
|
]);;
|
|
},
|
|
},
|
|
},
|
|
},
|
|
]})
|
|
console.log(option,'optionoption',xList);
|
|
|
|
},[EchartsData])
|
|
// 基于 EchartsData 生成 ECharts 配置
|
|
// const option: EChartOption ={
|
|
// grid: {
|
|
// // 让图表占满容器
|
|
// top: "10rpx",
|
|
// left: "45rpx",
|
|
// right: "28rpx",
|
|
// bottom: "17rpx",
|
|
// },
|
|
// xAxis: {
|
|
// type: "category",
|
|
// data: [...xList],
|
|
// axisLabel: {
|
|
// interval: 5,
|
|
// formatter: function (value, index) {
|
|
// return value * 10 + '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 chartOptions = useMemo(() => {
|
|
|
|
// console.log(option,'optionoptionoption');
|
|
|
|
// return option;
|
|
// }, [EchartsData]);
|
|
|
|
|
|
|
|
// // 使用 useMemo 来记住创建的 ECharts 实例
|
|
// const chartRef = useMemo(() => {
|
|
|
|
|
|
// return option;
|
|
// }, []); // 空数组意味着 chartRef 仅在组件挂载时创建一次
|
|
|
|
|
|
return (
|
|
<Block>
|
|
<Echarts
|
|
echarts={echarts}
|
|
option={option}
|
|
ref={echartsRef}
|
|
// isPage={false}
|
|
// style自定义设置echarts宽高
|
|
// style={{ width: "100%", height: "100%" }}
|
|
style={{ width: "670rpx", height: "260rpx" }}
|
|
/>
|
|
|
|
{/* <View className="box">
|
|
<Echarts
|
|
echarts={echarts}
|
|
option={option}
|
|
ref={echartsRef}
|
|
// isPage={false}
|
|
// style自定义设置echarts宽高
|
|
style={{ width: "630rpx", height: "240rpx" }}
|
|
/>
|
|
|
|
</View> */}
|
|
|
|
|
|
</Block>
|
|
);
|
|
}
|
|
|
|
export default Index;
|