vue用echarts写环形统计

妖狐艹你老母 2022-10-06 00:53 107阅读 0赞

1.代码

<template>
      <div>
        <el-card class="Ratio-card" shadow="hover">
           
          <div id="myChart" :style="{width: '100%', height: '400px'}"></div>
          <div class="total">总计：{
       {total}}</div>
    
        </el-card>
      </div>
    </template>
    <script>
       
      import * as echarts from 'echarts'
      export default {
        name: 'EconomicRatio',
        components: {
    
        },
        data() {
          return {
            msg: '开销占比',
            dataList: [{
                value: 1548,
                name: '应交人民币'
              },
              {
                value: 310,
                name: '应交支付宝'
              },
              {
                value: 234,
                name: '应交微信'
              },
              {
                value: 135,
                name: '应交信用卡'
              },
              {
                value: 335,
                name: '应交交通卡'
              },
              {
                value: 800,
                name: '应交其他'
              }
            ],
            total: 0,
            datetime: '2021-06',
            // dataList: []
          }
        },
        created() {
          // this.getChartData();
        },
        mounted() {
          this.drawLine();
        },
        methods: {
    
          getChartData() {//接口获取数据
            getList().then(res => {
              console.log(res)
              let data = res.data
              console.log('data', data)
    
              this.dataList = data.list
              console.log(' this.dataList ', this.dataList)
              this.total = data.total
              this.datetime = data.datetime
            })
          },
          drawLine() {
            this.$nextTick(() => {
              // this.getChartData();
              setTimeout(() => {
                console.log(' 挂载时调用数据', this.dataList)
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'))
                const option = {
                  title: {
                    text: this.msg,
                    subtext: this.datetime,
                    left: 'center'
                  },
                  tooltip: {
                    trigger: 'item',
                    // formatter: "{a} <br/>{b}: {c} ({d}%)",
                    formatter: "{b} <br/> {c} ({d}%)",
                  },
                  // color: ['#409EFF', '#67C23A', '#E6A23C', '#f50', '#2db7f5', '#87d068'],
                  legend: {
                    bottom: 0,
                    left: 'center',
                    aling: 'auto',
                    data: this.dataList.name,
                    itemWidth: 15,
                    itemHeight: 15,
                  },
    
                  series: [{
                    name: '访问来源',
                    type: 'pie',
                    center: [150, 180],
                    radius: ['40%', '70%'],
                    tooltip: {
                      show: true
                    },
                    label: {
                      show: false,
                      position: 'center',
                      bottom: 0,
                      // 环形中间显示数值
                      // normal: {
                      //   position: 'center',
                      //   formatter: '{per|{c}}{b|个}\n{a|{b}}\n{hr|}',
                      //   rich: {
                      //     per: {
                      //       color: '#0abffd',
                      //       fontSize: 28,
                      //       lineHeight: 28,
                      //       align: 'center'
                      //     },
                      //     a: {
                      //       color: '#999999',
                      //       align: 'center',
                      //       fontSize: 12
                      //     },
                      //     b: {
                      //       color: '#0abffd',
                      //       fontSize: 12,
                      //       lineHeight: 40,
                      //       align: 'center'
                      //     },
                      //     hr: {
                      //       width: '100%',
                      //       height: 0,
                      //       alien: 'center'
                      //     }
                      //   }
                      // },
    
                    },
                    emphasis: {
                      label: {
                        show: true,
                        fontSize: '16',
                        fontWeight: 'bold'
                      }
                    },
                    labelLine: {
                      show: false
                    },
                    itemStyle: {
                      color: function (params) {
    
                        var colorList = ['#2c3f58', '#4ed139', '#289cf4', '#fdca57', '#ff9e48', '#87d068']
                        return colorList[params.dataIndex];
                      }
                    },
                    data: this.dataList
                  }]
                }
                // 绘制图表
                myChart.setOption(option);
              }, 200)
            })
    
          }
        }
      }
    
    </script>
    
    <style lang='scss' scoped>
      .Ratio-card {
        height: auto;
    
        .total {
          width: 100%;
          padding: 20px;
        }
      }
    
    </style>

2.效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: /images/20221005/23b84d1c484242bbaec826274eb8c052.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: /images/20221005/3ba3b02eede9449cb3c7ad030ce9ab7c.png