cs-chart VUE组件

更新流程

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()
    }
  }
}

ChartDefine

• name: String, 中文句名称
• type: String, 图表类型，用于在添加cs-chart组件时设置type属性
• option: Function (data) => EchartOption, 返回echart的option对象，需要根据data设置相关的参数

CsChart Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------- | ------------------------------------------------------------ | --------------- | ----------- | -------- | | 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的事件{ eventName: string, query: string,Object, handler: Function, context?: Object } | Object, Array | | |

MyChart Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------- | ------------------------------------------------------------ | --------------- | ----------- | -------- | | 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的事件{ eventName: string, query: string,Object, handler: Function, context?: Object } | Object, Array | | |

Methods

| 事件名 | 说明 | 参数 | | ----------- | -------------- | ---- | | getInstance | 获取echart实例 | 无 |

说明

Dependence

依赖echart 5.3+

exports

共导出两个组件CsChart、MyChart和一个方法getChartList

• CsChart, 简化版的组件，只需要指定一个type和数据即可
• MyChart，对原始echart的封装，接收echart的option，可以支持灵活的定制
• getChartList，获取在CsChart中支持的图表列表。系统可以在启动时注册自己的图表类型，以方便页面使用

---本组件需要依赖echarts5.3，注意低版本有部分类型不支持---

Changelog

• 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