Vue + echart realisiert Doppelsäulendiagramm

npm install --save [email protected]

npm install -g cnpm --registry=https://registry.npm.taobao.org

<Vorlage>
  <div Klasse="echarts_con">
    <div
      Klasse="echarts_main"
      ref="Dialogstamm"
      Titel="Knotenindikatoren"
      @close="hideData()"
    >
      <!--Ladebedingung-->
      <div
        ref="bar_dv"
        :Stil="{
          Breite: '100%',
          minHöhe: '300px',
        }"
      ></div>
    </div>
  </div>
</Vorlage>
 
<Skript>
E-Charts aus „E-Charts“ importieren
// importiere myIcon aus „./image/hot_icon.png“ // benutzerdefiniertes Symbol // importiere averageIcon aus „./image/hot_icon.png“
Standard exportieren {
  Name: "Echarts",
  Daten () {
    zurückkehren {
      maxStr: 400,
      yIntervall: 80,
      meineDaten: [122, 45, 67, 78, 46],
      Durchschnittsdaten: [32, 34, 6, 73, 84, 40]
    }
  },
  //Wenn Daten von außen übergeben werden, müssen Sie den Datenstart überwachen
  // Requisiten: {
  // meineDaten: {
  // Typ: Array,
  // Standard: []
  // },
  // Durchschnittsdaten: {
  // Typ: Array,
  // Standard: []
  // }
  // },
  // berechnet: {
  // Adresse () {
  // const { meineDaten, durchschnittlicheDaten } = dies
  // zurückkehren {
  // meineDaten,
  // Durchschnittsdaten
  // }
  // }
  // },
  // betrachten: {
  // Adresse: {
  // Handler: Funktion (Wert) {
  // dies.vergleichen(val.myData, val.averageData)
  // lass newArr = val.myData.concat(val.averageData)
  // lass maxNum = Math.max(...newArr)
  // dies.maxStr = maxNum
  // wenn (maxNum >= 500) {
  // dieses.yIntervall = 200
  // } anders {
  // dieses.yIntervall = 50
  // }
  // diese.drawLine(val.myData, val.averageData)
  // },
  // tief: wahr

  // }
  // },
  // gemountet () {
  // dies.$nextTick(Funktion () {
  // diese.drawLine();
  // });
  // },
  //Wenn Daten von außen übergeben werden, müssen Sie das Datenende überwachen

  montiert () {
    dies.drawLine(diese.meineDaten, diese.durchschnittlicheDaten)
  },
  Methoden: {
    //Wenn die eins-zu-eins entsprechenden Daten niedriger als der Durchschnitt sind, dann fordern Sie zum Vergleichen auf (arr1, arr2) {
      wenn (arr1[0] < arr2[0]) {
        dies.isCompare = true
      } sonst wenn (arr1[1] < arr2[1]) {
        dies.isCompare = true
      } sonst wenn (arr1[2] < arr2[2]) {
        dies.isCompare = true
      } sonst wenn (arr1[3] < arr2[3]) {
        dies.isCompare = true
      } anders {
        this.isCompare = false
      }
    },
    klickSchließen () {
      this.isCompare = false
    },
    /*Statussymbol laden*/
    zeichneLinie(a, b) {
      var meineDaten = a;
      var Durchschnittsdaten = b;
      lass bar_dv = dies.$refs.bar_dv;
      let myChart = echarts.init(bar_dv);
      var autoHeight = parseInt(this.maxStr / 100) * 10 + 100;
      myChart.getDom().style.height = autoHeight + "px";
      myChart.resize(); //Adaptive Höhe // Diagramm zeichnen myChart.setOption({
        Titel: { Text: 'Berichtsanzeige' },
        Netz: {
          // links: 40,
          containLable: wahr
        },
        Tooltip: {},
        x-Achse:
          Daten: ["Mein Profil angesehen", "Kommuniziert mit", "Lebenslauf erhalten", "Anzahl der angesprochenen Personen"],
          Achsenlinie: {
            Linienstil:
              Typ: "fest",
              Farbe: '#eeeeee', //Farbe der linken Zeile von x fontSize: 13,
              width: '0.5' //Breite der Koordinatenlinie}
          },
          axisLabel: { // Schriftart der x-Achse textStyle: {
              Farbe: '#333333',
              Schriftgröße: 13
            }
          },
        },
        yAchse: {
          Typ: "Wert",
          Mindestwert: 0,
          max: this.maxStr,
          Intervall: this.yIntervall,
          Achsenlinie: {
            Linienstil:
              Typ: "solide",
              color: '#fff', //Farbe der linken Linie width: '0.5' //Breite der Koordinatenlinie}
          },
          Achsenbezeichnung: {
            Textstil: {
              Farbe: '#333333',
              Schriftgröße: 13
            }
          },
          geteilte Zeile: {
            zeigen: wahr,
            Linienstil:
              Farbe: ['#eeeeee'],
              Breite: 1,
              Typ: „solide“
            }
          }

        },
        Legende: {
          Artikelbreite: 11,
          Artikelhöhe: 12,
          symbolKeepAspect: true,
          Textstil: {
            Schriftgröße: 11,
            Zeilenhöhe: 0,
            Hintergrundfarbe: "rgba(11, 164, 19, 1)"
          },
          // Symbol: `image://${averageIcon}`,

          Daten: [
            {
              Name: "Mein",
              // Symbol: `image://${myIcon}`//benutzerdefiniertes kleines Symbol},
            {
              Name: 'Branchendurchschnitt',
              // Symbol: `image://${averageIcon}`
            }
          ],
          ausrichten: 'links',
          rechts: 40,
          oben: '0',
          Textstil: {
            Schriftgröße: 12,
            Textausrichtung: "zentriert",
            Farbe: '#333333',
            magrinRechts: 3
          },
        },
        Serie: [{
          Name: "Mein",
          Typ: "Bar",
          Daten: meineDaten,
          barWidth: 16, //Spaltenbreite barGap: '50%', //Abstand label: {
            zeigen: wahr,
            Position: 'oben',
            Textstil: {
              Farbe: '#4695F3'
            },
            Formatierer: Funktion (Parameter) {
              Parameterwert zurückgeben
            }
          },
          Artikelstil: {
            normal: {
              Farbe: neu echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                Versatz: 0,
                Farbe: '#A5CCF6'
              }, {
                Versatz: 1,
                Farbe: '#4695F3'
              }]),
              barBorderRadius: [4, 4, 0, 0],
            }
          }
        },
        {
          Name: 'Branchendurchschnitt',
          Typ: "Bar",
          Daten: Durchschnittsdaten,
          Balkenbreite: 16,
          barGap: '50%',
          Etikett: {
            zeigen: wahr,
            Position: 'oben',
            Textstil: {
              Farbe: '#FE8401'
            },
            Formatierer: Funktion (Parameter) {
              Parameterwert zurückgeben
            }
          },
          Artikelstil: {
            normal: {
              Farbe: neu echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                Versatz: 0,
                Farbe: '#FFB235'
              }, {
                Versatz: 1,
                Farbe: '#FE8401'
              }]),
              barBorderRadius: [4, 4, 0, 0],
            },
            Schwerpunkt:
              Balkengrenzradius: 30
            },
          }
        }
        ]
      }, WAHR);
    },

    hideData() {
      dies.$emit("hideDialog")
    },

    bestätigen () {
      dies.hideData();
    },

  }
}
</Skript>
 
<Stilbereich>
.echarts_con {
  Breite: 100 %;
  Rand: 0 automatisch;
  Rand oben: 8px;
  Rahmenradius: 20px;
  Hintergrund: #fff;
  Polsterung unten: 35px;
}
.echarts_main {
  Breite: 100 %;
  Rand: 0 automatisch;
  Polsterung oben: 20px;
  Rand unten: -32px;
  Rand rechts: 20px;
  Rand links: 20px;
}
.unten {
  Breite: 90%;
  Rand: 0 automatisch;
  Hintergrund: #fef8e1;
  Rahmenradius: 6px;
  Höhe: 100%;
  Rand oben: 16px;
}
.bottom_con {
  Breite: 90%;
  Rand: 0 automatisch;
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
  Elemente ausrichten: zentrieren;
  Höhe: 34px;
  Zeilenhöhe: 34px;
}
.bottom_text {
  Höhe: 34px;
  Zeilenhöhe: 34px;
  Schriftgröße: 13px;
  Schriftfamilie: PingFang, PingFang-SC;
  Schriftstärke: SC;
  Textausrichtung: links;
  Farbe: #fa5d1d;
}
.rechts_schließen {
  Breite: 13px;
  Höhe: 13px;
}
</Stil>