fec-custom-plugin v1.0.4

fec-custom-plugin

Install

npm install fec-custom-plugin

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import { Editor, MapChart, Toolbar } from 'fec-custom-plugin'
/**
 * Editor  富文本编辑器
 * MapChart 地图
 * Toolbar  快速导航栏
 */

const element = document.getElementById('root')

const html = ''
const defaultList: any[] = [
  {
    icon: 'https://csdnimg.cn/release/blogv2/dist/pc/img/toolbar/full.png',
    text: '扫码',
    callback: () => {
      console.log('扫码')
    }
  },
  {
    icon: 'https://g.csdnimg.cn/side-toolbar/3.6/images/customer.png',
    text: '客服',
    callback: () => {
      console.log('客服')
    }
  }
]

const mapOption = {
  visualMap: {
    min: 0,
    max: 1000,
    left: 'left',
    top: 'bottom',
    text: ['High', 'Low'],
    calculable: true
  },
  series: [
    {
      type: 'map',
      mapType: 'china', // 使用我们注册的中国地图
      roam: true, // 支持缩放
      label: {
        show: true, // 显示省市的名称
        fontSize: 10
      },
      data: [
        { name: '北京', value: 1000 },
        { name: '上海', value: 800 },
        { name: '广东', value: 600 },
        { name: '四川', value: 500 },
        { name: '湖南', value: 400 },
        { name: '浙江', value: 300 }
      ]
    }
  ]
}

ReactDOM.render(
  <div>
    <Editor
      editorContent={html}
      setContent={(value: string) => {
        console.log(value)
      }}
    />
    <MapChart mapOption={mapOption} />
    <Toolbar toolbarList={defaultList} />
  </div>,
  element
)