首页echarts柱图原生js复现

echarts柱图原生js复现

时间: 2023-10-01 19:09:19 浏览: 90

要使用原生JavaScript复现ECharts柱图，你需要先引入ECharts库，并创建一个DOM元素作为图表的容器。然后，使用JavaScript代码配置图表的数据和样式，最后将图表渲染到容器中。以下是一个简单的示例代码，演示如何使用原生JavaScript复现ECharts柱图： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ECharts柱图原生JavaScript复现</title> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 创建图表容器 var chartContainer = document.getElementById('chart'); // 初始化图表实例 var chart = echarts.init(chartContainer); // 配置图表的数据和样式 var option = { title: { text: '柱图示例' }, xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: [10, 20, 30, 40, 50] }] }; // 将配置应用于图表 chart.setOption(option); // 渲染图表 chart.resize(); </script> </body> </html> ``` 在上述示例中，我们首先引入了ECharts库的JavaScript文件，然后创建了一个id为"chart"的div作为图表容器。接下来，使用`echarts.init`方法初始化了一个图表实例，并通过`setOption`方法配置了图表的数据和样式。最后，调用`resize`方法将图表渲染到容器中。你可以根据自己的需求修改示例代码中的数据和样式，来实现你想要的柱图效果。

阅读全文