vue.js kapselt Echarts als Komponente für die Verwendung mit einem Klick-js-Tutorial-php.cn

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

小云云

Freigeben： 2018-01-26 10:27:40

Original

1822 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!