ホームページ > 記事 > ウェブフロントエンド > vue.js は、ワンクリックで使用できるコンポーネントとして echart をカプセル化します。

vue.js は、ワンクリックで使用できるコンポーネントとして echart をカプセル化します。

小云云オリジナル: 2018-01-26 10:27:401804ブラウズ

プロジェクトに取り組むとき、データをより直観的に表示するために、チャート関連のコントロールが常に使用されます。チャートコントロールというと、オープンソースプロジェクトである ECharts が最初に思い浮かびますが、これはそれほど簡単ではありません。 iview や element-ui などのコンポーネントとして使用するには非常に便利ですが、便宜上、ECharts はレイヤーにカプセル化されています。

Echarts、Remodal、Pikaday は、バックエンド管理 Web サイトを開発するときによく使用される 3 つのサードパーティコンポーネントです。この記事では主に、ワンクリックで使用できるように echart をコンポーネントにカプセル化する vue.js に関する関連コンテンツを紹介します。参考資料として、以下ではあまり説明しませんが、詳細な紹介を見てみましょう。

コントロールのデモンストレーション

コントロールの使用法

概要

echartに基づく二次パッケージング
データ駆動
制御ソースコードは次のとおりです。 src/components/charts にあります

Document

props

Property	Description	type
_id	IDが繰り返されるチャートでは、エラーが報告されます	String
_titleText	グラフのタイトル	String
_xText	x軸の説明	String
_yText	y 軸の説明	文字列
_chartData	グラフデータ	Array
_type	3 つのタイプ (LineAndBar/LineOrBar/Pie) を提供する

呼び出し例

りー

実装

レンダリングするdomを作成します

 <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]]

描画関数

<template>
 <p :id="_id" class="chart"></p>
</template>

マウントが完了し、データソースが変更されたときに再描画します

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;
   }
   }
  }
  ]
 })
 }

vue.js は、ワンクリックで使用できるコンポーネントとして echart をカプセル化します。

関連記事