So verwenden Sie ECharts im Projekt

---

Vorwort

提示：这里可以添加本文要记录的大概内容：

Dieser Artikel teilt Ihnen hauptsächlich die Vergangenheit und Gegenwart von ECharts und die Prozessschritte bei der Verwendung von ECharts in Projekten sowie einige gängige Konfigurationen von ECharts mit

---

提示：以下是本篇文章正文内容，下面案例可供参考

1. Einführung in ECharts

Gemeinsame Datenbanken:

• D3.js ist derzeit die am höchsten bewertete Javascript-Visualisierungstool-Bibliothek im Web (der Einstieg ist schwierig).
• ECharts.js Eine Open-Source-Javascript-Datenvisualisierungsbibliothek von Baidu (hergestellt in China).
• Highcharts.js Ausländische Front-End-Datenvisualisierungsbibliothek, nicht kommerziell und kostenlos, wird von vielen großen ausländischen Unternehmen verwendet
• AntV Ant Financials neue Generation von Datenvisualisierungslösungen usw.

Daher ist ECharts eine von Baidu erstellte Open-Source-Javascript-Datenvisualisierungsbibliothek. Highcharts wird häufiger im Ausland und Echarts eher in China verwendet. Die Beziehung zwischen den beiden ist ein bisschen wie WPS und Office. Es läuft reibungslos auf PCs und Mobilgeräten und ist mit den meisten aktuellen Browsern (IE8/9/10/11, Chrome, Firefox, Safari usw.) kompatibel . Hochgradig angepasste Datenvisualisierungsdiagramme.

2. Prozessschritte bei der Nutzung von ECharts

1. Laden Sie Echarts herunter und importieren Sie es in Ihre Seite

• Echarts herunterladen
• Integrieren Sie Komponenten in Ihr Projekt

import echarts from 'echarts';

2. Bereiten Sie eine Div-Box vor

<div id="main" style="width: 600px;height:400px;"></div> //方法一对应的盒子
<div class="content-460300" ref="unlockTrendRef"></div> //方法二对应的盒子

3. Initialisieren Sie das Echarts-Instanzobjekt

var myChart = echarts.init(document.getElementById('main')); //方法一对应的初始化
let unlockTrendChart = echarts.init(this.$refs.unlockTrendRef); //方法二对应的初始化

4. Konfigurationselemente und Daten angeben (Option)

var option = {
    
    
	//方法一对应的配置
    xAxis: {
    
    
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
    
    
        type: 'value'
    },
    series: [{
    
    
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

var option = {
    
    
	//方法二对应的配置
        title: {
    
    
          text: '最近一个月开锁方式折线图(人)',
          left: 0,
          top: 0,
          textStyle: {
    
    
            fontSize: 12,
            color: 'rgba(192, 216, 255, 1)'
          }
        },

        grid: {
    
    
          //图表和父盒子之间的距离
          left: '40px',
          right: '40px',
          bottom: '20px',
          top: '20%',
          containLabel: true
        },
        legend: {
    
    
          data: ['指纹开锁', '门卡开锁', '密码开锁'],
          textStyle: {
    
    
            color: '#c0d8ff'
          }
        },
        xAxis: {
    
    
          data: unlockTrendXKey,
          type: 'category',
          boundaryGap: false,
          axisLabel: {
    
    
            interval: 0,
            rotate: 0,
            color: '#DFDDEA',
            fontFamily: 'PingFang SC',
            textStyle: {
    
    
              color: '#C0D8FF', //文字的颜色
              fontSize: '12'
            }
          },
          axisLine: {
    
    
            lineStyle: {
    
    
              color: '#5897ff',
              width: 1,
              type: 'solid'
            }
          }
        },
        yAxis: {
    
    
          type: 'value',
          //Y轴的坐标文字
          minInterval: 1, //y坐标轴最小间隔大小
          axisLabel: {
    
    
            show: true,
            textStyle: {
    
    
              color: '#C0D8FF' //文字的颜色
            },
            fontSize: 10,
            fontFamily: 'PingFang SC'
          },
          splitLine: {
    
    
            lineStyle: {
    
    
              // 使用深浅的间隔色
              color: ['#5897ff']
            }
          },
          axisLine: {
    
    
            show: false
          },
          axisTick: {
    
    
            //y坐标轴刻度线设置
            show: false
          }
        },
        tooltip: {
    
    
          trigger: 'axis'
        },
        series: [
          {
    
    
            name: '指纹开锁',
            type: 'line',
            stack: 'Total',
            data: fingerVal
          },
          {
    
    
            name: '门卡开锁',
            type: 'line',
            stack: 'Total',
            data: cardVal
          },
          {
    
    
            name: '密码开锁',
            type: 'line',
            stack: 'Total',
            data: codeVal
          }
        ]
      };

5. Legen Sie das Konfigurationselement auf das Echarts-Instanzobjekt fest

myChart.setOption(option); //方法一对应的设置
unlockTrendChart.setOption(option); //方法二对应的设置

Zeige Ergebnisse

• Der entsprechende Effekt von Methode 2

Drei häufig verwendete Konfigurationen

Die Hauptkonfiguration, die verstanden werden muss:series xAxis yAxis grid tooltip title legend color

• Serie
  Liste der Serien. Jede Serie typebestimmt ihren eigenen Diagrammtyp über
• xAxis
  Die x-Achse im rechteckigen Koordinatensystemgitter
• yAxis
  Die y-Achse im rechteckigen Koordinatensystemgitter
• Raster
  Kartesisches Koordinatensystem, Zeichnungsraster.
• Tooltip-
  Eingabeaufforderungsfeldkomponente
• Titeltitelkomponente
  _
• Legendenkomponente
  _
• Farbpalette
  Farbliste

Zusammenfassen

Der Kern der Echarts-Nutzung ist:

• Bereiten Sie die Div-Box vor
• Initialisieren Sie das Instanzobjekt echarts.init(div box)
• Geben Sie Konfigurationselemente und Daten an
• Geben Sie das Konfigurationselement an, um Dinge zu instanziieren.
  Die gemeinsame Nutzung von myChart.setOption(option) ist hier. Wenn es für Sie hilfreich ist, denken Sie daran, es zu mögen, oder hinterlassen Sie eine Nachricht zur gemeinsamen Diskussion, wenn Sie Fragen haben . Lassen Sie uns gemeinsam wachsen! ! !