echarts-webcomponent
Version:
echarts webcomponent
18 lines (16 loc) • 1.09 kB
HTML
<html>
<body>
<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="dist/main.js"></script>
<script>
window.addEventListener('WebComponentsReady', function (e) {
window.customElements.define("echarts-webcomponent", EChartsWebComponent);
});
</script>
</body>
</html>