Für weitere Artikel folgen Sie bitte meinem persönlichen Blog: https://seven777777.github.io/myblog/
Für einen Front-End-Entwickler, der in einem Big-Data-Unternehmen arbeitet, sind in den letzten Jahren neben Karten die häufigsten Anforderungen verschiedene Diagramme. Grundsätzlich kann Echart als Diagrammbibliothek die Diagrammanforderungen der meisten Projekte erfüllen. ABER ~ Herkömmliche Konfigurationen sind grundsätzlich nicht in der Lage, den High-End-Geschmack der meisten Produkte zu erfüllen, daher ist es unvermeidlich, dass Sie auch auf einige personalisierte Konfigurationsanforderungen stoßen.
Vielleicht liegt es daran, dass ich älter bin und es nicht so gut ist. Sie wissen auch, dass die Häufigkeit einiger besonders personalisierter Konfigurationen sehr gering ist. Im Grunde werden sie einmal konfiguriert und dann dort belassen. Warten Sie, bis Sie das nächste Mal plötzlich eine ähnliche Konfiguration finden Anforderung. , da die instinktive Reaktion eines Programmierers darin besteht, die ursprüngliche Konfiguration als Referenz herauszusuchen. Aufgrund des großen Projektvolumens in den letzten Jahren, mehrerer Datenbankmigrationen und verschiedener Wendungen in dieser Zeit war der Suchprozess jedoch sehr schwierig, sodass dieses Projekt geboren wurde.
Die derzeit online verfügbare Version listet nur die bisher aufgetretenen zentralisierten Konfigurationen auf. Auch in Zukunft werden wir auf frühere Projekte zurückblicken, um Konfigurationslisten hinzuzufügen, und dabei auch einige strukturelle Verbesserungen vornehmen.
Auf das Projekt kann über diesen Link zugegriffen werden: https://seven777777.github.io/vue-echarts/#/home
Der Quellcode ist hier: https://github.com/seven777777/vue-echarts
Die Projektvorschau sieht wie folgt aus:
Informationen zur Projektbereitstellung
Projekttechnologie-Stack: @vue/cli 4.5.9 + echarts + elementui
Für die Bereitstellung des Projekts auf GitHub und die Implementierung der Vorschau gelten die folgenden Vorsichtsmaßnahmen:
- view.config.js
module.exports = {
publicPath: './',//设置后，打包后的资源路径引用才正确
outputDir: './docs',//方便github设置预览页面
};
- Router
Zeigen Sie eine Vorschau des Vue-Paketierungsprojekts auf Github an. Der Routing-Modus sollte der Standardmodus sein hashund kann dies nicht seinhistory
Tipps: Nachdem vue-cli auf 4 aktualisiert wurde, wurde sass-loader von v7 auf v8 aktualisiert.
Informationen zu dynamischen Rendering-Komponenten
Um für zukünftige Iterationen des Projekts flexibler zu sein, verwendet die aktuelle Liste Komponenten einheitlich und registriert keine Routen. Da es in Zukunft möglicherweise mehr Komponenten geben wird, werden hier zur Vereinfachung der Bedienung dynamische Rendering-Komponenten verwendet.
Der implementierte Kerncode lautet wie folgt:
Projektverzeichnis:
Die Datei im roten Feld ist der Speicherort aller nachfolgenden Listenkomponenten sowie der JS-Datei für die Konfiguration der dynamischen Rendering-Komponenten.
// componentsSet.js
const resultComps = {}
let requireComponent = require.context(
'./', // 在当前目录下查找
false, // 不遍历子文件夹
/\.vue$/ // 正则匹配 以 .vue结尾的文件
)
requireComponent.keys().forEach(fileName => {
let comp = requireComponent(fileName)
resultComps[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
export default resultComps
// vue
<!--dom-->
<component
v-for="(comp,index) in dataList"
:key="index"
:title="comp.label"
:is="allComps[comp.component]">
</component>
// :title="comp.label" 可以向动态组件传参
<!--js-->
import allComps from './components/componentsSet'
export default {
name: 'Home',
data(){
return {
allComps,
// ⚠️注意：组件文件名与此处的component需要对应
dataList:[
{
label:'基本说明',
component:'baseDesc'
},
{
label:'基础图表',
component:'baseChart'
},
{
label:'legend-外部设置点击事件',
component:'legendClickDiy'
},
{
label:'tooltip-自定义样式',
component:'diyTooltip'
},
{
label:'tooltip-默认显示并轮播显示',
component:'defaultShowTooltip'
},
// ...
]
}
},
// ...
}
Über die Projekteinführung
Die aktuellen gekapselten Basisdiagramme sind relativ einfach. Für andere häufig verwendete Konfigurationen können Sie direkt die offizielle Website von Echarts abfragen.
Zur Vereinfachung der Verwendung kapselt dieses Projekt eine globale öffentliche Echarts-Komponente. Die gekapselte Komponente stellt einige Methoden bereit, die beim Aufrufen von Komponenten verwendet werden können, z. B. Mausereignisse und Aktionsereignisse.
Basierend auf umfangreicher Projekterfahrung lassen sich die folgenden Datenstrukturen leichter kapseln, wenn eine große Anzahl von Diagrammen auf der Seite angezeigt wird.
so~ Das Diagrammpaket dieses Projekts verwendet, sofern nicht anders angegeben, die folgende Datenstruktur: (Derzeit werden nur die Datenstrukturen von Diagrammen mit rechteckigem Koordinatensystem und Kreisdiagrammen aufgeführt. Weitere Diagrammtypen werden in Zukunft hinzugefügt.)
//数据结构-直角坐标系
baseChartsObj:{
xAxisData:["分类1", "分类2", "分类2", "分类4", "分类5", "分类6"],
chartData: [
{
name: '数据1',
value:[12,18,34,26,67,10],
type: 'line'
},
{
name: '数据2',
value:[16,11,14,36,57,20],
type: 'bar'
},
// 基本配置的基础上，之后的一些示例会增加一些其他配置，如：单位，色值
{
name: '数据3',
value:[6,11,24,16,11,30],
type: 'line'
// unit: '个',
// color: somecolor,
}
]
}
//数据结构-饼图
pieChartsObj:{
title:'基础饼图',
unit:'%',
chartData:[
{value:26, name: '分类1'},
{value:23, name: '分类2'},
{value:12, name: '分类3'},
{value:12, name: '分类4'},
{value:12, name: '分类5'}
]
}
Listen Sie das Portal erneut auf~
Auf das Projekt kann über diesen Link zugegriffen werden: https://seven777777.github.io/vue-echarts/#/home
Der Quellcode ist hier: https://github.com/seven777777/vue-echarts
Derzeit dient der direkte Zugriff auf das Projekt hauptsächlich dazu, die schnelle Suche nach einigen Konfigurationen zu erleichtern. Aufgeführt sind einige relativ wichtige Implementierungscodes. (Wenn Sie den vollständigen Implementierungscode sehen möchten, können Sie zu meinem Github gehen, um den Quellcode anzuzeigen.) Wenn Sie noch keine Erfahrung mit Echarts haben, empfehlen wir Ihnen, sich zunächst mit der offiziellen Konfiguration vertraut zu machen.
In Zukunft werde ich möglicherweise einige Blog-Tutorials speziell für einige der klassischeren und am häufigsten verwendeten komplexen DIY-Konfigurationen von Echarts schreiben.
Wie auch immer, wenn Ihnen dieses Projekt von mir gefällt, markieren Sie es bitte, leiten Sie es weiter und fügen Sie es zu Ihren Favoriten hinzu!
