echarts 进度图

最新推荐文章于 2024-04-17 18:00:38 发布

Perferson

最新推荐文章于 2024-04-17 18:00:38 发布

阅读量233

点赞数

文章标签： javascript vue echarts

本文链接：https://blog.csdn.net/nongmai6494/article/details/129397390

版权

该文章展示了一段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>