2021前端校招直通车实现Offer零距离vue+ECharts画图时的常用配置
有时分,运用 ECharts 画图时,官方提供的一些根本配置并不能满足实践项目的需求,这时就需求我们自定义一些配置,这些配置包括以下几个方面。
1、多轴配置
依据官方文档所说的,先配置两个y轴如下:
yAxis: [
{
type: 'value',
name: '1111',
position: 'left',
axisLine: {
show: true,
lineStyle: {
color: 'blue'
}
},
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: '2222',
position: 'right',
axisLine: {
show: true,
lineStyle: {
color: '#91cc75'
}
},
axisLabel: {
formatter: '{value}'
}
}
]
复制代码
下面重点是,当单个图表中存在多个y轴时,需求在 series 中运用 yAxisIndex 配置与之对应的y轴:
series: [
{
name: '销量1',
type: 'bar',
yAxisIndex: 0, // 指定第一个y轴
data: [5, 20, 36, 10, 10, 20]
},
{
name: '销量2',
type: 'bar',
yAxisIndex: 1, // 指定第二个y轴
data: [150, 250, 400, 50, 150, 300]
}
]