const initOption = {
// 在画布中的位置
grid: {
left: '15%',
right: '10%',
bottom: '20%'
},
//用不同样式的图例用数组写对应图例的样式
legend: [
{
left: '23%',
itemWidth: 12,
itemHeight: 12,
data: [
{
name: '签约人数'
},
{
name: '履约人数'
}
]
},
{
right: '22%',
itemWidth: 15,
itemHeight: 7.5,
data: [
{
name: '履约率'
}
]
}
],
xAxis: {
axisLabel: {
interval: 0, // 强制设置坐标轴分割间隔
// width: 50,
color: '#6e7079',
fontSize: 12,
// rotate: 45,
width: 110,
overflow: 'truncate'
},
axisTick: {
show: false
},
data: []
},
yAxis: [
// 第一根y轴 如果不需要双y轴 直接删除即可
{
name: '人',
type: 'value',
min: 0
},
// 第二根y轴
{
name: '%',
type: 'value',
min: 0,
splitLine: {
show: false
}
}
],
tooltip: {
trigger: 'axis',
confine: true,
// 这边是根据要求给tooltip 提示框添加单位 如果不需要单位 删除即可 默认不带单位
formatter: (params) => {
var relVal = params[0].name
for (var i = 0, l = params.length; i < l; i++) {
relVal =
relVal +
'<br/>' +
params[i].marker +
params[i].seriesName +
' ' +
params[i].value +
`${i === 2 ? '%' : '人'}`
}
return relVal
}
},
series: [
{
name: '签约人数',
type: 'bar', // 柱状图
barWidth: '13', // 柱宽
symbol: 'none',
data: [], // 数据
color: '#91cc75'
},
{
name: '履约人数',
type: 'bar',
barWidth: '13',
symbol: 'none',
data: [],
color: '#36c2cf'
},
{
name: '履约率',
type: 'line', // 折线图
yAxisIndex: 1, // y轴索引
// barWidth: '13',
symbol: 'none',
data: [],
color: '#f1b45b'
}
]
}
eCharts 还是要多使用 多看文档 用多了就熟练了 很多时候的需求只是一个配置的事