首页生成一个用echarts实现多系列柱状图的html代码

生成一个用echarts实现多系列柱状图的html代码

时间: 2024-05-19 18:17:41 浏览: 135

以下是使用 echarts 实现多系列柱状图的示例代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多系列柱状图</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.0/dist/echarts.min.js"></script> </head> <body>  <div id="chart-container" style="width: 800px; height: 600px;"></div> <script> // 初始化 echarts 实例 var chart = echarts.init(document.getElementById('chart-container')); // 配置项 var option = { // 图表标题 title: { text: '多系列柱状图' }, // 图例 legend: { data: ['系列1', '系列2', '系列3'] }, // x 轴 xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月'] }, // y 轴 yAxis: { type: 'value' }, // 数据系列 series: [ { name: '系列1', type: 'bar', data: [100, 200, 150, 120, 180, 160] }, { name: '系列2', type: 'bar', data: [80, 120, 90, 110, 100, 130] }, { name: '系列3', type: 'bar', data: [70, 100, 80, 60, 120, 90] } ] }; // 使用配置项显示图表 chart.setOption(option); </script> </body> </html>

阅读全文