Zu beachtende Punkte bei der Verwendung von Echarts zur Implementierung von Diagrammprojekten

Der Inhalt dieses Artikels befasst sich mit den Punkten, die bei der Verwendung von Echarts zur Umsetzung von Diagrammprojekten zu beachten sind. Ich hoffe, dass er für Sie hilfreich ist.

Kürzlich habe ich ein Diagrammprojekt mit Echarts durchgeführt. Aufgrund der eingeschränkten Fähigkeit, die API zu verstehen, ist ihre Verwendung nicht reibungslos.
Wie das Sprichwort sagt: Ein gutes Gedächtnis ist nicht so gut wie ein schlechtes Schreiben, deshalb werde ich einige wichtige Punkte für die spätere Überprüfung aufzeichnen.

Eine Verwendungsmethode

Projekt: ionic+angular4+echarts

    1.由于打包原因，echarts不能直接引入进package.json的dependencies中，只能以原始的方式从index.html中引入
    <script src="assets/js/echarts.min.js"></script>

    2.在组件的.html文件中
    <div echarts [options]="pieOption" (chartClick)="jump2Detail($event)"></div>

    3.在组件的.ts文件中配置好options的值pieOption以及点击drill down的逻辑

2 Hinweise

1 Jeder Renderbereich verfügt über eine Positionseinstellung, die Sie anpassen können der Abstand von oben, unten, links und rechts

    grid:{
        top:...
        left:...
        bottom:...
        right:...
    }
    
    legend:{
        top:...
        left:...
        ...
    }

2. Jeder Anzeigepunkt, der einen Wert enthält, stellt grundsätzlich einen Formatierer bereit

tooltip:{
        formatter: params => { //自定义hover状态数据显示的情况
            let str = '';
            str += `<h6 style="color:#fff;font-size:13px;margin:4px 0">${params[0].name}</h6>`;
            params.forEach(item => {
                str += `${item.marker}${item.seriesName}: ${Math.round(item.value).toLocaleString()}<br>`;
                //item中提供了图标、颜色等
            });
            return str;
        }
    }
    
    legend:{
        formatter: (name) => { //需要根据值去重算数据然后显示的情况
            let source = data.source[name.toUpperCase()];
            var total = 0;
            source.forEach(element => {
                total += element;
            });

            return name + ': ' + Math.round(total).toLocaleString();
        }
    }

3. Achsennamen, Anzeige von Koordinateninformationen

4. Toolbox-Symbolleiste mit integrierten 5 Werkzeugen zum Exportieren von Bildern, Datenansicht, dynamischem Typwechsel, Datenbereichsskalierung und Zurücksetzen
darunter zum Exportieren von Bildern , Sie können mehrere Diagramme zusammen über die entsprechende API von Canvas

5.dataZoom-Datenbereichs-Zoomkomponente exportieren – es kann eine oder mehrere

dataZoom:[
    {
        type:'inside', //内置在坐标系中 通过鼠标滚轮或者手指touch进行处罚
        ...
    },
    {
        type:'slider', //在外部 显示为滑动条形的一个组件，可直接拖动使用
        ...
    }
]

6.series-Serienliste sein, jede Serie bestimmt der Diagrammtyp durch Typ – Einfügen von Daten in verschiedenen Formaten entsprechend verschiedenen Diagrammen

series:{
    type:'line'/'pie'/'bar'/'treemap',
    ...
}

Tatsächlich hat jedes Diagramm einige subtile Einstellungen, Daten, Farben, Abstände usw., die fortgesetzt werden sollen ..

Verwandte Empfehlungen:

echarts implementiert das Hinzufügen von Klickereignissen zur Kreisdiagramm-Sektorstatistiktabelle

Verwendung von Echarts zur Implementierung eines dynamischen Kurvendiagramms

Das obige ist der detaillierte Inhalt vonZu beachtende Punkte bei der Verwendung von Echarts zur Implementierung von Diagrammprojekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!