首页使用echarts绘制一个立体堆叠柱状图（数据自定义）

使用echarts绘制一个立体堆叠柱状图（数据自定义）

时间: 2023-11-05 21:11:56 浏览: 47

好的，以下是一个使用 Echarts 绘制立体堆叠柱状图的示例代码，您可以根据自己的数据进行自定义。 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>立体堆叠柱状图</title>  <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.0/dist/echarts.min.js"></script> </head> <body>  <div id="chart" style="width: 800px; height: 600px;"></div> <script> // 初始化 Echarts 实例 var myChart = echarts.init(document.getElementById('chart')); // 定义数据 var data = [ [320, 332, 301, 334, 390, 330, 320], [220, 182, 191, 234, 290, 330, 310], [150, 232, 201, 154, 190, 330, 410] ]; // 定义颜色 var colors = ['#5793f3', '#d14a61', '#675bba']; // 配置选项 var option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['邮件营销', '联盟广告', '视频广告'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, yAxis: { type: 'value' }, xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], axisTick: { alignWithLabel: true } }, series: [] }; // 循环添加数据系列 for (var i = 0; i < data.length; i++) { option.series.push({ name: option.legend.data[i], type: 'bar', stack: '总量', itemStyle: { color: colors[i] }, data: data[i] }); } // 渲染图表 myChart.setOption(option); </script> </body> </html> ``` 这个示例代码中的数据是一个三维数组，每个数组表示一组数据。颜色数组表示每组数据对应的颜色。在配置选项中，“series”是一个数组，循环添加每个数据系列。每个系列都有相应的名称、类型、堆叠类型、样式和数据。

阅读全文