echarts toolip悬浮框文字自定义,十字准星标准线对应数值自定义

 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;

  echarts toolip悬浮框文字自定义,十字准星标准线对应数值自定义

 

上一篇:echarts如何监听点击图表空白处事件


下一篇:Elasticsearch 按时间段查询