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
- 基本条形图
- 基本饼图
- 基本甜甜圈图
- 基本路线图
- 工具提示性状
- 工具箱特征
- 传奇特征
- 网格特征
屏幕截图
执照
麻省理工学院
下载源码
通过命令行克隆项目:
git clone https://github.com/jvas28/grapesjs-echarts.git