@devops-web/cs-chart
Version:
## 更新流程 1. 切换源到npm官方源https://registry.npmjs.org/ 2. npm login 3. npm run lib 4. 修改package.json中的版本号 5. npm publish --access public
124 lines (109 loc) • 5.46 kB
Markdown
1. 切换源到npm官方源https://registry.npmjs.org/
2. npm login
3. npm run lib
4. 修改package.json中的版本号
5. npm publish --access public
1. 将已经开发完成的组件放入全局组件工程`src\package`内
2. 将组件注册到`src\package\index.js`文件中
1. 全局安装 `npm i yalc -g`
2. 进入`cs-chart`项目,`npm run watch`
3. 进入需要调试的项目例如:`csp`, `yalc add @devops-web/cs-chart`，产生的yalc.lock,.yalc文件不需要的话记得添加到忽略文件,不要提交到远程
4. 修改`cs-chart`项目的代码，`csp`项目会热更新。
5. 当不需要联调的时候，进入csp项目内`yalc remove --all`,确认是否移除完成`yalc installations show`
```
npm i @devops-web/cs-chart
```
全局引入
```
import Vue from "vue";
import CsChart from "@devops-web/cs-chart";
Vue.use(CsChart, {colors: ColorString[], charts: ChartDefine[]});
```
页面使用
```
使用数据对象：<cs-chart type="line" :dataset="chartData">
使用函数返回Promise：<cs-chart type="bar" :dataset="getChartData">
function getChartData() {
return Promise.resolve({
x: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
y: [ // y中有多个时某些图表会有多个指标，如折线图柱状图等
{ name: 'xx', data: [3,4,5,6,4,3,2] },
{ name: 'yy', data: [2,2,2,2,2,3,3] },
],
})
}
export default {
data() {
return {
chartData: null
}
},
created() {
getChartData().then(data => {
this.chartData = data
})
},
methods: {
getChartData() {
return getChartData()
}
}
}
```
- name: String, 中文句名称
- type: String, 图表类型，用于在添加cs-chart组件时设置type属性
- option: Function (data) => EchartOption, 返回echart的option对象，需要根据data设置相关的参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------- | ------------------------------------------------------------ | --------------- | ----------- | -------- |
| dataset | 必传，{x(Array), y(echart series数组)} | Function, Object | null,object | undefind |
| option | 必传，echart的option，可以单独使用，也可以和dataset配合使用。 | Object,Function | | |
| loading | 非必传 | Boolean | true/false | false |
| width | 非必传 | String,Number | | 100% |
| height | 非必传 | String,Number | | 100% |
| on | 非必传,echart的事件<br />{<br/> eventName: string,<br/> query: string,Object,<br/> handler: Function,<br/> context?: Object <br/>} | Object, Array | | |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------- | ------------------------------------------------------------ | --------------- | ----------- | -------- |
| dataset | 非必传，需要和option配套使用，参考文档https://echarts.apache.org/handbook/zh/concepts/dataset | Object, Array | null,object | undefind |
| option | 必传，echart的option，可以单独使用，也可以和dataset配合使用。 | Object,Function | | |
| loading | 非必传 | Boolean | true/false | false |
| width | 非必传 | String,Number | | 100% |
| height | 非必传 | String,Number | | 100% |
| on | 非必传,echart的事件<br />{<br/> eventName: string,<br/> query: string,Object,<br/> handler: Function,<br/> context?: Object <br/>} | Object, Array | | |
| 事件名 | 说明 | 参数 |
| ----------- | -------------- | ---- |
| getInstance | 获取echart实例 | 无 |
依赖echart 5.3+
共导出两个组件CsChart、MyChart和一个方法getChartList
- CsChart, 简化版的组件，只需要指定一个type和数据即可
- MyChart，对原始echart的封装，接收echart的option，可以支持灵活的定制
- getChartList，获取在CsChart中支持的图表列表。系统可以在启动时注册自己的图表类型，以方便页面使用
---本组件需要依赖echarts5.3，注意低版本有部分类型不支持---
- v0.1.3 2022/05/24
- fix: dataset从非空值设置为空值时不刷新的问题
- v0.1.2 2022/04/22
- fix: my-chart不渲染问题修复
- v0.1.1 2022/04/20
- dataset支持函数类型，函数返回值为Promise
- 条形图和横向柱状图支持多个柱子
- v0.1.0 2022/04/14
- 取消getData函数，替换为dataset属性，以方便页面中主动更新
- v0.0.5 2022/04/11
- 增加props可以覆盖option属性
- 取消饼图的圆角
- v0.0.3 2022/03/30
- 增加环形图， type="pie"
- 增加进度环， type="progress"，需要echart5.3+版本
- v0.0.1 2022/03/30 Project init