首页 > 其他分享 >vue中实现echarts的横向百分比

vue中实现echarts的横向百分比

时间:2023-01-10 15:12:49浏览次数:42  
标签:百分比 false show true data level vue type echarts

<ele-chart
              ref="visitChart3"
              style="height: 80px"
              :option="totalparts"
            />

 computed: {
      // 柱状图
      totalparts() {
        return {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器,坐标轴触发有效
              type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
            }
          },
          // legend: {
          //   data: ['P-level', 'E-level', 'Q-level']
          // },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '2%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false
          },
          yAxis: {
            type: 'category',
            data: [''],
            //隐藏坐标线
            axisLine: {
              show: false
            },
            //隐藏刻度线
            axisTick: {
              show: false
            }
          },
          series: [
            {
              name: 'P-level',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
                formatter: '{c}%'
              },
              itemStyle: {
                color: '#2379F9'
              },
              data: [30]
            },
            {
              name: 'E-level',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
                formatter: '{c}%'
              },
              itemStyle: {
                color: '#61B2FC'
              },
              data: [50]
            },
            {
              name: 'Q-level',
              type: 'bar',
              stack: 'total',
              label: {
                show: true,
                formatter: '{c}%'
              },
              itemStyle: {
                color: '#23D4A1'
              },
              data: [20]
            }
          ]
        };
      }
    },

activated() {
      this.getTableData();
      this.$refs['visitChart3'].resize();
    },

export default {
    components: {
      EleChart
    },
    data() {
      return {}
}	
}


import EleChart from 'ele-admin/packages/ele-chart';

  

标签:百分比,false,show,true,data,level,vue,type,echarts
From: https://www.cnblogs.com/Ao-min/p/17040370.html

相关文章