Vue プロジェクトはどのように echart をエレガントにカプセル化するのでしょうか?手法の紹介

vueプロジェクトはどのように echart をエレガントにカプセル化しますか?次の記事では、Vue プロジェクトで echart をカプセル化するより洗練された方法を紹介します。

シナリオ

• #1.Echartsを使用する場合、大量のoption## を記述する必要があります。 # 、グラフごとに 1 つずつ記述すると、1 ファイルのコード量が非常に多くなります#2。再利用するのが不便です
• #要件

1. 便利な再利用

2. 表示グラフの場合、データはビジネスおよびスタイルから分離されています。データを転送するだけです。
• 3. 複数のグラフが必要になります。 4. 私のグラフは大画面のデータ視覚化でよく使用されており、手法は比例スケーリングであるため、グラフはまた、インターフェイスのスケーリングに従って自動的にスケーリングできるため、手動で呼び出す必要はありません。 [関連する推奨事項:
• vuejs ビデオ チュートリアル
]
• 5. グラフを構成できます
• コードの概要関連するファイルは次のとおりです (特定の参照
Code
• ):

|-- src |-- components |-- chart |-- index.vue // 图表单文件组件，供界面调用 |-- index.js // 实现自动化导入options里的图表option |-- options // 存放各种图表的option |-- bar // 随便一例子 |-- index.js |-- views |-- chartTest // 实例所在 |-- index.vue |-- index.scss |-- index.js |-- main.js // 全局引入echarts图表

ログイン後にコピー

A という名前のChartView

width

height

autoResize(デフォルト)、チャート構成チャートオプション。デフォルトでは、Canvasがグラフのレンダリングに使用されます。SVGを使用することもでき、独自の

options

import

const modulesFiles = require.context('./options', true, /index.js$/) let modules = {} modulesFiles.keys().forEach(item => { modules = Object.assign({}, modules, modulesFiles(item).default) }) export default modules

optionsbar

を作成し、新しいindex.js

barディレクトリに作成します。 (これは単なる個人的な習慣です。私は各グラフを別のフォルダーに保存するのが好きです。この方法が気に入らない場合は、ディレクトリを離れて js ファイルを直接使用することもできますが、components--chart--以下)例のoptionコードを直接コピーしますindex.js具体的なコードは次のとおりです

const testBar = (data) => { const defaultConfig = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] } const opt = Object.assign({}, defaultConfig) return opt } export default { testBar }

testBarこのメソッドはパラメータを渡すことができます。具体的に使用する場合は、データ データ、グラフの色など、グラフに設定する必要がある属性を渡します。パラメータとして渡すことができます。

main.jsここでは、インターフェイス呼び出しを容易にするために、カプセル化された Echarts コンポーネントがグローバルに導入されています。 （単一参照の方法については、もう言うまでもありません）

具体的なコードは以下のとおりです。

import eChartFn from '@/components/chart/index.js' import ChartPanel from '@/components/chart/index.vue' Vue.component(ChartPanel.name, ChartPanel) Vue.prototype.$eChartFn = eChartFn

呼び出し方法は次のとおりです。カプセル化された

Chart、メイン コードは次のとおりです

index.vue

index.js

export default { name: 'chartTestView', data() { return { chartOpt: {} } }, mounted() {}, created() { this.chartOpt = this.$eChartFn.testBar() }, methods: { }, watch: {} }

効果は次のとおりです

コード概要のディレクトリをクリックし、

に移動して探します。

https://github.com/liyoro/vue-skill概要

Echarts はさまざまな Chart を使用します。
• Echarts 公式サンプル

  および

  Echarts ビジュアル ワーク シェアリング
、特に

に記載されており、プロジェクトを実行する際に参照できます。

上記はchartコンポーネントをカプセル化しています。上記の方法に従って、optionの設定とチャートの関連処理をoptionsの下に置きます。チャートを呼び出すときに、対応する

を渡すのに必要なコードは数行だけであり、比較的便利です。chartこのコンポーネントは再利用が非常に簡単で、直接使用できます。

补充

评论里说想动态修改option里面的属性，稍微做了个例子，动态修改pie图表的data和color属性，这个是直接生产就可以使用的例子了，直接参考代码就行了，不详细说了。想修改什么属性，直接传参就行。传具体参数可以，想修改的属性多了就把参数封装成一个json传也可以。懂得在封装的option里面灵活使用就行。

|-- src |-- components |-- chart |-- options // 存放各种图表的option |-- pie // pie例子 |-- index.js |-- views |-- chartTest // 实例所在 |-- index.vue |-- index.scss |-- index.js

this.chartOpt2 = this.$eChartFn.getPieChart([100, 23, 43, 65], ['#36CBCB', '#FAD337', '#F2637B', '#975FE4'])

|-- src |-- components |-- chart |-- index.js // 实现自动化导入options里的图表option