@devops-web/cs-chart NPM

cs-chart VUE组件

更新流程

切换源到npm官方源https://registry.npmjs.org/
npm login
npm run lib
修改package.json中的版本号
npm publish --access public

组件开发流程

将已经开发完成的组件放入全局组件工程src\package内
将组件注册到src\package\index.js文件中

本地开发联调(支持热更新)

全局安装 npm i yalc -g
进入cs-chart项目,npm run watch
进入需要调试的项目例如:csp, yalc add @devops-web/cs-chart，产生的yalc.lock,.yalc文件不需要的话记得添加到忽略文件,不要提交到远程
修改cs-chart项目的代码，csp项目会热更新。
当不需要联调的时候，进入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