grapesjs echarts

grapesjs echarts

这是使用eCharts库中添加?图表组件的进度版本的工作。

试试代码笔。

在此处检查基本结果。

可用组件

目前只有4个图表组件。

• Bars Chart
• Pie Chart
• Donut Chart
• Lines Chart

Settings是一个特殊的Custom Chart ，可以使您通过添加echarts.options 。以JSON字符串格式创建任何类型Chart Components图表。

可用设置

• 主题
• 项目
  • 姓名
  • 价值
  • 颜色

此设置可用于除Custom Chart以外的所有组件。

I18N支持

如果您想自定义此应用中使用的一些字符串，则可以使用插件传递一组翻译，或者您只想更改可以传递您喜欢的本地的语言（目前在英语和西班牙语之间），我向其他语言开放，但仍然很小的插件，所以不那么太多要翻译。

 ...
pluginsOpts: {
          \"grapesjs-echarts\": {
            intl: {
              locale: \"en\", // \"es\" also available
              messages: {
                en: {
                  components: {
                    bars: { name: \"My new bars name\" },
                  },
                },
              },
            },
          },
        },
...

参考语言环境文件夹以获取标签结构的想法。

用法

直接在浏览器中

 < link
  href =\" https://unp*k*g.co*m/grapesjs/dist/css/grapes.min.css \"
  rel =\" stylesheet \"
/>
< script src =\" https://*un*pk*g.com/grapesjs \" > </ script >
< script src =\" https://*un*pk*g.com/grapesjs-echarts.min.js \" > </ script >

< div id =\" gjs \" > </ div >

< script type =\" text/javascript \" >
  var editor = grapesjs . init ( {
    container : \"#gjs\" ,
    // ...
    plugins : [ \"grapesjs-echarts\" ] ,
    pluginsOpts : {
      \"grapesjs-echarts\" : {
        /* options */
      } ,
    } ,
  } ) ;
</ script >

现代JavaScript

 import grapesjs from \'grapesjs\' ;
import plugin from \'grapesjs-echarts\' ;
import \'grapesjs/dist/css/grapes.min.css\' ;

const editor = grapesjs . init ( {
  container : \'#gjs\' ,
  // ...
  plugins : [ plugin ] ,
  pluginsOpts : {
    [ plugin ] : { /* options */ }
  }
  // or
  plugins : [
    editor => plugin ( editor , { /* options */ } ) ,
  ] ,
} ) ; 

发展

克隆存储库

$ git clone https://g*ithu*b.*com/jvas28/grapesjs-echarts.git
$ cd grapesjs-echarts

安装依赖项

$ npm i

启动开发服务器

$ npm start

构建源

$ npm run build

学分

图标

由www.flaticon.com设计的SmartLine设计

路线图V1

• 基本条形图
• 基本饼图
• 基本甜甜圈图
• 基本路线图
• 工具提示性状
• 工具箱特征
• 传奇特征
• 网格特征

屏幕截图

执照

麻省理工学院