首页使用echart生成一个柱状图的代码，柱状图有20个数据

使用echart生成一个柱状图的代码，柱状图有20个数据

时间: 2024-04-30 19:22:59 浏览: 19

以下是使用 echarts 生成一个包含20个数据的柱状图的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts柱状图示例</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script> </head> <body>  <div id="main" style="width: 600px;height:400px;"></div> <script> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: '柱状图示例' }, tooltip: {}, xAxis: { data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T'] }, yAxis: {}, series: [{ name: '数据', type: 'bar', data: [5, 20, 36, 10, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 在上述代码中，我们创建了一个容器 `<div id="main"></div>` 用于展示图表，并使用 `echarts.init` 方法初始化了一个 echarts 实例。然后，我们指定了图表的配置项和数据，其中 `xAxis` 指定了横坐标的数据，`yAxis` 指定了纵坐标的数据，`series` 指定了图表的系列数据。最后，使用 `myChart.setOption` 方法将配置项和数据应用到图表上，完成图表的绘制。