MZbigScreen/src/components/oldStatistics/4.vue

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

<script>
    export default {
        //老年人能力评估统计
        name: "OldPersonAbilityCount",
        data() {
          return {
            dataArr: [
              { label: '完全自理', value: 25 },
              { label: '半失能', value: 38 },
              { label: '失能', value: 37 }
            ],
            colorArr: [
              { color1: '#ff0900', color2: '#ff7367' },
              { color1: '#4625FF', color2: '#6DC0FF' },
              { color1: '#f6a314', color2: '#f4ff81' }
            ]
          }
        },
        mounted() {
          const seriesArr = [{
            type: 'pictorialBar',
            symbol: `image://${require('../../assets/oldStatistics/r.png')}`,
            symbolSize: [53, 68],
            data: [{ value:  200, symbolPosition: 'center', symbolOffset: [0, 0]}],
            z: 2
          }];

          seriesArr.push({
            type: 'pie',
            radius: [70,85],  //内部经 外半径
            center: ['30%', '50%'],
            clockwise: false,
            labelLine: {
              show: false
            },
            data: [{
              name: '失能',
              value: this.dataArr[2].value,
              label: {
                show: false
              },
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: this.colorArr[2].color1
                }, {
                  offset: 1,
                  color: this.colorArr[2].color2
                }])
              }
            },
            {
              name: '半失能',
              value: this.dataArr[1].value,
              label: {
                show: false
              },
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: this.colorArr[1].color1
                }, {
                  offset: 1,
                  color: this.colorArr[1].color2
                }])
              }
            },
            {
              value: 100 - this.dataArr[1].value - this.dataArr[2].value,
              itemStyle: {
                color: "transparent"
              }
            }],
            z: 2
          });

          seriesArr.push({
            name: '完全自理',
            type: 'pie',
            radius: [70, 85],  //内部经 外半径
            center: ['30%', '49%'],
            clockwise: true,
            labelLine: {
              show: false
            },
            data: [{
              value: this.dataArr[0].value,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: this.colorArr[0].color1
                }, {
                  offset: 1,
                  color: this.colorArr[0].color2
                }])
              }
            },
            {
              value: 100 - this.dataArr[0].value,
              itemStyle: {
                color: "transparent"
              }
            }],
            z: 2
          });

          seriesArr.push({
            type: 'pie',
            radius: [97, 100],  //内部经 外半径
            center: ['30%', '49%'],
            clockwise: true,
            labelLine: {
              show: false
            },
            data: [{
              name: '完全自理',
              value: this.dataArr[0].value,
              label: {
                show: false
              },
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: this.colorArr[0].color1
                }, {
                  offset: 1,
                  color: this.colorArr[0].color2
                }])
              }
            },
            {
              value: 100 - this.dataArr[0].value,
              itemStyle: {
                color: "transparent"
              }
            }],
            z: 2
          });

          let myChart = this.$echarts.init(document.getElementById('myChartold4'));
          myChart.setOption(
            {
              grid:{
                right:"50%",
              },
              color: [this.colorArr[0].color1, this.colorArr[1].color1, this.colorArr[2].color1],
              legend: {
                show: true,
                orient: 'vertical',
                top: 'middle',
                right: '220',
                itemGap: 70,
                itemWidth: 13,
                itemHeight: 13,
                data: ['完全自理', '半失能', '失能'],
                  textStyle: {
                    color: 'white',
                  },
              },
              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>