bigScreen/src/pages/CommonBigScreen/components/NewMediaTrend.jsx

import { onMount } from "solid-js";
import { Chart } from '@antv/g2';
// import DataSet from '@antv/data-set';

import "../../../assets/style/CommonBigScreenHome.css"
import utils from "../../../utils/index"

function DataFormmat(timeString) {
    if (!timeString || typeof timeString !== 'string') return "";
    const y = timeString[0] + timeString[1] + timeString[2] + timeString[3];
    const m = timeString[4] + timeString[5];
    const d = timeString[6] + timeString[7];
    return [y, m, d].join("-");
}

function Usertrend(prop) {
    let $canvas = undefined;
    function getlist() {
        const setli = [];
        for (let i = 0; i < (prop.list || []).length; i++) {
            const item = (prop.list || [])[i];
            (item.data || []).map(v => {
                setli.push({
                    Data: DataFormmat(v.dt),
                    value: v.readCount,
                    type: item.name
                })
            })
        }
        return setli
    }
    function TrendChart(width, height, $canvas) {
        const data = getlist(), li = {};
        const chart = new Chart({
            container: $canvas,
            autoFit: true,
            height,
            width,
            padding: [
                30,
                40,
                30,
                70,
            ]
        });
        chart.data(data);
        chart.legend({
            position: "top",
            marker: {
                symbol: "hyphen"
            },
            itemName: {
                style: {
                    fill: "#ffffff",
                }
            }
        });
        chart.scale('Data', {
            range: [0, 1],
            tickCount: 10,
            type: 'timeCat'
        });
        chart.axis('Data', {
            label: {
                style: {
                    fill: "#fff"
                },
            },
            grid: null
        });
        chart.tooltip(false);
        chart.axis("value", {
            label: {
                formatter: n => {
                    return utils.formatNumber(n, 2);
                },
                style: {
                    fill: "#fff"
                },
            },
            position: "left",
            grid: null
        });

        chart.line().shape('smooth').color('type', [
            '#4fdfff',
            '#8b78fa',
            '#78d56c',
            '#ffcf48',
            '#00b2da',
        ]).position('Data*value');
        chart.area().shape('smooth').color('type', [
            'l(90) 0:#4fdfff 1:rgba(0,0,0,0)',
            'l(90) 0:#8b78fa 1:rgba(0,0,0,0)',
            'l(90) 0:#78d56c 1:rgba(0,0,0,0)',
            'l(90) 0:#ffcf48 1:rgba(0,0,0,0)',
            'l(90) 0:#00b2da 1:rgba(0,0,0,0)',
        ]).position('Data*value');
        chart.scale(li);
        chart.render();
    }
    onMount(() => {
        TrendChart(prop.width, prop.height, $canvas)
    })
    return (
        <div class="livRang" style={{
            width: `${prop.width}px`
        }}>
            <div class="head">{prop.title}</div>
            <div ref={$canvas}></div>
        </div>
    );
}

export default Usertrend;