|
|
|
|
@ -4,7 +4,10 @@ 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 echarts from "@/utils/echarts.min.js";
|
|
|
|
|
import * as echarts from "echarts";
|
|
|
|
|
|
|
|
|
|
import React, { useState, useEffect,useMemo } from 'react';
|
|
|
|
|
|
|
|
|
|
import "./index.less";
|
|
|
|
|
|
|
|
|
|
@ -15,7 +18,11 @@ interface Props {
|
|
|
|
|
function Index({
|
|
|
|
|
EchartsData
|
|
|
|
|
}:Props) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let type =0
|
|
|
|
|
// console.log(EchartsData,'EchartsDataEchartsData');
|
|
|
|
|
|
|
|
|
|
switch(EchartsData.modeName) {
|
|
|
|
|
case '基础班脸部':
|
|
|
|
|
type=37
|
|
|
|
|
@ -35,7 +42,15 @@ function Index({
|
|
|
|
|
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);
|
|
|
|
|
@ -73,18 +88,16 @@ function Index({
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const colors = generateColorArray(startColor, endColor, steps);
|
|
|
|
|
const xList = [...new Array(type).fill(0).map((item, key) => key)];
|
|
|
|
|
// 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 xList = [...new Array(37).fill(0).map((item, key) => key)];
|
|
|
|
|
// const seriesData = [
|
|
|
|
|
// ...xList.map((item) => {
|
|
|
|
|
// return Math.random() * 80;
|
|
|
|
|
// }),
|
|
|
|
|
// ];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const option: EChartOption ={
|
|
|
|
|
let [option, setOption] = useState<EChartOption>({
|
|
|
|
|
grid: {
|
|
|
|
|
// 让图表占满容器
|
|
|
|
|
top: "10rpx",
|
|
|
|
|
@ -165,8 +178,140 @@ seriesData = EchartsData?.data?.groupedAa
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
};
|
|
|
|
|
let arr = [2, 3, 4, 5, 6, 7]
|
|
|
|
|
})
|
|
|
|
|
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
|
|
|
|
|
|