const echartOpt = { title: '同比提效动态', name: 'thanEff', option: { legend: { textStyle, itemHeight: 10, itemWidth: 10, data: [ { name: '去年人数', fontSize: 10 }, { name: '今年人数', fontSize: 10 }, { name: '对应比率', fontSize: 10 } ], top: 0 }, grid: { top: '18%', left: '1%', right: '6%', bottom: '3%', containLabel: true }, tooltip: { trigger: 'axis', backgroundColor: 'rgba(50, 50, 50, 0.7)', // toolip浮窗颜色 textStyle: { color: '#fff' },
//对应比例加%
formatter: function (params) { let tip = ''; if (params !== null && params.length > 0) { tip += params[0].name + '<br/>'; for (let i = 0; i < params.length; i++) { if (params[i].seriesName === '对应比率') { tip += `${params[i].seriesName}: ${params[i].value}%<br/>`; } else { tip += `${params[i].seriesName}: ${params[i].value}<br/>`; } } } return tip; }, axisPointer: { type: 'cross', // 十字准星指示器。其实是种简写,表示启用两个正交的轴的 axisPointer 'line' 直线指示器 'shadow' 阴影指示器 label: {
//十字准星指示器y轴右侧加%,左侧y轴展示数字 formatter: function (params) { if (params.axisDimension === 'y' && params.axisIndex === 1) { return parseFloat(params.value).toFixed(1) + '%'; } else if (params.axisDimension === 'y' && params.axisIndex === 0) { console.log(params, Number(params.value), '之来哦'); return params.value.toFixed(2).replace(/\.0+$/, '').replace(/(\.\d+[1-9])0+$/, '$1'); } else if (params.axisDimension === 'x') { return params.value; } } } } }, xAxis: [ { type: 'category', data: xAxisdata, // data: [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月' ], // axisTick: { // show: true // }, axisLine: { show: true, lineStyle: { type: 'solid', color: '#BAB8CE' } }, axisLabel: { textStyle: { color: '#fff' } } } ], yAxis: [ { type: 'value', name: '执行效率', min: 0, max: 400, interval: 50, // 平均每一份数值是多少 nameTextStyle: { color: '#fff', fontSize: 12 }, splitLine: { // y轴网格颜色 show: true, lineStyle: { color: [ '#BAB8CE' ], width: 1, type: 'solid', opacity: 0.2 } }, axisTick: { show: true }, axisLine: { show: true, lineStyle: { type: 'solid', color: '#BAB8CE' } }, axisLabel: { textStyle: { color: '#fff' } } }, { type: 'value', name: '', min: -100, max: 100, interval: 25, splitLine: { // y轴网格颜色 show: true, lineStyle: { color: [ '#BAB8CE' ], width: 1, type: 'solid', opacity: 0.2 } }, axisTick: { show: true }, axisLine: { show: true, lineStyle: { type: 'solid', color: '#BAB8CE' } }, axisLabel: { formatter: '{value}%' } } ], series: [ { name: '今年人数', type: 'bar', color: '#FC7B40', barWidth: '23%', data: seriesdatalist[1] || [] // data: [ 10, 15, 17, 20, 30, 45, 30, 18, 23, 34, 54, 13 ] }, { name: '去年人数', type: 'bar', color: '#2CA5E0', barWidth: '23%', data: seriesdatalist[0] || [] // data: [ // 13, 53, 23, 14, 54, 23, 14, 51, 30, 34, 21, 53 // ] }, { name: '对应比率', type: 'line', color: '#FF5956', yAxisIndex: 1, data: seriesdatalist[2] || [] // data: [ 2, 3, 5, 7, 3, 5, 4, 6, 14, 10, 5, 5 ] } ] } }; return echartOpt; } export default setOption;