grace-charts v0.4.6

grace-charts

优雅的图表库，使用 Apache ECharts 5，仅支持 Vue 3

使用

使用 npm 安装 grace-charts

npm i grace-charts echarts -S

注册组件

import { createApp } from 'vue';
import graceCharts from 'grace-charts';

const app = createApp(..options);
app.use(graceCharts);

使用组件

<template>
	<grace-line :loading="loading" :dataset="dataset"></grace-line>
</template>

<script>
import { ref } from "vue";

export default {
  name: "App",
  setup() {
    const dataset = ref({
      dimensions: [],
      source: [],
    });
    const loading = ref(true);
    setTimeout(() => {
      dataset.value = {
        dimensions: ["时间", "数量"],
        source: [
          { 时间: "2020-01", 数量: 100 },
          { 时间: "2020-02", 数量: 110 },
          { 时间: "2020-03", 数量: 120 },
          { 时间: "2020-04", 数量: 130 },
          { 时间: "2020-05", 数量: 140 },
        ],
      };
      loading.value = false;
    }, 2000);
    return {
      dataset,
      loading,
    };
  },
};
</script>

开发

环境

建议开发者统一使用 vs code 进行开发，并建议安装插件：ESLint、Prettier ESLint、Prettier - Code formatter

为避免产生奇怪的问题，建议开发者使用同样的 node 版本和 npm 版本

node版本：16.13.1
npm版本：8.1.2

克隆仓库

git clone git@gitlab.gz.cvte.cn:maxhub/autotest/tmh/grace-charts.git

安装依赖

npm install

运行单元测试，单元测试编写方法请参见：https://next.vue-test-utils.vuejs.org/

npm run test

代码格式检查

npm run lint

调试组件

cd examples
npm install
npm run serve

查看 API 文档

npm run doc

成功后，浏览器打开 http://localhost:3000，即可查看， 进入 docs 目录下修改对于.md 可修改文档

发布

可以通过 jenkins 自动打包并发布至 npm：

jenkins 项目地址：http://mhci.gz.cvte.cn/job/DSS/job/autotest/job/project/job/TestManageHub/job/grace-chart-publish/

在发布之前需要修改 package.json 中的版本号

可以在这里查看发布后的 npm 包：https://www.npmjs.com/package/grace-charts

未来功能

以下功能将在未来的版本发布，敬请期待：

• 主题配置
• 多语言配置
• 默认图表样式优化
• 使用文档与示例完善