lit-echarts

The simplest and useful Web Component wrapper for Apache Echarts

Introduce

• Components are built with LitElement
• Code bunlder and dev server are provided by Vite
• DOM element size watcher is size-sensor
• Deep equal comparison provided by fast-deep-equal

DEMO

There is a demo web component, please run dev server to have a look

npm run dev

Install

Once you've cloned the repo, run the following command.

npm install

echarts is the peerDependence of lit-echarts, you can install echarts with your own version.

$ npm install --save echarts

Start Dev Server

To spin up the dev server

npm run dev

Building

To generate a production build, run the following command.

npm run build

Properties

Property	Type	Description
theme	String	Theme to be applied
option	Object	Configuration item and data. Please refer to configuration item manual for more information
replaceMerge	String or String[]	users can specify "component main types" here, which are the properties under the root of the option tree.(e.g., xAxis, series). The specified types of component will be merged in the mode "replaceMerge". If users intending to remove some part of components, replaceMerge can be used.
noMerge	Boolean	states whether not to merge with previous option; false by default, means merge.If true, all of the current components will be removed and new components will be created according to the new option
showLoading	Boolean	Shows loading animation, If set false after previous true value, will hide current loading animation
loadingOption	Object	configuration item of loading animation
opts	Object	Initialize chart Instance chart configurationsLines in loaded buffers. Please refer to configuration details
onEvents	Object	Binding events {eventName: handleFuntion}
onChartReady	Function	Call back function after chart init with echarts instance as param
noData	Boolean	states whether show "No Data" title

Resize

Chart watch dom size changing by bind with size-sensor to resize itself No need to handle resize outside of component

Examples

Simple Examples

Draw a simple chart by just given option

<lit-echarts id="my-chart"></lit-echarts>
<script>
  // specify chart configuration item and data
  const option = {
      title: {
          text: 'ECharts entry example'
      },
      tooltip: {},
      legend: {
          data:['Sales']
      },
      xAxis: {
          data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
      },
      yAxis: {},
      series: [{
          name: 'Sales',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
  };
  const dom = document.querySelector('#my-chart');
  dom.option = option;
</script>
<style>
  #my-chart{
    width: 800px;
    height: 400px;
  }
</style>

Theme

Initialize with theme name

<lit-echarts id="theme-chart" theme="dark"></lit-echarts>
<script>
  const option = {
    xAxis: {},
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.07, 6.95],
            [13.0, 7.58],
            [9.05, 8.81],
            [11.0, 8.33],
            [14.0, 7.66],
            [13.4, 6.81],
            [10.0, 6.33],
            [14.0, 8.96],
            [12.5, 6.82],
            [9.15, 7.20],
            [11.5, 7.20],
            [3.03, 4.23],
            [12.2, 7.83],
            [2.02, 4.47],
            [1.05, 3.33],
            [4.05, 4.96],
            [6.03, 7.24],
            [12.0, 6.26],
            [12.0, 8.84],
            [7.08, 5.82],
            [5.02, 5.68]
        ],
        type: 'scatter'
    }]
};
  const dom = document.querySelector('#theme-chart');
  dom.option = option;
</script>
<style>
  #theme-chart{
    width: 800px;
    height: 400px;
  }
</style>

showLoading

Show loading animation

<button id="toggle-button"> Toggle Loading</button>
<lit-echarts id="loading-chart" showLoading="true"></lit-echarts>
<script>
  const option = {
    xAxis: {},
    yAxis: {},
    series: [{
        symbolSize: 20,
        data: [
            [10.0, 8.04],
            [8.07, 6.95],
            [9.05, 8.81],
            [11.0, 8.33],
            [10.0, 6.33],
            [9.15, 7.20],
            [12.2, 7.83],
            [2.02, 4.47],
            [4.05, 4.96],
            [12.0, 6.26],
            [12.0, 8.84],
            [5.02, 5.68]
        ],
        type: 'scatter'
    }]
};
  const dom = document.querySelector('#loading-chart');
  const btnDom = document.querySelector('#toggle-button');
  dom.option = option;
  dom.loadingOption = {
    text: 'my chart is loading...',
    color: '#c23531',
    textColor: '#333',
    maskColor: 'rgba(255, 255, 255, 0.8)',
    // Font size. Available since `v4.8.0`.
    fontSize: 16,
    // Show an animated "spinner" or not. Available since `v4.8.0`.
    showSpinner: true,
    // Radius of the "spinner". Available since `v4.8.0`.
    spinnerRadius: 10,
  }
  btnDom.addEventListener('click', (e) => {console.log(e)
    dom.showLoading = !dom.showLoading
  });

</script>
<style>
  #loading-chart{
    width: 800px;
    height: 400px;
  }
</style>

Bind Chart Events

Bind Chart Events with callback functions

<lit-echarts id="on-event-chart"></lit-echarts>
<script>
  // specify chart configuration item and data
  const dom = document.querySelector('#on-event-chart');
  const option = {
      title: {
          text: 'ECharts entry example'
      },
      tooltip: {},
      legend: {
          data:['Sales']
      },
      xAxis: {
          data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
      },
      yAxis: {},
      series: [{
          name: 'Sales',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
      }]
  };
  const events = {
    click: function(obj){
      console.log('chart click');
      const str = `click at ${obj.name}: ${obj.data}`
      alert(str);
    }
  }
  dom.onEvents = events;
  dom.option = option;
</script>
<style>
  #on-event-chart{
    width: 800px;
    height: 400px;
  }
</style>

License

lit-echarts is designed in Vancouver by Cherie Fu. It’s available under the terms of the MIT license.