my-chart-demo

tips: 个人兴趣做的插件，当前是非常基础的，仅仅个人测试demo。勿喷~

1. 安装

yarn add my-chart-demo // npm install my-chart-demo --save

2. 字段

• 颜色主题类型

  enum EThemeType {
    walden = 0,
    vintage = 5,
    westeros = 10,
    shine = 15,
    macarons = 20,
  }

• 图表类型枚举

  enum EChartType {
    MSLine = 0,  // 折线
    MSBar = 5,   // 柱状
  }

• 图表数据类型枚举

  enum EChartDataType {
    static = 0,  // 静态
    dynamic = 5,  // 动态
  }

• IChartData接口

    // 数据项id
    id: string;
   // 数据项名
    name: string;
    // 数据
    value: string;

| 字段名 | 字段类型 | 默认值 | 备注 | | :--------------: | :-----------------: | :---------------: | :----------------------: | | id | string | Guid.EMPTY | 表id | | name | string | | 图表名 | | themeType | EThemeType | EThemeType.walden | 颜色主题类型 | | chartType | EChartType | EChartType.MSLine | 图表类型 | | dataType | EChartDataType | | 数据类型，分为静态和动态 | | categoryData | string | | 类目轴数据 | | chartsData | Array<IChartData> | | 数据项数据 |

3. 传递参数

| 字段名 | 字段类型 | 备注 | | :--------------: | :--------------------------: | :--------------------: | | width | number\| string\|undefined | 图表的宽度 | | height | number\|string\|undefined | 图表的高度 | | charts | IChart | 图表的数据 | | idName | string | 图表的类名 | | devicePixelRatio | number\|undefined | 设备像素比 | | renderer | string\|undefined | 渲染方式 canvas| svg |

4. 例子

• 1. main文件引入

     import MSChart from "my-chart-demo";
     Vue.use(MSChart);

• 2. 测试组件 测试数据在项目中

     

生成图表：