|
|
|
@ -42,15 +42,9 @@ function Index({
|
|
|
|
default:
|
|
|
|
default:
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// const chartRef = useRef(null);
|
|
|
|
|
|
|
|
// console.log(chartRef,'chartRefchartRef');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// let chartInstance = echarts.init(chartRef.current);
|
|
|
|
|
|
|
|
const echartsRef = useRef<EchartsHandle>(null);
|
|
|
|
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) {
|
|
|
|
function generateColorArray(startColor, endColor, steps) {
|
|
|
|
var startRGB = hexToRgb(startColor);
|
|
|
|
var startRGB = hexToRgb(startColor);
|
|
|
|
var endRGB = hexToRgb(endColor);
|
|
|
|
var endRGB = hexToRgb(endColor);
|
|
|
|
@ -91,13 +85,13 @@ 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 =[]
|
|
|
|
let seriesData:any =[]
|
|
|
|
seriesData = EchartsData?.data?.groupedAa
|
|
|
|
seriesData = EchartsData?.data?.groupedAa
|
|
|
|
const xList = [...new Array(37).fill(0).map((item, key) => key)];
|
|
|
|
const xList = [...new Array(type).fill(0).map((item, key) => key)];
|
|
|
|
// const seriesData = [
|
|
|
|
// const seriesData = [
|
|
|
|
// ...xList.map((item) => {
|
|
|
|
// ...xList.map((item) => {
|
|
|
|
// return Math.random() * 80;
|
|
|
|
// return Math.random() * 80;
|
|
|
|
// }),
|
|
|
|
// }),
|
|
|
|
// ];
|
|
|
|
// ];
|
|
|
|
let [option, setOption] = useState<EChartOption>({
|
|
|
|
const option: EChartOption = {
|
|
|
|
grid: {
|
|
|
|
grid: {
|
|
|
|
// 让图表占满容器
|
|
|
|
// 让图表占满容器
|
|
|
|
top: "10rpx",
|
|
|
|
top: "10rpx",
|
|
|
|
@ -178,40 +172,8 @@ let [option, setOption] = useState<EChartOption>({
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
],
|
|
|
|
})
|
|
|
|
}
|
|
|
|
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 配置
|
|
|
|
// 基于 EchartsData 生成 ECharts 配置
|
|
|
|
// const option: EChartOption ={
|
|
|
|
// const option: EChartOption ={
|
|
|
|
// grid: {
|
|
|
|
// grid: {
|
|
|
|
@ -295,22 +257,7 @@ let [option, setOption] = useState<EChartOption>({
|
|
|
|
// },
|
|
|
|
// },
|
|
|
|
// ],
|
|
|
|
// ],
|
|
|
|
// };
|
|
|
|
// };
|
|
|
|
// const chartOptions = useMemo(() => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// console.log(option,'optionoptionoption');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// return option;
|
|
|
|
|
|
|
|
// }, [EchartsData]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// // 使用 useMemo 来记住创建的 ECharts 实例
|
|
|
|
|
|
|
|
// const chartRef = useMemo(() => {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// return option;
|
|
|
|
|
|
|
|
// }, []); // 空数组意味着 chartRef 仅在组件挂载时创建一次
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Block>
|
|
|
|
<Block>
|
|
|
|
|