mzBigScreen/src/components/index/8.vue

<template>
  <div id="myChartindex8" 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: '67%',
              center: [`${obj.center_x}%`, `${obj.center_y}%`],
              outline: {
                show: false
              },
              backgroundStyle: {
                borderWidth: 0,
                color: "transparent"
              },
              waveAnimation: false, // 禁止左右波动
              label: {
                normal: {
                  position: ['50%', '53%'],
                  textStyle: {
                    fontSize: this.fontSize(0.20),
                    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');
              console.log(result,"0000");
              this.data1 = result.data1;
              this.data2 = result.data2;
              this.data3 = result.data3;
              this.data4 = result.data4;

              const seriesArr = [];

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


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

              this.myChart = this.$echarts.init(document.getElementById('myChartindex8'));
              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
              });
          },
          fontSize(res) {
            let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            if (!clientWidth) return;
            let fontSize = 100 * (clientWidth / 1920);
            return res * fontSize;

          }
        },
        mounted() {
          // this.draw();
        }
    }
</script>

<style scoped>

</style>