Heim > Web-Frontend > js-Tutorial > vue.js kapselt Echarts als Komponente für die Verwendung mit einem Klick

vue.js kapselt Echarts als Komponente für die Verwendung mit einem Klick

小云云
Freigeben: 2018-01-26 10:27:40
Original
1855 Leute haben es durchsucht

Um Daten intuitiver anzuzeigen, werden bei Projekten immer diagrammbezogene Steuerelemente verwendet. Wenn es um Diagrammsteuerelemente geht, fällt mir natürlich als Erstes das Open-Source-Projekt ECharts ein, das nicht so ist Komponenten wie iview und element-ui sind sehr bequem zu verwenden, erfordern jedoch einen kleinen Umweg. Der Einfachheit halber ist ECharts in einer Ebene gekapselt.

Echarts, Remodal und Pikaday sind drei Komponenten von Drittanbietern, die häufig bei der Entwicklung von Backend-Management-Websites verwendet werden. Dieser Artikel führt Sie hauptsächlich in die relevanten Inhalte von vue.js ein, die Echarts in Komponenten für die Verwendung mit einem Klick kapseln Teilen Sie es zum Nachschlagen und Studieren für alle. Ich werde im Folgenden nicht viel mehr sagen, werfen wir einen Blick auf die detaillierte Einführung.

Kontrolldemonstration


Kontrollnutzung

Übersicht

  • Sekundärverpackung auf Basis von Echarts

  • Angetrieben durch Daten

  • Der Quellcode der Steuerung ist in src/components/charts zu finden

Dokumentation

props

Attribut Beschreibung Typ
_id Die eindeutige Kennung des Diagramms, wenn die ID wiederholt wird, wird ein Fehler gemeldet. String
_titleText td> Diagrammtitel String
_xText X-Achsen-Beschreibung String
_yText y-Achsen-Beschreibung String
_chartData td> Diagrammdaten Array
_type Diagrammtypen mit drei Typen (LineAndBar/LineOrBar/Pie)
属性 说明 类型
_id 图表唯一标识,当id重复将会报错 String
_titleText 图表标题 String
_xText x轴描述 String
_yText y轴描述 String
_chartData 图表数据 Array
_type 图表类型,提供三种(LineAndBar/LineOrBar/Pie)

Aufrufbeispiel


 <chart
 :_id="&#39;testCharts&#39;"
 :_titleText="&#39;访问量统计&#39;"
 :_xText="&#39;类别&#39;"
 :_yText="&#39;总访问量&#39;"
 :_chartData="chartData"
 :_type="&#39;Pie&#39;"></chart>
 //测试数据样例 [["类别1",10],["类别2",20]]
Nach dem Login kopieren

Implementierungsmethode

Dom zum Rendern erstellen


<template>
 <p :id="_id" class="chart"></p>
</template>
Nach dem Login kopieren

Zeichnungsfunktion


function drawPie(chartData,id,titleText,xText,yText) {
 var chart = echarts.init(document.getElementById(id))
 var xAxisData = chartData.map(function (item) {return item[0]})
 var pieData = []
 chartData.forEach((v,i)=>{
  pieData.push({
  name:v[0],
  value:v[1]
  })
 })
 chart.setOption({
  title : {
  text: titleText,
  subtext: &#39;&#39;,
  x:&#39;center&#39;
  },
  tooltip : {
  trigger: &#39;item&#39;,
  formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
  orient: &#39;vertical&#39;,
  left: &#39;left&#39;,
  data: xAxisData
  },
  series : [
  {
   name: xText,
   type: &#39;pie&#39;,
   radius : &#39;55%&#39;,
   center: [&#39;50%&#39;, &#39;60%&#39;],
   data:pieData,
   itemStyle: {
   emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;
   }
   }
  }
  ]
 })
 }
Nach dem Login kopieren

Montage endet, Neuzeichnen, wenn sich die Datenquelle ändert


 watch:{
  _chartData(val){
  switch (this._type){
   case "LineAndBar":
   drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
   break
   case "LineOrBar":
   drawLineOrBar(val,this._id,this._titleText,this._xText,this._yText);
   break
   case "Pie":
   drawPie(val,this._id,this._titleText,this._xText,this._yText);
   break
   default:
   drawLineAndBar(val,this._id,this._titleText,this._xText,this._yText);
   break
  }
  }
 },
 mounted() {
  switch (this._type){
  case "LineAndBar":
   drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  case "LineOrBar":
   drawLineOrBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  case "Pie":
   drawPie(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  default:
   drawLineAndBar(this._chartData,this._id,this._titleText,this._xText,this._yText);
   break
  }
 }
Nach dem Login kopieren

Verwandte Empfehlungen:

Beispiel für die gemeinsame Nutzung des durch Echarts implementierten Schleifengenerierungsdiagrammeffekts

Detaillierte Erläuterung der Verwendung des Hinzufügens von Echarts-Diagrammen in Vue

Detaillierte Einführung in die Verwendung von Echarts

Das obige ist der detaillierte Inhalt vonvue.js kapselt Echarts als Komponente für die Verwendung mit einem Klick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage