MZbigScreen/src/components/oldStatistics/9.vue

<template>
  <div id="myChartold9" style="width: 100%; height: 100%; "></div>
</template>

<script>
    export default {
        //老年人可支配收入统计
        name: "OldPersonIncomeControlCount",
        data() {
          return {
            dataArr: [
              { label: '5000元以下', value: 25 },
              { label: '5000~10000元', value: 50 },
              { label: '10000元以上', value: 25 }
            ],
            colorArr: [
              { color1: '#4625FF', color2: '#6DC0FF' },
              { color1: '#f6a314', color2: '#f4ff81' },
              { color1: '#45ff00', color2: '#8bffbb' }
            ]
          }
        },
        mounted() {
          const seriesArr = [];
          const offset = 30;

          for(let i = 0; i < this.dataArr.length; i++) {
            const d = this.dataArr[i];

            // seriesArr.push({
            //   type: 'pie',
            //   radius: [0, 50],
            //   center: [`${50 - offset + i * offset}%`, '50%'],
            //   labelLine: {
            //     show: false
            //   },
            //   data: [{
            //     value: d.value,
            //     // label: {
            //     //   show: true,
            //     //   position: 'center',
            //     //   formatter:() => {
            //     //     return `${d.value}%`
            //     //   },
            //     //   fontSize: '32',
            //     //   fontWeight: 'bold',
            //     //   color: '#fff'
            //     // },
            //     itemStyle: {
            //       color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
            //         offset: 0,
            //         color: this.colorArr[i].color1
            //       }, {
            //         offset: 1,
            //         color: this.colorArr[i].color2
            //       }])
            //     }
            //   }],
            //   z: 2
            // });

            seriesArr.push({
              type: 'pictorialBar',
              symbol: i == 0 ? `image://${require("../../assets/oldStatistics/37.png")}` : ( i == 1 ? `image://${require("../../assets/oldStatistics/38.png")}` : `image://${require("../../assets/oldStatistics/39.png")}` ),
              symbolSize: [72, 72],
              data: [ { value: 1, symbolPosition: 'start', symbolOffset: [`${i == 0 ? -137 : ( i == 1 ? 0 : 137 )}`, -70] } ],
              label: {
                normal: {
                  show: true,
                  position: "top",
                  offset: [i == 0 ? -135 : ( i == 1 ? 0 : 135 ), i == 0 ? 130 : ( i == 1 ? -30 : 130 )],
                  textStyle: {
                    fontSize: 20,
                    color: '#fff'
                  },
                  formatter: `${d.label}`
                }
              },
              z: 2
            });


            seriesArr.push({
              type: 'pie',
              radius: [58, 78],
              startAngle: '180',
              clockwise: !(i % 2),
              center: [`${50 - 29.5 + i * offset}%`, '46%'],
              labelLine: {
                show: false
              },
              data: [{
                value: d.value / 2,
                label: {
                  show: true,
                  position: 'center',
                  formatter:() => {
                    return `${d.value}%`
                  },
                  fontSize: '26',
                  fontWeight: 'bold',
                  color: '#fff'
                },
                itemStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: this.colorArr[i].color1
                  }, {
                    offset: 1,
                    color: this.colorArr[i].color2
                  }])
                }
              },
              {
                value: 50 - (d.value * 50 / 100).toFixed(1),
                itemStyle: {
                  color: 'rgba(184, 255, 205, 0.1)'
                }
              },
              {
                value: 50,
                itemStyle: {
                  color: "transparent"
                }
              }],
              z: 2
            });
          }

          let myChart = this.$echarts.init(document.getElementById('myChartold9'));
          myChart.setOption({
            xAxis: {
              type: 'category',
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              }
            },
            yAxis: {
              type: 'value',
              max: 200,
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              }
            },
            series: seriesArr
          });
        }
    }
</script>

<style scoped>

</style>