echars双折线柱状图

### 创建双折线柱状组合图表 在 ECharts 中创建双折线柱状组合图表可以通过设置多个 `series` 来实现。每个系列可以有不同的类型，如折线图或柱状图。通过调整坐标轴和其他选项来优化显示效果。 #### 配置项说明 为了构建这种类型的图表，需要定义两个不同类型的序列：一个是用于表示数据的柱状图部分；另一个则是用来绘制两条不同的折线。以下是具体的配置方法： ```javascript option = { tooltip: { trigger: 'axis' }, legend: { data:['销量', '访问量', '转化率'] }, xAxis: [ { type: 'category', data: ['周一','周二','周三','周四','周五','周六','周日'], axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', name: '数量', min: 0, max: 250, position: 'left', axisLine: { show: true }, axisLabel: { formatter: '{value} ' } }, { type: 'value', name: '百分比', min: 0, max: 10, position: 'right', offset: 80, axisLine: { show: true }, axisLabel: { formatter: '{value} %' } } ], series : [ { name:'销量', type:'bar', data:[120, 132, 101, 134, 90, 230, 210], itemStyle:{ color:'#FF005A' } }, { name:'访问量', type:'line', yAxisIndex: 0, data:[132, 101, 140, 231, 120, 79, 100], smooth:true, lineStyle: { width: 3, color: '#FEB692' } }, { name:'转化率', type:'line', yAxisIndex: 1, data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6], smooth:true, lineStyle: { width: 3, color: '#BEECFD' } } ] }; ``` 此代码片段展示了如何在一个图表内同时呈现柱状图和两组折线的数据[^1]。注意这里设置了两个 Y 轴分别对应左侧的数量单位以及右侧的百分比单位，并且每条折现的颜色也进行了自定义设定以区分各个指标之间的差异。 对于 VUE 项目的集成，在完成上述基本配置之后还需要按照特定的方式引入并初始化 ECharts 实例[^2]。而对于 HarmonyOS 平台，则可能涉及到额外适配工作以便更好地支持该操作系统特性[^3]。