Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Verwirklichen Sie den Legendeneffekt

So erhalten Sie den Maximalwert:

    maxSecond(array) {
      let max = Number.MIN_SAFE_INTEGER;
      for (let i = 0; i < array.length; i++) {
        const secondElement = parseInt(array[i][1]);
        if (secondElement > max) {
          max = secondElement;
        }
      }
      return max;
    },

Holen Sie sich den Maximalwertindex:

    maxSecondIndex(array) {
      let max = Number.MIN_SAFE_INTEGER;
      let maxIndex = -1;
      for (let i = 0; i < array.length; i++) {
        const secondElement = parseInt(array[i][1]);
        if (secondElement > max) {
          max = secondElement;
          maxIndex = i;
        }
      }
      return maxIndex;
    },

Holen Sie sich die Minimalwertmethode:

    minSecond(array) {
      let min = Number.MAX_SAFE_INTEGER;
      for (let i = 0; i < array.length; i++) {
        const secondElement = parseInt(array[i][1]);
        if (secondElement < min) {
          min = secondElement;
        }
      }
      return min;
    },

Ermitteln Sie den Mindestwertindex:

    minSecondIndex(array) {
      let min = Number.MAX_SAFE_INTEGER;
      let minIndex = -1;
      for (let i = 0; i < array.length; i++) {
        const secondElement = parseInt(array[i][1]);
        if (secondElement < min) {
          min = secondElement;
          minIndex = i;
        }
      }
      return minIndex;
    },

    // 按类型柱状图1
    setLine1(data) {
      var newData = []
      data.forEach(thisData => {
        var td =[]
        td.push(thisData.recordDate)
        td.push(thisData.totalCount)
        newData.push(td)
      })
      const max = this.maxSecond(newData)
      const maxIndex = this.maxSecondIndex(newData)
      const min = this.minSecond(newData)
      const minIndex = this.minSecondIndex(newData)
      var option3;
      option3 =  {
        title: {
          text: '操作票数量'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['数量']
        },
        calculable: true,
        xAxis: {
          type: 'category',
          boundaryGap: false,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '操作票',
            data: newData,
            markPoint: {
              data: [
                { name: 'Max', value: max, xAxis: maxIndex, yAxis: max },
                { name: 'Min', value: min, xAxis: minIndex, yAxis: min }
              ],
              label: {
                show: true,
                color: '#fff', // 修改字体颜色为红色
                fontSize:17
              }
            },
            type: 'bar',
            symbol: 'none',  //取消折点圆圈
            smooth: true,  //折线平滑
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#0cbd9a'}, // 渐变起始处的颜色：淡蓝色
                  {offset: 1, color: '#29bf71'} // 渐变结束处的颜色：浅蓝色
                ]
              )
            },
            // 提示框展示配置
            tooltip: {
              // 提示框展示的内容
              valueFormatter: function (value) {
                return value + "张";
              },
            },
          }
        ]
      };
      if (this.dataEchart == null || this.dataEchart == '' || this.dataEchart == undefined) {
        this.dataEchart = echarts.init(this.$refs.dataEchart1, 'macarons')
      }
      this.dataEchart.clear()
      this.dataEchart.setOption(option3,true)
    },

Sie können den Effekt des obigen Bildes erzielen, indem Sie die Werte gemäß dem Code selbst ersetzen.