Vue verwendet ECharts zur Implementierung von Liniendiagrammen und Kreisdiagrammen

npm installiere echarts --save
 
importiere * als E-Charts von „E-Charts“;

<Vorlage>
    <div id="chartPie" Klasse="pie-wrap"></div>
</Vorlage>
 
<Skript>
    importiere * als E-Charts von „E-Charts“;
    require('echarts/theme/macarons');//Stelle das Theme-Export-Standard ein {
    Daten() {
      zurückkehren {
        chartPie: null
      }
    },
    montiert() {
      dies.$nextTick(() => {
        dies.drawPieChart();
      })
    },
    Methoden: {
      zeichneKreisdiagramm() {
        let meinTextStyle = {
          Farbe: "#333",                          
          Schriftgröße: 18,                            
        };
        lass meinlabel = {
          zeigen: wahr,                 
          Position: "rechts",          
          Versatz: [30, 40],             
          Formatierer: '{b} : {c} ({d}%)',      
          Textstil: meinTextstil
        };
        dies.chartPie = echarts.init(document.getElementById('chartPie'),'macarons');
        dies.chartPie.setOption({
          Titel:
            Text: 'Kreisdiagramm',
            Subtext: „Rein fiktiv“,
            x: 'Mitte'
          },
          Tooltip: {
            Auslöser: 'Artikel',
            Formatierer: "{a} <br/>{b} : {c} ({d}%)",
          },
          Legende: {
            Daten: ['Direktzugriff', 'E-Mail-Marketing', 'Affiliate-Werbung', 'Video-Werbung', 'Suchmaschine'],
            links: „Mitte“,                              
            oben:"unten",                              
            ausrichten: „horizontal“,                        
          },
          Serie: [
            {
              Name: 'Zugriffsquelle',
              Typ: "Kuchen",
              Radius: ['50%', '70%'],
              Mitte: ['50%', '50%'],
              Daten: [
                {value: 335, name: 'Direktzugriff'},
                {value: 310, name: 'E-Mail-Marketing'},
                {Wert: 234, Name: 'Alliance Advertising'},
                {value: 135, name: 'Videoanzeige'},
                {value: 1548, name: 'Suchmaschine'}
              ],
              animationEasing: "cubicInOut",
              Animationsdauer: 2600,
              Etikett: {           
                Schwerpunkt: meinLabel
              }
            }
          ]
        });
      }
    }
  }
</Skript>
 
<style lang='less' scope>
    .Kuchen-Wrap{
        Breite: 100 %;
        Höhe: 400px;
    }
</Stil> 

<Vorlage>
    <!-- Bereiten Sie ein DOM mit Größe (Breite und Höhe) für ECharts vor -->
    <div id="chartLine" class="line-wrap"></div>
</Vorlage>
 
<Skript>
    importiere * als E-Charts von „E-Charts“;
    require('echarts/theme/shine');//Stelle das Theme-Export-Standard ein {
    Daten() {
      zurückkehren {
        chartLine: null
      }
    },
    montiert() {
      dies.$nextTick(() => {
        dies.drawLineChart();
      })
    },
    Methoden: {
      zeichneLiniendiagramm() {
        this.chartLine = echarts.init(this.$el,'shine');// Initialisieren Sie die Echarts-Instanz basierend auf der vorbereiteten Dom-Let-Option = {
            Tooltip: {
                Auslöser: ‚Achse‘
            },
            Legende: {
                Daten: ['E-Mail-Marketing', 'Affiliate-Werbung', 'Video-Werbung', 'Direktzugriff', 'Suchmaschine']
            },
            berechenbar: wahr,
            xAchse: [
                {
                    Typ: "Kategorie",
                    boundageGap : falsch,
                    AchseTick: {
                        anzeigen:false
                    },
                    Daten: ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag']
                }
            ],
            yAchse: [
                {
                    Typ: "Wert",
                    AchseTick: {
                        anzeigen:false
                    },
                    Name: '(Person)'
                }
            ],
            Serie: [
                {
                    Name: „E-Mail-Marketing“,
                    Typ: „Zeile“,
                    Stapel: 'Gesamtbetrag',
                    Daten: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    Name: „Alliance Advertising“,
                    Typ: „Zeile“,
                    Stapel: 'Gesamtbetrag',
                    Daten: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    Name: „Videoanzeige“,
                    Typ: „Zeile“,
                    Stapel: 'Gesamtbetrag',
                    Daten: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    Name:'Direktzugriff',
                    Typ: „Zeile“,
                    Stapel: 'Gesamtbetrag',
                    Daten: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    Name: 'Suchmaschine',
                    Typ: „Zeile“,
                    Stapel: 'Gesamtbetrag',
                    Daten: [820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        // Zeigen Sie das Diagramm mit den soeben angegebenen Konfigurationselementen und Daten an. this.chartLine.setOption(option);
      }
    }
  }
</Skript>
 
<style lang='less' scope>
    .Zeilenumbruch{
        Breite: 50 %;
        Höhe: 400px;
    }
</Stil> 

Titel:
    Text: 'Kreisdiagramm', // Haupttiteltext Subtext: 'Rein fiktiv', // Untertiteltext x: 'Mitte',
    textStyle:{//Haupttitelstilfarbe: "#333",                          
      Schriftgröße: 18
    },
    subtextStyle:{}, //Untertitelstil itemGap: 10, // Abstand zwischen Haupt- und Untertitel}

Legende: {
    left:"center", //Der Abstand zwischen der Legendenkomponente und der linken Seite des Containers top:"bottom", //Der Abstand zwischen der Legendenkomponente und der Oberseite des Containers orient:"horizontal", //Die Layoutrichtung der Legendenliste itemGap :20, //Das Intervall zwischen jedem Legendenelement formatter: function (name) { //Wird zum Formatieren des Legendentextes verwendet, unterstützt sowohl Zeichenfolgenvorlagen als auch Rückruffunktionen~~~~
        returniere 'Legende ' + Name;
    },
    Symbol: „Kreis“, //Symbol des Legendenelements
    Daten: [
        {
            Symbol: 'Dreieck',
            Textstil: {
              Farbe: 'rot'
            },
            Name: „Direktzugriff“ 
        },
        'E-Mail-Marketing', 'Affiliate-Werbung', 'Video-Werbung', 'Suchmaschine'], //Datenarray der Legende}

xAchse: [
        {
            Typ: „Kategorie“, // Achsentyp BoundaryGap: false,
            axisTick: {//Mit der Achsenskala verbundene Einstellungen anzeigen: false
            },
            Daten: ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag'] // Kategoriedaten}
    ]

yAchse: [
        {
            Typ: „Wert“, // Achsentyp, numerische Achse „Wert“, geeignet für kontinuierliche Daten axisTick: {
                anzeigen:false
            },
            Name: '(Person)'
        }
    ]

Tooltip: {
    Trigger: ‚Achse‘, // Triggertyp, Achsentrigger ‚Achse‘, wird hauptsächlich in Balkendiagrammen, Liniendiagrammen und anderen Diagrammen verwendet, die Kategorieachsen verwenden. Formatierer: „{a} <br/>{b} : {c} ({d}%)“, // Vorlagenvariablen umfassen ‚{a}‘, ‚{b}‘, ‚{c}‘, ‚{d}‘, ‚{e}‘, die jeweils Seriennamen, Datennamen, Datenwerte usw. darstellen}

A. Serienlinie
 
Serie: [
    {
        Name: „E-Mail-Marketing“,
        Typ: „Zeile“,
        Stapel: 'Gesamtbetrag',
        data:[120, 132, 101, 134, 90, 230, 210], //Dateninhalt-Array in der Reihe areaStyle:{ //Stil für Flächenfüllung color:'red'
        },
        lineStyle:{//Linienstilfarbe:'#000'
        },
        Betonung:{//Beschriftung für grafischen Hervorhebungsstil:{
                Farbe: 'rot'
            }
        }
    }
]
 
B. Serienkuchen
Serie: [
    {
      Name: 'Zugriffsquelle',
      Typ: "Kuchen",
      Radius: ['50 %', '70 %'], //Der Radius des Kreisdiagramms, das erste Element des Arrays ist der Innenradius, das zweite Element ist der Außenradius. Zentrum: ['50 %', '50 %'], //Die Mittenkoordinaten des Kreisdiagramms, das erste Element des Arrays ist die horizontale Koordinate, das zweite Element ist die vertikale Koordinate. Unterstützt die Einstellung als Prozentsatz. Bei der Einstellung als Prozentsatz ist das erste Element relativ zur Containerbreite und das zweite Element relativ zur Containerhöhe roseType: false, //Gibt an, ob die Anzeige als Nightingale-Diagramm erfolgen soll, wobei die Datengröße nach Radius unterschieden wird data: [ //Dateninhaltsarray in der Reihe {value: 335, name: ‚Direktzugriff‘},
        {value: 310, name: 'E-Mail-Marketing'},
        {Wert: 234, Name: 'Alliance Advertising'},
        {value: 135, name: 'Videoanzeige'},
        {value: 1548, name: 'Suchmaschine'}
      ],
      animationEasing: 'cubicInOut', //Easing-Effekt der anfänglichen Animation animationDuration: 2600, //Dauer der anfänglichen Animation label: {           
        Betonung: meinLabel//Hervorgehobener Sektor und Beschriftungsstil}
    }

]