vue專案怎麼優雅的封裝echarts?以下這篇文章為大家介紹一下vue專案中封裝echarts的比較優雅的方式,希望對大家有幫助!
程式碼):
|-- 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图表實作components--chart--index.vue這裡定義了一個名為
ChartView 的元件,開放了4個可設定的屬性:寬度
width,高度
height,是否自動調整大小
autoResize(預設), 圖表的設定
chartOption。
Canvas 渲染圖表了,也可以用
SVG的,自選吧
<template> <div class="chart"> <div ref="chart" :style="{ height: height, width: width }" /> </div> </template> <script> // 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。 import * as echarts from 'echarts/core' // 引入柱状图图表,图表后缀都为 Chart import { BarChart } from 'echarts/charts' // 引入提示框,标题,直角坐标系组件,组件后缀都为 Component import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components' // 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步 import { CanvasRenderer } from 'echarts/renderers' // 注册必须的组件 echarts.use( [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer] ) export default { name: 'ChartView', props: { width: { type: String, default: '100%' }, height: { type: String, default: '350px' }, autoResize: { type: Boolean, default: true }, chartOption: { type: Object, required: true }, type: { type: String, default: 'canvas' } }, data() { return { chart: null } }, watch: { chartOption: { deep: true, handler(newVal) { this.setOptions(newVal) } } }, mounted() { this.initChart() if (this.autoResize) { window.addEventListener('resize', this.resizeHandler) } }, beforeDestroy() { if (!this.chart) { return } if (this.autoResize) { window.removeEventListener('resize', this.resizeHandler) } this.chart.dispose() this.chart = null }, methods: { resizeHandler() { this.chart.resize() }, initChart() { this.chart = echarts.init(this.$refs.chart, '', { renderer: this.type }) this.chart.setOption(this.chartOption) this.chart.on('click', this.handleClick) }, handleClick(params) { this.$emit('click', params) }, setOptions(option) { this.clearChart() this.resizeHandler() if (this.chart) { this.chart.setOption(option) } }, refresh() { this.setOptions(this.chartOption) }, clearChart() { this.chart && this.chart.clear() } } } </script>components--chart--index.js這裡主要利用
require.context,把
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 modulescomponents--chart--options這裡展示下如何封裝自己想要的圖表在
Echarts官方範例(https:/ /echarts.apache.org/examples/zh/index.html)隨便選了個範例
在options下新建一個
bar目錄,
bar目錄下新建一個
index.js檔。 (個人習慣而已,喜歡每個圖表都獨立資料夾存放。不喜歡這種方式的,可以不放目錄,直接js文件,但是
components--chart--index.js要對應修改下)
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方法是可以傳參的,具體使用的時候,圖表所需要配置的屬性,如:data資料、圖表顏色......等都可以作為參數傳。
import eChartFn from '@/components/chart/index.js' import ChartPanel from '@/components/chart/index.vue' Vue.component(ChartPanel.name, ChartPanel) Vue.prototype.$eChartFn = eChartFnchartTest這裡展示如何呼叫封裝的
bar圖表,主要程式碼如下
<chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" height="100%" />
export default { name: 'chartTestView', data() { return { chartOpt: {} } }, mounted() {}, created() { this.chartOpt = this.$eChartFn.testBar() }, methods: { }, watch: {} }
##可以試著拖曳瀏覽器的大小,可以看到,圖表也是隨著瀏覽器的拖曳自動縮放的。
程式碼
的目錄去程式碼
就找就好了。
和Echarts視覺化作品分享上找到,特別是Echarts視覺化作品分享,做專案的時候,可以去參考。 以上,封裝了
chart元件,按照上述方式,把圖表的option
配置和相關處理都放options
資料夾下面,呼叫圖表時傳對應的option
,也就幾行程式碼的事情,算是比較方便了。
元件很方便重複使用的,直接就可以使用了。 <h2 data-id="heading-13">补充</h2>
<p>评论里说想动态修改option里面的属性,稍微做了个例子,动态修改<code>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'])
效果如下:
效果图
加上:play-highlight="true"
属性就行
<chart-view class="chart-content" :chart-option="chartOpt2" :auto-resize="true" :play-highlight="true" height="100%" />
主要实现的代码在如下文件的playHighlightAction
方法里面,参考的echarts 饼图调用高亮示例 dispatchAction实现的。只是简单的高亮轮询,具体各种实现就自己看文档调样式了。
|-- src |-- components |-- chart |-- index.js // 实现自动化导入options里的图表option
以上是vue專案怎麼優雅的封裝echarts?方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!