Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记

Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记

展示效果如下（主要记录一下 如何在柱状体实体里面展示自定义的数据和在顶部展示自定义数据）

柱状图实体展示数据

1. series: [{
   name: “”,
   data: _ydataPercent,
   type: “bar”,
   barWidth: _barWidth,
   label: {
   show: true,
   formatter: (params) => {
   return ‘{a|’ + sleepTimeChart.realityPduQty[params.dataIndex] + ‘}’ + ‘\n’ + ‘{b|’ + sleepTimeChart.PlanPduQty[params.dataIndex] + ‘}’

             },
             rich: {
                 a: {
                     color: '#fff',
                     fontSize: 30
                 },
                 b: {
                     color: '#fff',
                     fontSize: 20,
                     padding: [0, 0, 20, 10]
                 }
             },
         },
   
         itemStyle: {
             color: '#1b4993'
         },
             itemStyle: {
                 color: '#73e3ad'
             },
             color: '#BD60F6',
             symbolOffset: [0, -15],
   
         },
     }]
   

实体内容在series-label-formatter属性里面设置内容，
实体样式在series-label-rich富文本里面样式设置
最重要的就是formatter里面要和富文本对应起来
eg：’{a|’ + sleepTimeChart.realityPduQty[params.dataIndex] + ‘}’
富文本中的a决定的是参数sleepTimeChart.realityPduQty[params.dataIndex]的样式

柱状图顶部展示数据

是在series-markPoint里面设置 

切记如果要分情况进行实体样式展示效果的不同，可以参考官网，将label属性放在data里面，在外部进行条件判断，eg：

这样即可实现每条柱子的自定义样式!!只有你想不到的没有echarts做不到的！