# echarts-webcomponent

[![npm](https://img.shields.io/npm/v/echarts-webcomponent.svg)](https://www.npmjs.com/package/echarts-webcomponent)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/kkpoon/echarts-webcomponent)

## Demo

<!--
```
<custom-element-demo>
  <template>
    <echarts-webcomponent
        style="display: block; width: 600px; height: 400px;"
        option='{"title":{"text":"ECharts 入门示例"},"tooltip":{},"legend":{"data":["销量"]},"xAxis":{"data":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},"yAxis":{},"series":[{"name":"销量","type":"bar","data":[5,20,36,10,10,20]}]}'
    ></echarts-webcomponent>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.6.2/echarts.min.js" integrity="sha256-fp0z3xrboeLp/Wr7nckIqBgpU4u+mq/aNb00YVxmB4w=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.1.3/webcomponents-bundle.js" integrity="sha256-4jOg/7MBayBO2wu7hBlS/rMaGUrVPNRzx2ADOR8kv9M=" crossorigin="anonymous"></script>
    <script src="src/index.js"></script>
    <script>
        window.addEventListener('WebComponentsReady', function (e) {
            window.customElements.define("echarts-webcomponent", EChartsWebComponent);
        });
    </script>
    <next-code-block></next-code-block>
  </template>
</custom-element-demo>
```
-->
```html
<echarts-webcomponent style="width: 300px; height: 200px;" option='{"title":{"tex  t":"ECharts 入门示例"},"tooltip":{},"legend":{"data":["销量"]},"xAxis":{"data"  :["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},"yAxis":{},"series":[{"nam  e":"销量","type":"bar","data":[5,20,36,10,10,20]}]}'></echarts-webcomponent>
```