MZbigScreen/src/components/index/5.vue

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

<script>
    import { fourquan } from '../../api'

    import 'echarts-liquidfill'
    export default {
        name: "OperationAnalysisCount",
        data() {
          return {
            data1: { label: '巡访平均周期', value: '3.5天' },
            data2: { label: '子女绑定占比', value: '60%' },
            data3: { label: '积分存量', value: 123156 },
            data4: { label: '兑换比例', value: '60%' },
            colorArr: [
              { color1: '#ff8d00', color2: '#FFF43F' },
              { color1: '#5fff06', color2: '#B4FF9F' },
              { color1: '#60b8db', color2: '#afd3ff' },
              { color1: '#ff00e8', color2: '#f48fff' }
            ],
            myChart: null
          }
        },
        methods: {
          handlerData(val) {
            const length = String(parseInt(val)).length;
            let r = 1;
            if(length != 0) {
              r = r + new Array(length).fill(0).join('');
            }
            return (parseInt(val) / parseInt(r)).toFixed(2);
          },
          createLiquidfill(obj) {
            return {
              type: 'liquidFill',
              data: [obj.value],
              radius: '30%',
              center: [`${obj.center_x}%`, `${obj.center_y}%`],
              outline: {
                show: false
              },
              backgroundStyle: {
                borderWidth: 0,
                color: "transparent"
              },
              waveAnimation: false, // 禁止左右波动
              label: {
                normal: {
                  position: ['50%', '53%'],
                  textStyle: {
                    fontSize: 24,
                    color: '#fff'
                  },
                  formatter: `${ obj.text }`
                }
              },
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: this.colorArr[obj.index].color1},
                      {offset: 1, color: this.colorArr[obj.index].color2}
                    ]
                  )
                }
              }
            };
          },
          createCircleImage(){

          },
          async draw() {
              const result = await fourquan({}, 'POST');
              this.data1 = result.data1;
              this.data2 = result.data2;
              this.data3 = result.data3;
              this.data4 = result.data4;

              const seriesArr = [];

              const liquidFill1 = this.createLiquidfill({ index: 0, center_x: 13, center_y: 30, text: this.data1.value, value: this.handlerData(this.data1.value) });
              seriesArr.push(liquidFill1);

              const liquidFill2 = this.createLiquidfill({ index: 1, center_x: 53, center_y: 28, text: this.data2.value + '%', value: this.handlerData(this.data2.value + '%') });
              seriesArr.push(liquidFill2);

              const liquidFill3 = this.createLiquidfill({ index: 2, center_x: 13, center_y: 75, text: this.data3.value, value: this.handlerData(this.data3.value) });
              seriesArr.push(liquidFill3);

              const liquidFill4 = this.createLiquidfill({ index: 3, center_x: 53, center_y: 75, text: this.data4.value, value: this.handlerData(this.data4.value) });
              seriesArr.push(liquidFill4);

              seriesArr.push({
                  type: 'pictorialBar',
                  symbol: `image://${require('../../assets/index/liquidfill-1-circle.png')}`,
                  symbolSize: [102, 102],
                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [10, -100] }, {}],
                  label: {
                      show: true,
                      position: 'top',
                      offset: [-80, -80],
                      color: '#fff',
                      fontSize: 16,
                      formatter: '巡访平均周期'
                  },
                  z: 2
              });

              seriesArr.push({
                  type: 'pictorialBar',
                  symbol: `image://${require('../../assets/index/liquidfill-1-line.png')}`,
                  symbolSize: [62, 5],
                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [120, -60] }, {}],
                  label: {
                      show: true,
                      position: 'top',
                      offset: [-90, -45],
                      color: this.colorArr[0].color1,
                      fontSize: 16,
                      formatter: this.data1.value
                  },
                  z: 2
              });

              seriesArr.push({
                  type: 'pictorialBar',
                  symbol: `image://${require('../../assets/index/liquidfill-2-circle.png')}`,
                  symbolSize: [102, 102],
                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [230, -100] }, {}],
                  label: {
                      show: true,
                      position: 'top',
                      offset: [140, -80],
                      color: '#fff',
                      fontSize: 16,
                      formatter: '子女绑定占比'
                  },
                  z: 2
              });

              seriesArr.push({
                  type: 'pictorialBar',
                  symbol: `image://${require('../../assets/index/liquidfill-2-line.png')}`,
                  symbolSize: [62, 5],
                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [340, -60] }, {}],
                  label: {
                      show: true,
                      position: 'top',
                      offset: [130, -45],
                      color: this.colorArr[1].color1,
                      fontSize: 16,
                      formatter: `${this.data2.value}%`
                  },
                  z: 2
              });

              seriesArr.push({
                  type: 'pictorialBar',
                  symbol: `image://${require('../../assets/index/liquidfill-3-circle.png')}`,
                  symbolSize: [102, 102],
                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [10, 30] }, {}],
                  label: {
                      show: true,
                      position: 'top',
                      offset: [-90, 55],
                      color: '#fff',
                      fontSize: 16,
                      formatter: '积分存量'
                  },
                  z: 2
              });

              seriesArr.push({
                  type: 'pictorialBar',
                  symbol: `image://${require('../../assets/index/liquidfill-3-line.png')}`,
                  symbolSize: [62, 5],
                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [120, 70] }, {}],
                  label: {
                      show: true,
                      position: 'top',
                      offset: [-90, 90],
                      color: this.colorArr[2].color1,
                      fontSize: 16,
                      formatter: `${this.data3.value}`
                  },
                  z: 2
              });

              seriesArr.push({
                  type: 'pictorialBar',
                  symbol: `image://${require('../../assets/index/liquidfill-4-circle.png')}`,
                  symbolSize: [102, 102],
                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [230, 30] }, {}],
                  label: {
                      show: true,
                      position: 'top',
                      offset: [130, 55],
                      color: '#fff',
                      fontSize: 16,
                      formatter: '兑换比例'
                  },
                  z: 2
              });

              seriesArr.push({
                  type: 'pictorialBar',
                  symbol: `image://${require('../../assets/index/liquidfill-4-line.png')}`,
                  symbolSize: [62, 5],
                  data: [{ value: 100, symbolPosition: 'start', symbolOffset: [340, 70] }, {}],
                  label: {
                      show: true,
                      position: 'top',
                      offset: [130, 90],
                      color: this.colorArr[3].color1,
                      fontSize: 16,
                      formatter: `${this.data4.value}`
                  },
                  z: 2
              });

              if(this.myChart != null) {
                  this.myChart.clear();
              }

              this.myChart = this.$echarts.init(document.getElementById('myChartindex5'));
              this.myChart.setOption({
                  grid:{
                      left:"2%"
                  },
                  xAxis: {
                      type: 'value',
                      max: 100,
                      splitLine: {
                          show: false
                      },
                      axisLine: {
                          show: false
                      },
                      axisLabel: {
                          show: false
                      },
                      axisTick: {
                          show: false
                      }
                  },
                  yAxis: {
                      type: 'category',
                      splitLine: {
                          show: false
                      },
                      axisLine: {
                          show: false
                      },
                      axisLabel: {
                          show: false
                      },
                      axisTick: {
                          show: false
                      }
                  },
                  series: seriesArr
              });
          }
        },
        mounted() {
          this.draw();
        }
    }
</script>

<style scoped>

</style>