awesome-axis-chart

This project was echarts antd echarts-for-react component plugin perfect

Source

npm

Version: 0.1.3

Version published: 5 years ago

Weekly downloads: 17

Maintainers: 1

Weekly downloads

Created: 5 years ago

Source

🪢 AxisChart

Axischart component is the secondary encapsulation of the components of echarts and echarts-for-react.

Its original intention is to be "flexible" in the chart display of the echarts chart library

The border overflow display problem caused by charts displaying data in different scenes,

and the solution of some rare bugs in echarts itself

The most important thing of axischart is not its configuration parameter regulation,

but its internal automatic size processing is enough to deal with the display of a large number of various data levels,

so that the display of charts does not exceed the boundary

The various parametric configurations attached to it are not the original intention of the component creation,

but the abnormal configuration to meet the wonderful needs of various project managers

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

AxisChart组件是对于echarts、echarts-for-react组件的二次封装，它的初衷是出于对于echarts图表库的图表展示的"灵活"

导致对于不同场景的数据显示的图表产生的边框溢出显示问题，以及echarts本身的一些罕见少有的bug的解决

AxisChart最重要的不是它的配置参数调控，而是它内部的自动化尺寸处理足以应对大量各种数据层次的显示而使得图表的显示没有越出边界超出显示

它附带的各种参数化配置不是组件创始的本意，只是应对各种项目经理的奇葩需求应运而生的畸形配置

Install

npm i awesome-axis-chart

npm start

Runs the app in the development mode.

Demo

Start this project and then run the app in the development mode. Then open http://localhost:3000 to view it in the browser.

Usage

import AxisChart, { chartData } from "awesome-axis-chart"

function App() {
    const chartDataTemp = cloneDeep(chartData)
    /** 测试数据 */
    const monthAverageRainfallList: {
        /** 月份 */
            month: string | number;
        /** 18年月平均降雨量 */
            eighteenRainfall: number;
        /** 19年月平均降雨量 */
            nineteenRainfall: number;
        /** 历史月平均降雨量 */
            historyRainfall: number;
        /** 未来月平均降雨量 */
            futureRainfall: number;
        /** 测试月平均降雨量 */
            testRainfall: number;
    }[] = [
        {
            month: 1,
            // eighteenRainfall: 9996,
            eighteenRainfall: 7586,
            nineteenRainfall: 2348,
            historyRainfall: 5437,
            futureRainfall: 4346,
            testRainfall: 8234,
        },
        {
            month: 2,
            eighteenRainfall: 8765,
            nineteenRainfall: 7343,
            historyRainfall: 5235,
            futureRainfall: 3612,
            testRainfall: 7895,
        },
        {
            month: 3,
            eighteenRainfall: 7654,
            nineteenRainfall: 4372,
            historyRainfall: 3893,
            futureRainfall: 1784,
            testRainfall: 9035,
        },
        {
            month: 4,
            eighteenRainfall: 6543,
            nineteenRainfall: 4726,
            historyRainfall: 3727,
            futureRainfall: 6538,
            testRainfall: 6239,
        },
        {
            month: 5,
            eighteenRainfall: 5432,
            nineteenRainfall: 6632,
            historyRainfall: 2891,
            futureRainfall: 5233,
            testRainfall: 8454,
        },
        {
            month: 6,
            eighteenRainfall: 5348,
            nineteenRainfall: 8925,
            historyRainfall: 8476,
            futureRainfall: 3437,
            testRainfall: 7648,
        },
        {
            month: 7,
            eighteenRainfall: 2348,
            nineteenRainfall: 7925,
            historyRainfall: 8976,
            futureRainfall: 2417,
            testRainfall: 6448,
            // nineteenRainfall: null as any,
            // historyRainfall: null as any,
            // futureRainfall: null as any,
            // testRainfall: null as any,
        },
    ];
  
    Object.assign(chartDataTemp, {
  	  data: monthAverageRainfallList.reduce((preItem, item, index) => {
        // 注意：后续组件内会使用getNumbersByStrings方法进行数据提取，但是它必须要求数组第一个元素是字符串
        // 且getRangeByIndex方法提取类目数据时也需要是字符串，所以数组第三个元素必须是字符串
        // index索引5，6为添加的辅助数据（tooltip显示用，不参与图表渲染）
        const itemData: [string, string, string, number, number, number][] = [
          [`${index}`, "2018月累计降水量", `${item.month}月降水量`, item.eighteenRainfall],
          [`${index + 1}`, "2019月累计降水量", `${item.month}月降水量`, item.nineteenRainfall],
          [`${index + 2}`, "历史月累计降水量", `${item.month}月降水量`, item.historyRainfall],
          [`${index + 3}`, "未来月累计降水量", `${item.month}月降水量`, item.futureRainfall],
          [`${index + 4}`, "测试月累计降水量", `${item.month}月降水量`, item.testRainfall],
        ]
        return [...preItem, ...itemData]
      }, ([] as [string, string, string, number, number, number][])),
    })
    // 最简单的使用
    return (
      <AxisChart
        // 默认垂直暗黑系风格
        theme="verticalDark"
        chartData={chartDataTemp}
        // 关于配置由于太多了这里不展示，具体可参考代码内部test文件架下的demo或者组件内部文档注释
        // basicConfigOption={{ ??? }}
        subColor={[
          "#ff7043", "#ffb300", "#1de9b6", "#00d4ec",
          "#ed3e61", "#bccd07", "#04ce1c", '#058ff8',
        ]}
      />
    );
}

Learn More

Start this project and then run the app in the development mode, Then open http://localhost:3000 to view it in the browser. View the project demo test page's source code, There are many demo examples of function introduction and code