Skip to content

Latest commit

 

History

History
242 lines (225 loc) · 6.86 KB

README.md

File metadata and controls

242 lines (225 loc) · 6.86 KB
Raw

lit-echarts

The simplest and useful Web Component wrapper for Apache Echarts

Introduce

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.