Echart折线图 柱状图

### 绘制带柱状图背景的折线图 要在 ECharts 中实现带有柱状图背景的折线图，可以通过组合图表的方式完成。具体来说，可以利用 `series` 的层叠功能，在同一个坐标系下先绘制柱状图作为背景，再在其上叠加折线图。 以下是详细的说明以及代码示例： #### 数据准备与配置项设置 为了实现这种效果，需要定义两个系列数据：一个是用于柱状图的数据序列，另一个是用于折线图的数据序列。通过调整两者的 `zlevel` 或 `z` 属性来控制它们的显示层次关系[^1]。 ```javascript option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name: 'Background Bar', type: 'bar', stack: 'background', itemStyle: { color: 'rgba(0,0,0,0.1)' // 设置半透明颜色作为背景 }, data: [120, 200, 150, 80, 70, 110, 130], z: 1 // 调整柱状图位于较低层级 }, { name: 'Line Chart', type: 'line', smooth: true, data: [120, 200, 150, 80, 70, 110, 130], z: 2 // 折线图覆盖在柱状图之上 } ] }; ``` 上述代码中，设置了柱状图的颜色为半透明灰色 (`rgba(0,0,0,0.1)`) 来模拟背景效果，并将其放置于较低的渲染层级 (通过 `z: 1` 实现)。而折线图则被赋予更高的渲染优先级 (通过 `z: 2` 实现)，从而确保其能够清晰地展示在线条上方。 #### 页面刷新后的 Canvas 尺寸适配 当页面发生刷新或者窗口大小发生变化时，需重新调用 `resize()` 方法以更新图表尺寸并保持布局正常[^2]。可以在初始化完成后绑定事件监听器处理此逻辑： ```javascript window.addEventListener('resize', function () { myChart.resize(); }); ``` 这样即使浏览器窗口改变大小，也能保证图表始终适应当前容器宽度高度比例。 #### 总结 以上方法展示了如何借助 ECharts 库创建具有视觉吸引力且易于理解的信息图形——即一种特殊的复合型统计图表形式，其中包含了以淡色调呈现的历史记录值分布情况（由柱形表示），同时还突出了最新观测结果的趋势变化轨迹（借由平滑曲线描绘）。这种方法非常适合用来追踪随时间推移的各项指标表现状况。