首页 > 其他分享 >echarts图tooltip自定义显示,纵坐标百分比单位展示、柱状图上方数值加百分比

echarts图tooltip自定义显示,纵坐标百分比单位展示、柱状图上方数值加百分比

时间:2023-01-12 11:56:27浏览次数:45  
标签:百分比 自定义 show color type data 柱状图 true

效果如图:

 

 

 

 

 

 

 

 

 

 

 

 

 //作业率
      lineOption4: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: { color: '#fff' },
            crossStyle: { color: '#6d7882' }
          },
          formatter: function(datas) {
            console.log('datas', datas)
            let res = datas[0].name + '<br/>'
            for (let i = 0, length = datas.length; i < length; i++) {
              res += datas[i].seriesName + ':' + datas[i].data.value + '%<br/>'
            }
            return res
          }
        },
        legend: {
          right: '0%',
          data: [
            '日历作业率',
            '有效作业率',
            '年度日历作业率',
            '年度有效作业率'
          ],
          textStyle: { fontSize: 12 },
          show: true
        },
        grid: [
          {
            show: true,
            top: '19%',
            left: '0%',
            right: '0%',
            bottom: '4%',
            containLabel: true
          }
        ],
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#d4d7da'
              }
            },
            splitLine: {
              show: true,
              lineStyle: { color: '#d4d7da' }
            },
            data: []
          }
        ],
        yAxis: [
          //y轴左侧代表值
          {
            type: 'value',
            name: '',
            position: 'left',
            alignTicks: true,
            splitNumber: 5,
            // min: 0,
            // interval: Math.ceil(Math.ceil(Math.max(100)) / 5),
            // max: Math.ceil(Math.ceil(Math.max(100)) / 5) * 5,
            axisLine: {
              show: false
              /*   lineStyle: {
                color: '#d4d7da'
              }*/
            },
            splitLine: {
              show: true,
              lineStyle: { color: '#d4d7da' }
            },
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '日历作业率',
            type: 'bar',
            barGap: 0.2,
            barWidth: 32,
            data: [],
            color: '#6554C0',
            //柱状图显示上方数字
            label: {
              normal: {
                //柱状图上方文字加百分号
                formatter: function(params) {
                  return params.value + '%'
                },
                show: true,
                position: 'top',
                textStyle: {
                  color: '#606266'
                }
              }
            }
          },
          {
            name: '有效作业率',
            type: 'bar',
            barGap: 0.2,
            barWidth: 32,
            data: [],
            color: '#3F92F3', //默认柱状图颜色
            //柱状图显示上方数字
            label: {
              normal: {
                //柱状图上方文字加百分号
                formatter: function(params) {
                  return params.value + '%'
                },
                show: true,
                position: 'top',
                textStyle: {
                  color: '#606266'
                }
              }
            }
          },
          {
            name: '年度日历作业率',
            type: 'line',
            data: [],
            color: '#6554C0' //默认颜色
          },
          {
            name: '年度有效作业率',
            type: 'line',
            data: [],
            color: '#3F92F3' //默认颜色
          }
        ]
      }

 

标签:百分比,自定义,show,color,type,data,柱状图,true
From: https://www.cnblogs.com/zqlym/p/17046091.html

相关文章