echarts 双柱状图和折线图,去除折线图背景线 折线图展示百分比
时间: 2023-07-22 21:22:35 浏览: 85
如果您要将折线图的数据展示为百分比,可以通过设置 `yAxis.axisLabel.formatter` 属性来实现。具体步骤如下:
1. 设置 y 轴的 `type` 属性为 `'value'`,表示使用数值轴。
2. 设置两个 y 轴,分别用于展示柱状图和折线图的数据。
3. 针对折线图的 y 轴,通过设置 `axisLabel.formatter` 属性为 `{value}%`,用于将数值转化为百分比形式。
示例代码如下:
```javascript
option = {
...
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}' // 这里可以设置柱状图的单位
}
},
{
type: 'value',
axisLabel: {
formatter: '{value}%' // 将折线图的数值转化为百分比形式
}
}
],
series: [
{
name: '柱状图1',
type: 'bar',
data: [10, 20, 30, 40, 50]
},
{
name: '柱状图2',
type: 'bar',
data: [20, 30, 40, 50, 60]
},
{
name: '折线图',
type: 'line',
yAxisIndex: 1, // 使用第二个 y 轴
data: [30, 40, 50, 60, 70],
lineStyle: {
color: 'blue'
},
itemStyle: {
color: 'blue'
},
label: {
formatter: '{c}%' // 设置折线图数据标签的格式为百分比形式
},
axisLabel: {
formatter: '{value}%' // 设置折线图 y 轴的标签格式为百分比形式
},
splitLine: {
show: false // 去除背景线
}
}
]
};
```
需要注意的是,上述代码中的 `{value}` 和 `{c}` 都是占位符,分别表示当前数值和当前数据项的数值。