前端绘制一个关于好评和投诉的仪表盘分数和百分比占比显示

---

一、效果图

二、使用

1. 通过 npm 安装 ECharts:

    npm install echarts --save
   

2. 安装完成以后，可以将 echarts引入页面，这样我们就可以在该页面使用 echarts 所有组件

    import * as echarts from "echarts"
   

3. 下面是代码，注意分辨哪些是自己需要的部分，不需要的直接删除。

<template>
  <div class="container_main">
 	<div class="container_main_Class">
      <div class="chartClass">
        <div class="leftClass">
          <div class="spanClass">
            <span>{{ dataMap2.goodValue }}&nbsp;次</span>
          </div>
          <div class="spanClass">
            <span>好评/默认好评</span>
          </div>
        </div>
        <div class="centerClass" ref="myChart"></div>
        <div class="rightClass">
          <div class="spanClass">
            <span>{{ dataMap2.warnValue }}&nbsp;次</span>
          </div>
          <div class="spanClass">
            <span>投诉举报</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import  * as echarts  from 'echarts'
export default {
  name: "part4",
  data(){
    return{
      myChart:null,
      dataMap2:{
        goodValue:Math.ceil(Math.random()* 1000),
        warnValue:Math.ceil(Math.random()* 1000),
        df:Math.ceil(Math.random()* 10),
      }
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    async init(){
      if (this.myChart) {
        this.myChart.dispose()
      }
      this.$nextTick(()=>{
        this.drawChart(this.dataMap2)
      })
    },
    drawChart(dataMap){
      this.myChart = echarts.init(this.$refs.myChart)
      let goodValuebl = ((dataMap.goodValue / (dataMap.goodValue+dataMap.warnValue))*100).toFixed(2)
      let df = dataMap.df
      let colorSet = {
        color: '#468EFD'
      };
      let colorA =  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: '#5CF9FE' // 0% 处的颜色
      },
        {
          offset: 0.17,
          color: '#5CF9FE' // 100% 处的颜色
        },
        {
          offset: 0.95,
          color: '#468EFD' // 100% 处的颜色
        },
        {
          offset: 1,
          color: '#468EFD' // 100% 处的颜色
        }
      ])
      let option = {
        title: [
          {
            show: true,
            text: "得分：" + df + "分",
            offsetCenter: [0, 0], // x, y，单位px
            bottom: 10,
            left:'center',
            textStyle: {
              color: '#fff',
              fontSize: 18, //表盘上的标题文字大小
              fontWeight: 400,
              fontFamily:'SourceHanSansCN-Bold',
            }
          },
        ],
        series: [
          {
            name: "内部进度条",
            type: "gauge",
            center: ['50%', '80%'],
            radius: '85%',
            startAngle: 180,
            endAngle: 0,
            splitNumber: 10,
            max: 100,
            axisLine: {
              lineStyle: {
                color: [
                  [goodValuebl / 100, colorA],
                  [1, "#ff7373"]
                ],
                width: 14
              }
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,

            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              show:false,
              formatter: function(value) {
                return value + "%"
              },
              offsetCenter: [0, 82],
              textStyle: {
                padding: [0, 0, 0, 0],
                fontSize: 18,
                fontWeight: '700',
                color: colorSet.color
              }
            },
            data: [goodValuebl],
            pointer: {
              show: false,
              length: '75%',
              radius: '20%',
              width: 1, //指针粗细
            },
          },
          {
            name: '外部刻度',
            type: 'gauge',
            center: ['50%', '80%'],
            radius: '100%',
            startAngle: 180,
            endAngle: 0,
            min: 0, //最小刻度
            max: 10, //最大刻度
            splitNumber: 10, //刻度数量
            axisLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(0,0,0,0)']
                ]
              }
            }, //仪表盘轴线
            axisLabel: {
              show: true,
              color: '#7dd1ff',
              distance: -15,
              formatter: function(v) {
                switch (v + '') {
                  case '0':
                    return '0';
                  case '1':
                    return '1';
                  case '2':
                    return '2';
                  case '3':
                    return '3';
                  case '4':
                    return '4';
                  case '5':
                    return '5';
                  case '6':
                    return '6';
                  case '7':
                    return '7';
                  case '8':
                    return '8';
                  case '9':
                    return '9';
                  case '10':
                    return '10';
                }
              }
            }, //刻度标签。
            axisTick: {
              show: true,
              lineStyle: {
                color: colorSet.color,
                width: 1
              },
              length: -8
            }, //刻度样式
            splitLine:{
              show: true,
              lineStyle: {
                color: colorSet.color,
                width: 1
              },
              length: -8
            }, //分隔线样式
            detail: {
              show: false
            },
            animationDuration: 4000,
            pointer: {
              show: true,
              length: '75%',
              radius: '20%',
              itemStyle: {
                color: '#7dd1ff',
              },
              width: 2, //指针粗细
            },
            data: [df],

          },
        ]
      }
      this.myChart.setOption(option)
    },
  }
}
</script>

<style scoped lang="less">
.container_main{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 602px;
  height: 920px;
  .container_main_Class{
    width: 550px;
    height: 830px;
    margin: auto;
    margin-top: 18px;
    //background: red;
  }
  
  .chartClass{
    width: 100%;
    height: 210px;
    display: flex;
    justify-content: space-between;
    background: rgba(7,90,255,0.1);
    .leftClass{
      width: 140px;
      height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      .spanClass{
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        text-align: right;
        span{
          font-weight: bold;
          background-image: linear-gradient(to bottom, #00d4ff, #02ffc0);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
    .centerClass{
      width: 250px;
      height: 100%;
      //background: #13c2c2;
    }
    .rightClass{
      width: 140px;
      height: 180px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      .spanClass{
        height: 30px;
        line-height: 30px;
        font-size: 18px;
        text-align: left;
        span{
          font-weight: bold;
          background-image: linear-gradient(to bottom, #ff0000, #ff7373);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }
  }
}
</style>