Code Monkey home page Code Monkey logo

grapesjs-echarts's Introduction

Holaa ๐Ÿ‘‹

I'm Julio, a Web and Mobile Developer. When I'm not coding I'm spending time with my family or playing my guitar.

  • ๐Ÿ˜„ Pronouns: he/him
  • โญ My favorite technologies are Javascript and PHP
  • ๐Ÿ”ญ Iโ€™m currently working on Laravel, Livewire, Tailwind, Alpine JS, Vue and React
  • ๐ŸŒฑ Iโ€™m currently learning ๐Ÿ‡ฎ๐Ÿ‡น Italian | InertiaJS
  • ๐Ÿ‘ฏ Iโ€™m looking to collaborate in Open Source projects
  • ๐Ÿ’ฌ Ask me about React, React Native, Vue, Laravel, Livewire
  • ๐Ÿ“ซ You can reach by email: [email protected]
  • I speak: ๐Ÿ‡ช๐Ÿ‡ธ Spanish and ๐Ÿ‡บ๐Ÿ‡ธ English

Julio's github stats

grapesjs-echarts's People

Contributors

dependabot[bot] avatar jvas28 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Forkers

edwinyzh 0xd4ngi

grapesjs-echarts's Issues

Can not use this plugin in a new react app

I am getting the following error when use this plugin:

Uncaught TypeError: Cannot create property 'event' on string 'parallelAxisExpand'
    at Object.C [as registerAction] (echarts.js:2050:1)
    at Object.<anonymous> (parallelAxisAction.js:64:1)
    at e2 (bootstrap:19:1)

[Question] Updating label name ?

Hi,

is it possible to allow the update of label's name ?
I would like to change the strings "Theme", "Select a theme", Item" etc... by some translations ?

Best regards

grapesjs echarts library not running

image
few months back while testing it is working but now it showing this error, i didnt make any changes (while checking with previous issue it has configuration issue with vite)

This plugin is not working with storageManager

When i use storageManager and refresh the page after saving. It show's blank canvas(Empty chats elements).

storageManager: {
          id: "gjs-", // Prefix identifier that will be used on parameters
          type: "local", // Type of the storage
          autosave: true, // Store data automatically
          autoload: true, // Autoload stored data on init
          stepsBeforeSave: 1, // If autosave enabled, indicates how many changes are necessary before store method is triggered
        },

ECharts render error when directly setComponents to the editor

Hi, thank you very much for this amazing work ! Please help me with my problem, thank you!!!!
In my case, I use the data gjs-html and gjs-css from localStorage to send to server. Then I use the code bellow to init the editor, But all the grapesjs-echart dom cannot display on the editor.
this.editor.setComponents(gjs-html string) this.editor.setStyle(gjs-css string)
Some gjs-html may like this
<div id="ikir" data-ecg-series="[{&quot;id&quot;:1612336424717,&quot;label&quot;:&quot;Category 1&quot;,&quot;value&quot;:100,&quot;color&quot;:null},{&quot;id&quot;:1612336424894,&quot;label&quot;:&quot;Category 2&quot;,&quot;value&quot;:100,&quot;color&quot;:null}]" data-ecg-theme="" data-ecg-options="{&quot;series&quot;:[{&quot;type&quot;:&quot;bar&quot;,&quot;data&quot;:[{&quot;value&quot;:100,&quot;name&quot;:&quot;Category 1&quot;,&quot;itemStyle&quot;:{&quot;color&quot;:null}},{&quot;value&quot;:100,&quot;name&quot;:&quot;Category 2&quot;,&quot;itemStyle&quot;:{&quot;color&quot;:null}}]}],&quot;xAxis&quot;:[{&quot;data&quot;:[&quot;Category 1&quot;,&quot;Category 2&quot;]}],&quot;yAxis&quot;:[{&quot;type&quot;:&quot;value&quot;}]}"></div><script>var items = document.querySelectorAll('#ikir'); for (var i = 0, len = items.length; i < len; i++) { (function(){var t=this;window.$grapesEcharts||(window.$grapesEcharts={themes:[]});var e=JSON.parse(this.getAttribute("data-ecg-options")),n=this.getAttribute("data-ecg-theme")||null,i=function(){try{var i=echarts.getInstanceByDom(t);i&&echarts.dispose(i);var r=echarts.init(t,n);e&&r.setOption(e)}catch(t){console.log(t)}},r=function(){if(n)if(window.$grapesEcharts.themes.includes(n))i();else{var t=document.createElement("script");t.onload=i,window.$grapesEcharts.themes.push(n),t.src="https://unpkg.com/[email protected]/theme/".concat(n,".js"),document.body.appendChild(t)}else i()};if("undefined"==typeof echarts){var o=document.createElement("script");o.onload=r,o.src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts-en.min.js",document.body.appendChild(o)}else r()}.bind(items[i]))(); }</script>

and gjs-css like this:

`

  • { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#ikir{width:300px;min-height:100px;}

`

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.