echarts定制化每条数据顶部的标签

DRAGONZLL111

于 2024-08-08 15:30:53 发布

阅读量128

点赞数 2

文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/DRAGONZLL111/article/details/141028280

版权

series: [
    {
      name: '白色车牌',
      type: 'bar',
      stack: '总量',
      data: props.carFlowType.seriesData4,
      color: '#D5DEEE'
    },
    {
      name: '渐变绿车牌',
      type: 'bar',
      stack: '总量',
      data: props.carFlowType.seriesData2,
      color: '#6DE55E'
    },
    {
      name: '黄色车牌',
      type: 'bar',
      stack: '总量',
      data: props.carFlowType.seriesData3,
      color: '#FFB200'
    },
    {
      name: '蓝色车牌',
      type: 'bar',
      stack: '总量',
      // label: {
      //   show: true,
      //   position: 'insideRight'
      // },
      data: props.carFlowType.seriesData1,
      barWidth: 20,
      color: '#0165FE',
      label: {
        show: true,
        position: 'top',
        formatter: function (params) {
          // 这里可以根据实际需求自定义内容和样式
          return (
            '{a|' +
            (props.carFlowType.seriesData1[params.dataIndex][1] +
              props.carFlowType.seriesData2[params.dataIndex][1] +
              props.carFlowType.seriesData3[params.dataIndex][1] +
              props.carFlowType.seriesData4[params.dataIndex][1]) +
            '/辆' +
            '}'
          )
        },
        rich: {
          a: {
            color: '#fff', // 标签文字颜色
            backgroundColor: '#445B85', // 标签背景颜色
            padding: [7, 5, 5, 5],// 文字边界 padding
            borderRadius:3,// 可以添加更多样式，如 borderRadius 等
            // lineHeight: 10 // 设置高度，确保与柱状图保持一致
          }
        }
      }
    }
  ]

label部分就是