首页制作echarts柱状图

制作echarts柱状图

时间: 2023-11-05 08:57:28 浏览: 91

要制作 echarts 柱状图，你需要先引入 echarts 库，并在 HTML 文件中创建一个容器来显示图表。接下来，你可以使用 echarts 的 API 来配置和渲染柱状图。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 柱状图示例</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> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 指定图表的配置项和数据 var option = { title: { text: '柱状图示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script> </body> </html> ``` 这段代码会创建一个宽度为 600px，高度为 400px 的柱状图，并显示在 id 为 "chart" 的 div 容器中。图表的数据和配置项都在 JavaScript 中指定。你可以根据自己的需求修改数据和样式。

阅读全文