Contour

等高线图组件，支持等高线图 area 和 line 模式

Feature

• [x] 图表等高线图和区域图
• [x] 图表宽高自适应
• [x] 图形颜色范围 colors 支持传入
• [x] 图表导出图片
• [x] 图表导出数据
• [x] 点击交互事件
• [ ] 图形 label 标注

TODO

• [ ] 交互事件 toolips
• [ ] 等高线图形 label 值标注

API

Contour(
    opts: Options,
    data: ChartData,
    container: HTMLElement = document.body,
)

Data

type Data = <{x:number;y:number;value:number}>[]

Option

| 属性 | 描述 | 默认值 | | ----------------- | ------------------ | --------------------------------------------------- | | type | 图表类型 | area | | width | 图表宽度 | 640 | | height | 图表高度 | 600 | | xCoord | x 轴坐标 key | 'x' | | yCoord | y 轴坐标 key | 'y' | | zCoord | value 坐标 key | 'value' | | blur | 平滑像素半径 | 4 | | xAxesLabel | x 轴坐标标签 | xCoord | | yAxesLabel | y 轴坐标标签 | yCoord | | zAxesLabel | z 轴坐标标签 | zCoord | | fontSize | 字体大小 | 12 | | axesLabelFontSize | 坐标标签字体大小 | 14 | | ticks | 图例刻度数 | 4 | | stroke | 线条颜色 | '#ffffff00' | | colors | 图例、等高图表颜色 | ['#cdb4db','#ffc8dd','#ffafcc','#bde0fe','#a2d2ff'] |

Data

type Data = <{x:number;y:number;value:number}>[]

Usage

Installation

pnpm add @xchart/contour
# or
yarn add @xchart/contour

import Contour from '@xcahrt/contour';

const data = [
    { x: 0, y: 0, removal: 20 },
    { x: 1, y: 0, removal: 25 },
];

const contour = new Contour(
    {
        zCoord: 'removal',
        colors: ['#ccd5ae', '#e9edc9', '#fefae0', '#faedcd', '#d4a373'],
        width: 500,
        height: 400,
    },
    data,
    document.querySelector('#container'),
);

Action

// 图表导出图片
contour.exportChart();

// 图表导出数据
contour.exportData();