echarts 进度图

该文章展示了一段Vue.js代码,用于在<divid=charts></div>中初始化一个Echarts柱状图。代码详细定义了数据、图表样式和图例格式,以显示系统字典和自定义字典的数量比例。同时,图表具有动态调整大小的功能。
摘要由CSDN通过智能技术生成

 

<template>
  <div class="ratechart">
    <div id="charts" class="chart" ></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      total: 0,
    }
  },
  mounted() {
       this.initBarChart()
  },
  methods: {
    initBarChart() {
        let total=20
       let data= [{name:'系统字典',value:12,color:'#3AA0FF'},{name:'自定义字典',value:8,color:'#C4E2FF'}]
      this.total = total
      let formatSeries = () => {
        let arr = []
        data.forEach((item, i) => {
          arr.push({
            name: item.name,
            stack: 'total',
            type: 'bar',
            barWidth: 10,
            animationDuration: 1500,
            data: [
              {
                value: ((item.value / total) * 100).toFixed(2),
                name: item.value,
              },
            ],
            align: 'center',
            itemStyle: {
              normal: { color: item.color },
            },
            label: {
              show: false,
            },
          })
        })

        return arr
      }
      let formatLegend = () => {
        let arr = []
        data.forEach((item, i) => {
          arr.push({
            formatter: (name) => {
              return `${item.name}  {fat|${item.value}}`
            },
            textStyle: {
              fontSize: 14,
              color: '#8C8C8C',
              rich: {
                fat: {
                  fontWeight: 600,
                  color: '#262626',
                  fontSize: 14,
                },
              },
            },
            data: [item.name],
            itemWidth: 8,
            bottom: '30%',
            icon: 'circle',
          })
          if (i == 0) {
            arr[0].left = 0
          }
          if (i == 1) {
            arr[1].right = 0
          }
          if (i == 2) {
            arr[2].bottom = '0%'
            arr[2].left = '0%'
          }
        })
        return arr
      }
      let myChart = echarts.init(document.getElementById('charts'))
      let option = {
        tooltip: {
          formatter: (val) => {
            return `${val.seriesName}<br />数量:${val.name}&emsp;占比:${val.value}%`
          },
        },
        legend: formatLegend(),
        xAxis: {
          show: false,
          max: 100,
        },
        grid: {
          left: 0,
          right: 0,
          top: '15%',
        },
        yAxis: {
          type: 'category',
          show: false,
        },
        series: formatSeries(),
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  },
}
</script>

<style lang="less" scoped>
.ratechart {
  .chart {
    height: 105px;
  }
}
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值