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

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

import "../../../assets/style/CommonBigScreenHome.css"

let cli1 = [
    "135,206,250",
    "0,191,255",
    "127,255,170",
    "0,255,127",
    "50,205,50",
    "240,230,140",
    "255,215,0",
    "255,127,80",
    "255,99,71",
    "255,0,0",
], index = 0, index1 = 0;
// 绘制柱状图顶部
registerShape('interval', 'triangle', {
    // 1. 定义关键点
    getPoints(cfg) {
        const x = cfg.x;
        const y = cfg.y;
        const width = cfg.size;
        return [
            { x: x - width / 2, y },
            { x, y: y + width*2 },
            { x: x + width / 2, y },
            { x, y: y - width*2 },
        ];
    },
    // 2. 绘制
    draw(cfg, group) {
        const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
        const more = (points[2].x - points[0].x)/4;
        const polygon = group.addShape('path', {
            attrs: {
                path: [
                    ['M', points[0].x, points[0].y], // 左点
                    ['L', points[1].x, points[0].y+more], // 上点
                    ['L', points[2].x, points[2].y], // 右点
                    ['L', points[3].x, points[0].y-more], // 下点
                ],
                fillOpacity: 0.95,
                fill: `rgb(${cli1[index % cli1.length]})`
            },
        });
        index++
        return polygon;
    },
})
// 绘制柱状图楞线
registerShape('interval', 'edgeLine', {
    // 1. 定义关键点
    getPoints(cfg) {
        const x = cfg.x;
        const y = cfg.y;
        const y0 = cfg.y0;
        const width = cfg.size;
        const p1 = (width / 100).toFixed(4) - 0
        return [
            { x: x - p1, y: y - width / 2 },
            { x: x + p1, y: y - width / 2 },
            { x: x + p1, y: y0 },
            { x: x - p1, y: y0 },
        ];
    },
    // 2. 绘制
    draw(cfg, group) {
        const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
        const polygon = group.addShape('path', {
            attrs: {
                path: [
                    ['M', points[0].x, points[0].y],
                    ['L', points[1].x, points[1].y],
                    ['L', points[2].x, points[2].y],
                    ['L', points[3].x, points[3].y],
                ],
                fillOpacity: 1,
                fill: `l(90) 0:rgba(${cli1[index1 % cli1.length]}, 1) 1:rgba(${cli1[index1 % cli1.length]}, 0.4)`
            },
        });
        index1++
        return polygon;
    },
})

function Column(prop) {
    let $canvas = undefined;
    function TrendChart(width, height, $canvas) {
        const data = prop.list.map(v => {
            return {
                type: v.scheduleName,
                value: v.watchRate
            }
        });

        const chart = new Chart({
            container: $canvas,
            autoFit: true,
            height,
            width,
            padding: [
                20,
                20,
                50,
                20
            ]
        });
        chart.data(data);
        chart.legend(false);
        chart.axis('type', {
            tickLine: {
                alignTick: false,
            },
            label: {
                autoHide: false,
                formatter: n => {
                    const nl = n.split(""), len = nl.length > 6 ? 5 : nl.length, out = [];
                    for (let i = 0; i < len; i++) {
                        if (i % 2 !== 1 || i === len - 1) {
                            out.push(nl[i]);
                            continue
                        }
                        out.push(nl[i] + '\n');
                    }
                    if (nl.length <= 6) return out.join("")
                    else return out.join("") + "..."
                },
                style: {
                    fill: "#fff"
                }
            }
        });
        chart.axis('value', false);

        chart.tooltip(false);

        chart.interval().position('type*value').color('type', cli1.map(v => `l(90) 0:rgba(${v},0.8) 1:rgba(${v},0.2)`));
        index = 0;
        chart.interval().position('type*value').shape('triangle');
        index = 0;
        chart.interval().position('type*value').shape('edgeLine');

        // 添加文本标注
        data.forEach((item) => {
            chart
                .annotation()
                .text({
                    position: [item.type, item.value],
                    content: item.value + '%',
                    style: {
                        textAlign: 'center',
                        fill: "#fff"
                    },
                    offsetY: -10,
                });
        });
        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 Column;