vue.js如何將echarts封裝為組件一鍵使用詳解
前言
本文主要給大家介紹了關(guān)于vue.js將echarts封裝為組件一鍵使用的相關(guān)內(nèi)容,分享出來供大家參考學(xué)習(xí),下面話不多說了,來一起看看詳細(xì)的介紹吧。
說明
做項(xiàng)目的時候?yàn)榱俗寯?shù)據(jù)展示的更加直觀,總會用到圖表相關(guān)的控件,而說到圖表控件第一時間當(dāng)然想到ECharts這個開源項(xiàng)目,而它不像iview、element-ui這些組件使用起來那么便捷,需要繞一個小彎,為了圖方便于是對ECharts進(jìn)行了一層封裝
控件演示
控件使用
概要
- 基于echarts的二次封裝
- 由數(shù)據(jù)驅(qū)動
- 控件源碼見src/components/charts
文檔
props
屬性 | 說明 | 類型 |
---|---|---|
_id | 圖表唯一標(biāo)識,當(dāng)id重復(fù)將會報(bào)錯 | String |
_titleText | 圖表標(biāo)題 | String |
_xText | x軸描述 | String |
_yText | y軸描述 | String |
_chartData | 圖表數(shù)據(jù) | Array |
_type | 圖表類型,提供三種(LineAndBar/LineOrBar/Pie) |
調(diào)用示例
<chart :_id="'testCharts'" :_titleText="'訪問量統(tǒng)計(jì)'" :_xText="'類別'" :_yText="'總訪問量'" :_chartData="chartData" :_type="'Pie'"></chart> //測試數(shù)據(jù)樣例 [["類別1",10],["類別2",20]]
實(shí)現(xiàn)方式
創(chuàng)建一個待渲染的dom
<template> <div :id="_id" class="chart"></div> </template>
繪制函數(shù)
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: '', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/> : {c} (vvxyksv9kd%)" }, legend: { orient: 'vertical', left: 'left', data: xAxisData }, series : [ { name: xText, type: 'pie', radius : '55%', center: ['50%', '60%'], data:pieData, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }) }
掛載結(jié)束、數(shù)據(jù)源改變時重繪
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 } }
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持。
相關(guān)文章
vue router自動判斷左右翻頁轉(zhuǎn)場動畫效果
最近公司項(xiàng)目比較少終于有空來記錄一下自己對vue-router的一些小小的使用心得,本文給大家分享vue router自動判斷左右翻頁轉(zhuǎn)場動畫效果,感興趣的朋友一起看看吧2017-10-10vue 封裝自定義組件之tabal列表編輯單元格組件實(shí)例代碼
這篇文章主要介紹了vue 封裝自定義組件tabal列表編輯單元格組件實(shí)例代碼,需要的朋友可以參考下2017-09-09Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件
這篇文章主要介紹了Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件的相關(guān)知識,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04詳解vue-router的Import異步加載模塊問題的解決方案
這篇文章主要介紹了詳解vue-router的Import異步加載模塊問題的解決方案,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05vue實(shí)現(xiàn)動態(tài)顯示與隱藏底部導(dǎo)航的方法分析
這篇文章主要介紹了vue實(shí)現(xiàn)動態(tài)顯示與隱藏底部導(dǎo)航的方法,結(jié)合實(shí)例形式分析了vue.js針對導(dǎo)航隱藏與顯示的路由配置、事件監(jiān)聽等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02使用Vite2+Vue3渲染Markdown文檔的方法實(shí)踐
本文主要介紹了Vite2+Vue3渲染Markdown文檔的方法實(shí)踐,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的可以了解一下2021-08-08Vue組織架構(gòu)樹圖組件vue-org-tree的使用解析
這篇文章主要介紹了Vue組織架構(gòu)樹圖組件vue-org-tree的使用解析,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08