echarts柱状图数据展示在柱子上方、右侧

六月初六月初 Echarts 2019-08-11 09:23:09

echarts柱状图数据展示位置：

echarts解析如何将echarts柱状图的数据展示在每根柱子的上方；条形图状态下将数据展示在柱子的右侧！

效果如图：


关键代码：

  1. itemStyle: {
  2.     normal: {
  3.         label: {
  4.             show: true, //开启显示
  5.             position: 'top', //在上方显示
  6.             textStyle: { //数值样式
  7.                 color: '#fff',
  8.             }
  9.         }
  10.     }
  11. },
Collapse Code

代码解析：在echarts中提供了对应的参数，在series中加入上方代码即可完成显示。同样的position提供了4个参数，分别为top,left,right,bottom。根据实际情况来使用对应的参数即可。

条形图完整代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="https://cdn.staticfile.org/echarts/4.2.0-rc.2/echarts.min.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="test" style="height: 500px;width: 100%;"></div>
  10.         <script>
  11.             var BarBOX1 = echarts.init(document.getElementById("test"));
  12.             option = {
  13.                 tooltip: {
  14.                     trigger: 'axis',
  15.                     axisPointer: {
  16.                         type: 'shadow'
  17.                     }
  18.                 },
  19.                 legend: {
  20.                     data: ['2011年']
  21.                 },
  22.                 grid: {
  23.                     left: '3%',
  24.                     right: '4%',
  25.                     bottom: '3%',
  26.                     containLabel: true
  27.                 },
  28.                 xAxis: {
  29.                     type: 'value',
  30.                     boundaryGap: [0, 0.01]
  31.                 },
  32.                 yAxis: {
  33.                     type: 'category',
  34.                     data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
  35.                 },
  36.                 series: [{
  37.                     name: '2011年',
  38.                     type: 'bar',
  39.                     data: [18203, 23489, 29034, 104970, 131744, 630230],
  40.                     itemStyle: {
  41.                         normal: {
  42.                             label: {
  43.                                 show: true, //开启显示
  44.                                 position: 'right', //在上方显示
  45.                                 textStyle: { //数值样式
  46.                                     color: '#000',
  47.                                 }
  48.                             }
  49.                         }
  50.                     },
  51.                 }]
  52.             };
  53.             BarBOX1.setOption(option);
  54.         </script>
  55.     </body>
  56. </html>
Collapse Code

柱状图效果完成代码：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script src="https://cdn.staticfile.org/echarts/4.2.0-rc.2/echarts.min.js"></script>
  7.     </head>
  8.     <body>
  9.         <div id="test" style="height: 500px;width: 100%;"></div>
  10.         <script>
  11.             var BarBOX1 = echarts.init(document.getElementById("test"));
  12.             option = {
  13.                 xAxis: {
  14.                     type: 'category',
  15.                     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  16.                 },
  17.                 yAxis: {
  18.                     type: 'value'
  19.                 },
  20.                 series: [{
  21.                     data: [120, 200, 150, 80, 70, 110, 130],
  22.                     itemStyle: {
  23.                         normal: {
  24.                             label: {
  25.                                 show: true, //开启显示
  26.                                 position: 'top', //在上方显示
  27.                                 textStyle: { //数值样式
  28.                                     color: '#000',
  29.                                 }
  30.                             }
  31.                         }
  32.                     },
  33.                     type: 'bar'
  34.                 }]
  35.             };
  36.  
  37.             BarBOX1.setOption(option);
  38.         </script>
  39.     </body>
  40. </html>
Collapse Code

注：关于对数据样式的设置，可以参考官网网站对字体，大小，颜色等进行设置。最终来达到自己需要的样式效果！


铁子们，抗不住了。点点广告可好，感谢您的支持。
六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！