更多进度条效果实例

vue 数据可视化大屏进度条效果实例

组件代码

drawLine () {
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var category = [
        {
          name: '出差审批',
          value: 600
        },
        {
          name: '公务接待',
          value: 600
        },
        {
          name: '其他事项',
          value: 600
        }
      ] // 类别
      var total = 1000 // 数据总数
      var datas = []
      category.forEach(value => {
        datas.push(value.value)
      })
      var option = {
        xAxis: {
          max: total,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: {
          left: '5%',
          top: 20, // 设置条形图的边距
          right: '5%',
          bottom: 20
        },
        yAxis: [{
          type: 'category',
          inverse: false,
          data: category,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 0,
            margin: 0,
            align: 'left',
            padding: [-50, 0, 0, 0],
            formatter: function (value, index) {
              return category[index].name
            },
            textStyle: {
              color: '#ffffff',
              fontSize: 14
            }
          }
        }],
        series: [
          {
            type: 'bar',
            barWidth: 10,
            legendHoverLink: false,
            silent: true,
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(68, 98, 225, 1)' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: 'rgba(87, 241, 255, 1)' // 100% 处的颜色
                  }
                  ]
                }
              }
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                // formatter: '{c}',
                formatter: function (value) {
                  console.log(value)
                  var text
                  text = '{a|办结数：}{f|' + value.value + '}'
                  return text
                },
                rich: {
                  a: {
                    color: 'rgba(170, 185, 208, 1)',
                    fontFamily: 'DINCond',
                    fontSize: 14
                  },
                  f: {
                    color: 'rgba(0, 202, 253, 1)',
                    fontFamily: 'DINCond',
                    fontSize: 14
                  }
                },
                textStyle: {
                  color: '#fff',
                  fontSize: 14,
                  padding: [-45, 0, 0, -80]
                }
              }
            },
            data: category,
            z: 1,
            animationEasing: 'elasticOut'
          },
          {
            type: 'pictorialBar',
            barGap: '-150%', // 设置外框粗细
            symbolBoundingData: total,
            itemStyle: {
              normal: {
                color: 'none'
              }
            },
            label: {
              normal: {
                position: 'right',
                distance: 0, // 向右偏移位置
                show: false
              }
            },
            data: datas,
            z: 0,
            animationEasing: 'elasticOut'
          },
          {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
              normal: {
                color: '#061348'
              }
            },
            symbolRepeat: 'fixed',
            symbolMargin: 6,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [1, 16],
            symbolPosition: 'start',
            symbolOffset: [1, -1],
            symbolBoundingData: this.total,
            data: category,
            z: 2,
            animationEasing: 'elasticOut'
          },
          {
            name: '外框',
            type: 'bar',
            barGap: '-130%', // 设置外框粗细
            data: [total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total],
            barWidth: 16,
            itemStyle: {
              normal: {
                color: 'transparent', // 填充色
                barBorderColor: '#1C4B8E', // 边框色
                barBorderWidth: 1, // 边框宽度
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: 'right' // insideTop 或者横向的 insideLeft
                }
              }
            },
            z: 0
          }
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    }

项目应用

vue 数据可视化大屏 财务管理数字内控平台