森图表开发笔记

day0312

1.个人图片及官方图片使用

render(h, data, opts) { 
    return(
      <div class="wrapper" style={{ background:`url(${this.img.Ifd36e9c5d4a240d5bb48cd4aa141ce4f}) no-repeat`}}></div>
    )
  }

this.img.xxxxxxxx

2.引入JS脚本和字体以及内置工具库使用：

代码：

render(h, data, opts) {
    return (
      <div
        style={{
          fontSize: "40px",
          fontFamily: "'PangMenZhengDao-3"
        }}
      >世界太平 
      { titleCase ("world peace")}</div>
    )
  }

效果

3.森图表有两种表类型：（dom节点是一套操作html和xml的标准API（应用程序编程接口）。）

统计图：专门用来开发Echart图表的类型，不能操作dom节点

新系统：可以开发各种类型的图表，可以操作dom节点

------------6看完--------------

day0313                    

import PangMenZhengDaoBiaoTiTi from 'fonts/PangMenZhengDaoBiaoTiTi.ttf&&PangMenZhengDao-3'//font-family: 'PangMenZhengDao-3'

return class item extends Base {
  constructor(dom, config) {
    super(dom, config);

    //森图表内置的变量

    //来设置四周的边距
    this.padding = [0, 0, 0, 0]

    //规定用来存放配置信息
    this.opts = {
      fintSize: "40px",
      fontFamily: 'PangMenZhengDao-3',
      color: "blue"
    }

    //规定存放数据源
    this.data = "我是this.data"

    //自定义的变量
    this.text = "自定义变量"

  }

  render(h, data, opts) {
    return (
      <div
        ref="demo"
        style={{
          fontSize: opts.fintSize,
          fontFamily: opts.fontFamily,
          color: opts.color,
        }}>
        {data}
      </div>
    )
  }

  setData(d){
    //自定义逻辑
    this.data = d + "*****"
    this.render()
  }
  mounted(){
    //alert(1111)
    this.instance.$refs.demo.style.color="green"
  }
}

结果                

信息图代码结构（常用方法）：

                  this.opts = {}                                   用来存储表中的配置信息      

                  this.data = {}                                   用来存储图表数据

                  this                                                 是森图表内置的

                  rejder（h,data,opys）{}                 用来渲染DOM节点

                  mounted(){}                                    DOM节点挂载到页面后调用，可省略

                  setData（）{}                                 更新图表数据，可省略

echarts官网：Examples - Apache ECharts

统计图代码结构（常用方法）：

1.        this.config = {}                                        用来存储图表中的配置信息

2.        this.data = {}                                           用来存储图表数据

3.        this.type = "echarts"                               图表类型

4.        transformOptions(){}                               组装Echart的Options

JSX语法详解：

1.遇到小括号（）的时候内容会按照XML解析，遇到花括号{}的时候内容会按照JS脚本来解析（花括号里只能添加表达式，不能写语句）。

2.JSX表达式的最外层只能是一对标签

3.添加注释 用花括号包裹，里面用JS的注释即可    

                {

                        //我是注释

                }

4. 三目运算符、与&&、或|| 、复杂条件时可以使用函数

5.JSx中不能使用循环语句 ， 如 for、while等 

  JSX使用数组实现列表循环    

--------------------------------12看完    

快捷开发Echarts (无交互功能)

import echartsjs from 'lib/echarts'
/**
 * 森图表初始化代码
 * 1.初始化代码中包含了信息图（dom开发的图表）和统计图（echarts开发的图表），用户根据情况开启不同的注释段代码
 */

return class item extends Base {
  constructor(dom, config) {
    super(dom, config);

    // 用于控制图表边距，不可删除
    this.padding = [0, 0, 0, 0]

    // 用于设置图表的颜色方案
    this.theme = {}

    // 用于保存非echarts类图表的属性面板配置对象
    this.opts = {}

    // 用于保存echarts类图表的属性面板配置对象
     this.config = {}

    // 用于声明echarts类图表
     this.type = "echarts"
  }

  transformOptions() {
    return {
    //把组件代码放置此处即可完成
    //把组件代码放置此处即可完成
    //把组件代码放置此处即可完成
    //把组件代码放置此处即可完成
    //把组件代码放置此处即可完成
  };
  }

   /**
  * 渲染组件，此方法适用于非echarts的图表开发
  * @param {*} data 组件数据
  * @param {*} opts 组件配置参数
  * return 返回html字符串
  */
  render(h, data, opts) {

   }

}