devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

echarts——实现大屏数据展示——基础积累（超详细）_echarts大屏

作者：人工智能uu | 2024-06-29 15:04:28

赞

踩

echarts大屏

echarts——实现大屏数据展示

echarts——实现大屏数据展示——柱状图+堆叠柱状图+table表格等功能的使用

最近在做大屏数据展示，样式真的超级好看。但是细节处理也是比较麻烦的。

最终效果图如下：
在这里插入图片描述

下面对我遇到的几个知识点进行汇总：

1. 横向的柱状图——设置yAxis的type为category即可

在这里插入图片描述

var option = {
   title: {
       text: ''
   },
   tooltip: {
       trigger: 'axis',
       axisPointer: {
           type: 'shadow'
       }
   },
   grid: {
       left: '-80',
       right: '40',
       bottom: '0',
       top: '10',
       containLabel: true
   },
   xAxis: {
       type: 'value',
       show: false,
       boundaryGap: [0, 0.01]
   },
   yAxis: {
       type: 'category',
       show: false,
   },
   series: [
       {
           name: '',
           type: 'bar',
           data: data,
           color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
               {
                   offset: 0,
                   color: 'transparent'
               },
               {
                   offset: 1,
                   color: '#f90'
               }
           ]),
           label: {
               normal: {
                   show: true,
                   position: 'right',
                   formatter: '{c}',
                   color: '#fff'
               }
           },
           barWidth: 20,
       }
   ]
};
dom.setOption(option);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

下面详细解析：

1.1 标题——title

title: {
   text: '',//主标题
   subText:'',//副标题
},

  • 1
  • 2
  • 3
  • 4

1.2 输入移入的效果——tooltip

下面是最简单的效果了，如果需要复杂的效果，需要单独设置

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    }
},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

1.3 网格的间距——grid

grid: {
    left: '-80',
    right: '40',
    bottom: '0',
    top: '10',
    containLabel: true
},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

1.4 X轴：隐藏坐标轴——xAxis

xAxis: {
    type: 'value',
    show: false,//隐藏x轴
    boundaryGap: [0, 0.01]
},

  • 1
  • 2
  • 3
  • 4
  • 5

1.5 Y轴：设置横向柱状图样式并隐藏坐标轴——yAxis

yAxis: {
    type: 'category',
    show: false,
},

  • 1
  • 2
  • 3
  • 4

1.6 渐变色：设置series中的color参数即可

series: [
    {
        name: '',
        type: 'bar',
        data: data,
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
                offset: 0,
                color: 'transparent'
            },
            {
                offset: 1,
                color: '#f90'
            }
        ]),
        label: {
            normal: {
                show: true,
                position: 'right',
                formatter: '{c}',
                color: '#fff'
            }
        },
        barWidth: 20,
    }
]

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

最终效果图：
在这里插入图片描述

2. 堆叠柱状图——设置series中的stack: 'xxxx'即可

在这里插入图片描述
堆叠柱状图：只要series中的stack参数一样，则就可以自动堆叠在一起

2.1 实现堆叠效果

注意：下面代码中的data和color都是数组或者对象，因为要实现堆叠效果，则至少要有两组数据才可以。

比如现在的data格式如下：

data:{
	'7-14天':[11,22,33,44,55,66,77,88],
	'15-30天':[111,222,333,444,555,666,777,888],
	'>30天':[1111,2222,3333,4444,5555,6666,7777,8888]
}

  • 1
  • 2
  • 3
  • 4
  • 5
for(let key in data){
	series.push({
	   name: key,
	   data: data[key],
	   type: 'bar',
	   color: color[key],
	   stack: 'total',
	   barWidth: 40,
	})
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

上面的效果就可以实现堆叠了，但是如果要实现如效果图中的label上下摆放展示的话，则需要用下面的方式来处理

2.2 label的自定义处理——formatter和rich的处理

label:{
  normal: {
      show: key == 2 ? true : false,
      position: 'top',
      color:'#fff',
      formatter: function (val) {
          let html = `${val.name}\n`;
          if (val.value) {
              html += `{fourIcon|}{four|${val.value}}\n`;
          }
          if (data[1][val.dataIndex]) {
              html += `{twoIcon|}{two|${data[1][val.dataIndex]}}\n`
          }
          if (data[0][val.dataIndex]) {
              html += `{oneIcon|}{one|${data[0][val.dataIndex]}}`
          }
          return html;
      },
      lineHeight: 16,
      backgroundColor: '#002262',
      padding: 10,
      borderRadius: 6,
      rich: {
          one: { color: '#fff', align: 'center', fontSize: 14,},
          two: { color: '#fff', align: 'center',fontSize:14 },
          three: { color: '#fff', align: 'center', fontSize:14 },
          four: { color: '#fff', align: 'center', fontSize: 14 },
          oneIcon: {
              height: 10,
              align: 'left',
              width: 10,
              borderRadius: 10,
              backgroundColor: '#3CDE81',
              margin: [0,10],
          },
          twoIcon: {
              height: 10,
              align: 'left',
              width: 10,
              borderRadius: 10,
              backgroundColor: '#f90',
              margin: [0, 10],
          },
          fourIcon: {
              height: 10,
              align: 'left',
              width: 10,
              borderRadius: 10,
              backgroundColor: '#f00',
              margin: [0, 10],
          }
      }
  }
},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54

3.警戒线——markLine的使用及双坐标轴的处理

在这里插入图片描述

3.1 双坐标轴 需要通过yAxisIndex来设置

一般双坐标轴的话，需要yAxis和series都是数组的形式。然后在series中指定yAxisIndex为对应yAxis的索引即可。

我这边是循环遍历的数组，所以部分代码如下：

series.push({
  name: legend ? legend[index] : '',
  data: item,
  type: num ? 'bar' : (index < 2 ? 'bar' : 'line'),
  yAxisIndex: index,
  barGap: 1.1,
  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
      {
          offset: 0,
          color: 'transparent'
      },
      {
          offset: 0.5,
          color: color[index]
      }
  ]),
  markLine: markLineArr && index == 0 ? {
      symbol: 'none',
      data: [
          { yAxis: markLineArr[0], lineStyle: { color: '#00FF55', type: 'solid' }, label: { color: '#00FF55', fontSize: 14, position: 'start' } }]
  } : (markLineArr && index == 1 ? {
      symbol: 'none',
      data: [
          { yAxis: markLineArr[1], lineStyle: { color: '#FF0000', type: 'solid' }, label: { color: '#FF0000', fontSize: 14, position: 'end' } }]
  } : {}),
  label: {
      normal: {
          show: true,
          position: 'top',
          formatter: '{c}',
          color: '#fff'
      }
  },
  symbol: 'none',
  smooth: true,
  barWidth: 20,
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37

3.2 警戒线markLine的处理方法

在这里插入图片描述
如上的效果图：左侧坐标轴对应一条警戒线，绿色。右侧坐标轴对应一条警戒线，红色，因此需要单独判断并对颜色样式进行处理。

markLine: markLineArr && index == 0 ? {
    symbol: 'none',
    data: [
        { yAxis: markLineArr[0], lineStyle: { color: '#00FF55', type: 'solid' }, label: { color: '#00FF55', fontSize: 14, position: 'start' } }]
} : (markLineArr && index == 1 ? {
    symbol: 'none',
    data: [
        { yAxis: markLineArr[1], lineStyle: { color: '#FF0000', type: 'solid' }, label: { color: '#FF0000', fontSize: 14, position: 'end' } }]
} : {}),

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

4.动态轮播数据——一条一条的轮播展示

setInterval(function () {
  xAxis.shift();
  data.forEach((item, index) => {
      item.shift();
  })
  sum += 1;
  if (xAxisArr[sum]) {
      xAxis.push(xAxisArr[sum])
      data.forEach((item, index) => {
          item.push(
              dataArr[index][sum]
          );
      })
  } else {
      sum = 0;
      xAxis.push(xAxisArr[sum])
      data.forEach((item, index) => {
          item.push(
              dataArr[index][sum]
          );
      })
  }
  let series = [];
  data.forEach(item => {
      series.push({
          data: item
      })
  })
  dom.setOption({
      xAxis: {
          data: xAxis
      },
      series: series
  });
}, 10000);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

间隔一定时间，series和xAxis的数据，开头shift()删除一项，后面push添加一项，然后通过setOption来设置，就会实现动态轮播的效果，按说一次轮播多条也是可以的，但是我这边没有实现，二维数组搞得我有点懵。

5.table表格中的单元格回根据内容的多少进行撑开，禁止撑开的方法

table{
	width: 100%;
    table-layout:fixed;
}

  • 1
  • 2
  • 3
  • 4

完成！！！多多积累，多多收获！！！

下面为补充内容，可忽略！！！

  1. y轴上方有个单位：个,这个可以通过y轴设置参数中添加一个name来实现，还有位置设置
  2. x轴和y轴的刻度线隐藏，坐标轴颜色和文字颜色设置，柱状图区域背景线为虚线
  3. 柱状图形有圆角，且两个柱子之间有间距
  4. y轴上方有个单位：个,这个可以通过y轴设置参数中添加一个name来实现，还有位置设置
 yAxis: {
   type: 'value',
   name: '单位：个',
   nameTextStyle: {
       color: "#1A1A1A",
       padding:[0,-60,0,0],
   },
   axisLabel: {
       textStyle: {
           color: '#999999'
       }
   },
   axisLine: {
       lineStyle: {
           type: 'solid',
           color: '#CCCCCC'
       }
   },
   axisTick: {
       show: false
   },
   splitLine: {
       show: true,
       lineStyle: {
           type:'dashed'
       }
   }
},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

1.上面代码中的name就是单位，nameTextStyle可以设置name的颜色和位置。padding有四个参数，可以测试一下，就知道该用哪几个参数了

name: '单位：个',
nameTextStyle: {
    color: "#1A1A1A",
    padding:[0,-60,0,0],
},


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

2. x轴和y轴的刻度线隐藏，坐标轴颜色和文字颜色设置

以y轴为例

 yAxis: {
   type: 'value',
   name: '单位：个',
   nameTextStyle: {
       color: "#1A1A1A",
       padding:[0,-60,0,0],
   },
   axisLabel: {
       textStyle: {
           color: '#999999'
       }
   },
   axisLine: {
       lineStyle: {
           type: 'solid',
           color: '#CCCCCC'
       }
   },
   axisTick: {
       show: false
   },
   splitLine: {
       show: true,
       lineStyle: {
           type:'dashed'
       }
   }
},


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

坐标轴文字设置

axisLabel: {
    textStyle: {
        color: '#999999'
    }
},

  • 1
  • 2
  • 3
  • 4
  • 5

坐标轴线设置

 axisLine: {
    lineStyle: {
        type: 'solid',
        color: '#CCCCCC'
    }
},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

坐标轴刻度线设置

axisTick: {
    show: false,//隐藏，不显示
},

  • 1
  • 2
  • 3

设置柱状图区域背景为虚线

splitLine: {
    show: true,
    lineStyle: {
        type:'dashed'
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3.柱状图形有圆角，且两个柱子之间有间距

series:[{
	data: [120, 700, 150, 480, 70, 110, 130],
    type: 'bar',
    barGap:0.5,
    label: {
        normal: {
            show: true,
            position:'top',
            formatter:'{c}'
        }
    },
    barWidth: 12,
    itemStyle: {
        normal: {
            barBorderRadius: [6],
        }
    }
}]

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

展示数值

label: {
    normal: {
        show: true,
        position:'top',
        formatter:'{c}'
    }
},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

设置柱子的宽度

barWidth: 12,

  • 1

设置柱子圆角

itemStyle: {
    normal: {
        barBorderRadius: [6],
    }
}

  • 1
  • 2
  • 3
  • 4
  • 5

设置两个柱子之间的间距

barGap:0.5,

  • 1
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/人工智能uu/article/detail/769545
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号