首页用echarts画柱状图

用echarts画柱状图

时间: 2023-06-14 19:05:52 浏览: 80

可以使用以下代码使用 Echarts 画一个简单的柱状图： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>柱状图</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> // 初始化 ECharts 实例 var chart = echarts.init(document.getElementById('chart')); // 配置项数据 var option = { title: { text: '柱状图示例' }, tooltip: {}, xAxis: { data: ['A', 'B', 'C', 'D', 'E', 'F'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [50, 20, 30, 40, 10, 60] }] }; // 使用刚指定的配置项和数据显示图表 chart.setOption(option); </script> </body> </html> ``` 在上面的代码中，我们首先引入了 ECharts 库的文件，然后创建了一个包含图表的容器。接着，我们使用 ECharts 的 API 初始化了一个实例，并定义了图表的配置项和数据。最后，我们通过调用 `setOption` 方法来显示图表。在这个柱状图中，我们定义了一个标题，一个 x 轴和一个 y 轴。x 轴显示了每个柱子对应的类别，y 轴显示了柱子的值。我们使用 `series` 属性来定义一个柱状图的系列，其中 `type` 属性指定了图表类型为柱状图，`data` 属性指定了每个柱子的值。

阅读全文