[email protected]

简单折线图。

示例

基础用法

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @ths-base/chart-line-simple
yarn add @ths-base/chart-line-simple

使用

import TChartLineSimple from '@ths-base/chart-line-simple';
import '@ths-base/chart-line-simple/lib/index.css';
createApp(App).use(TChartLineSimple);

CDN

由于公司暂时没有提供可以使用的 CDN 地址，所以目前可以在制品库中找到对应资源，下载安装包，使用 umd 包，在页面上引入 js 和 css 文件即可开始使用。 制品库地址：http://192.168.0.112:8081/#browse/browse:npm-vue-components

<!-- 引入vue框架 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="lib/index.css">
<!-- 引入组件库 -->
<script src="lib/index.js"></script>

使用

Vue.createApp().use(TChartLineSimple);

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | | ---------------- | ------------ | ------- | ------------- | ------ | ------ | | c-style | 自定义样式 | object | -- | -- | | | options | 配置选项-参考echarts官网 | object | -- | -- | | | data | 自定义样式 | array { name: string; value: number[]; dataAlias: string } | -- | -- | |

c-style 的属性

| 参数 | 允许接收的状态 | 说明 | | ------------------------- | -------------------- | -------------- | | wrapper | default | 容器 |

data 单项属性

| 参数 | 类型 | 说明 | | ------------------------- | -------------------- | -------------- | | name | string | 对每一条数据的描述---图例 | | value | any[] | 接口请求回来的列表数据 组件内会根据别名和数据处理为数值的数组 | | dataAlias | string | 列表数据中取值的别名 |

事件

| 事件名称 | 说明 | 回调参数 | | ----------- | ------------ | -------- | | com-click | 点击图表点位事件 | 参考echarts文档 | | legend-select | 点击图例事件 | 参考echarts文档 |

其他属性及用法

Echarts的options属性配置

作者：张金秀