v3-lab-web/src/views/safetyCheck/worktable/inspectionStatisticsEcharts.vue

<template>
  <div class="inspectionStatisticsEcharts" id="inspectionStatisticsEcharts-box"></div>
</template>

<script>
  import { checkStatistics } from '@/apiDemo/safetyCheck/index'
  export default {
    name: 'inspectionStatisticsEcharts',
    data(){
      return{

      }
    },
    created(){

    },
    mounted(){
      this.eCharts();
    },
    methods:{
      //eCharts方法
      eCharts(){
        checkStatistics().then(response => {
          let data = {
            name : [],
            standards : [],
            notStandards : [],
          }
          for(let i=0;i<response.rows.length;i++){
            data.name.push(response.rows[i].yearMonth)
            if(response.rows[i].notStandards.indexOf('%') != -1){
              response.rows[i].notStandards = response.rows[i].notStandards.split('%')[0]
              data.notStandards.push(response.rows[i].notStandards)
            }else{
              data.notStandards.push(response.rows[i].notStandards)
            }
            if(response.rows[i].standards.indexOf('%') != -1){
              response.rows[i].standards = response.rows[i].standards.split('%')[0]
              data.standards.push(response.rows[i].standards)
            }else{
              data.standards.push(response.rows[i].standards)
            }
          }
          let myChart = this.$echarts.init(document.getElementById('inspectionStatisticsEcharts-box'));
          let option = {
            //你的代码
            tooltip: {
              show:true,
              trigger: 'axis',
              formatter: function(params) {
                let html = '<div>';
                html += '<p>'+params[0].name+'</p>'
                for(let i=0;i<params.length;i++){
                  html += '<p>'+params[i].marker+'&nbsp'+params[i].seriesName+'&nbsp:&nbsp'+params[i].data+'%<p>'
                }
                return html;
              },
              axisPointer: {
                lineStyle: {
                  color: 'rgb(126,199,255)',
                },
              },
            },
            legend: {
              show: true,
              icon: 'circle',
              itemWidth: 30,
              itemHeight: 10,
              right:20,
              textStyle: {
                color: 'rgba(0, 0, 0, 1)',
                fontSize: 14,
                padding: [0, 8, 0, 8]
              }
            },
            grid: {
              top: '20%',
              left: '10%',
              right: '7%',
              bottom: '15%',
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: 'rgb(41,188,245)',
                  },
                },
                axisLabel: {
                  textStyle: {
                    color: 'rgba(112, 151, 184, 1)',
                    fontSize: 12,
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                data: data.name,
              },
            ],
            yAxis: [
              {
                name: "",
                nameTextStyle: {
                  color: "#fff",
                  fontSize: 12,
                  padding: [0, 60, 0, 0]
                },
                // minInterval: 1,
                type: 'value',
                splitLine: {
                  show: false,
                },
                axisLine: {
                  show: false,
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: 'rgba(112, 151, 184, 1)',
                    fontSize: 14
                  }
                },
                axisTick: {
                  show: false,
                },
              },
            ],
            series: [
              {
                name: '符合',
                type: 'line',
                symbol: 'circle',
                smooth: true,
                lineStyle: {
                  normal: {
                    width: 1,
                    color: '#00AEFF', // 线条颜色
                  },
                },
                showSymbol: false,
                itemStyle: {
                  normal: {
                    color: '#00AEFF',//拐点颜色
                    label: {
                      show: false, //开启显示
                      color: '#fff',
                      position: 'top', //在上方显示
                      formatter: function (res) {
                        console.log('res',res)
                        if (res.value) {
                          return res.value
                        } else {
                          return 0
                        }
                      },
                    },
                  },
                },
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [  // 渐变颜色
                      {
                        offset: 0,
                        color: 'rgba(0,174,255,1)',
                      },
                      {
                        offset: 0.5,
                        color: 'rgba(0,174,255,0.38)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(0,174,255,0)',
                      },
                    ],
                    global: false,
                  },
                },
                data: data.standards,
              },
              {
                name: '不符合',
                type: 'line',
                symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
                smooth: true,
                lineStyle: {
                  normal: {
                    width: 1,
                    color: '#F66F00', // 线条颜色
                  },
                },
                showSymbol: false,
                itemStyle: {
                  normal: {
                    color: '#F66F00',//拐点颜色
                    label: {
                      show: true, //开启显示
                      color: '#fff',
                      position: 'top', //在上方显示
                      formatter: function (res) {
                        if (res.value) {
                          return res.value
                        } else {
                          return 0
                        }
                      },
                    },
                  },
                },
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [  // 渐变颜色
                      {
                        offset: 0,
                        color: 'rgba(246,111,0,1)',
                      },
                      {
                        offset: 0.5,
                        color: 'rgba(246,111,0,0.38)',
                      },
                      {
                        offset: 1,
                        color: 'rgba(246,111,0,0)',
                      },
                    ],
                    global: false,
                  },
                },
                data: data.notStandards,
              }
            ]
          };
          myChart.setOption(option);
        })
      },
    }
  }
</script>

<style scoped>
  .inspectionStatisticsEcharts{
    height:236px;
  }
</style>