@yester/echarts-option

echarts的样例模板和配置相关的React组件:

• echarts样例模板列表--'EchartsOpt'
• echarts配置修改编辑器-- 'EchartsOptEditor'

组件参数

EchartsOpt

type OptItem = {
  key: string;
  label: string;
  items: {
      key: string;
      title: string;
      desc: string;
      lang: string[];
      thumb: string;
  }[];
}

type OptProps = {
  groupedList?: OptItem[]
  onSelected?: (selectedKey: string, it: ICardItem) => void
}

EchartsOptEditor

export type OptEditorResult = {
  optStrValue: string
  dataStr: string
  thumbSrc: string
  theme: string
  dataFunc: any 
  dataFuncEnabled?: boolean
}
export type BtnProps = boolean | {
    show: boolean
    text?: string
}

export type OptEditorProps = {
  /**
   * echart库的地址,
   * 默认为cdn地址
   */
  echartUrl?: string

  /**
   * 图表内容
   */
  content: string

  mode?: 'view'|'edit'

  /**
   * 主题
   */
  theme?: string
  /**
   * 数据列表
   */
  dataSource?: any[]
  /**
   * option的模板
   */
  optTpl?: string
  /**
   * 数据处理函数
   */
  dataFunc?: any  

  /**
   * 是否启用数据处理函数
   */
  dataFuncEnabled?: boolean

  /**
   * 保存按钮回调
   * 
   * @param rs 
   * @returns 
   */
  onFinished?: (rs: OptEditorResult, contentString: string) => void
  /** 
   * 保存修改按钮
   */ 
  saveBtn?: BtnProps 
  /**
   * 表格数据工具
   *  */ 
  excelBtn?: BtnProps 
  /**
   * 从联调环境接口获取数据
   *  */ 
  swaggerBtn?: BtnProps 
  /**
   * 配置手册
   *  */ 
  helpBtn?: BtnProps
  /**
   * 下载图片按钮
   */
  downloadBtn?: BtnProps
  /**
   * 值有变动时候的回调
   * 
   * @param rs 
   * @returns 
   */
  onChange?: (rs: OptEditorResult, contentStr: string) => void

}

开发相关命令

npm i或者yarn install

npm start或者yarn start

npm run build 或者yarn build