做項目的時候為了讓數據展示的更加直觀,總是會用到圖表相關的控件,而說到圖表控件第一時間當然想到ECharts這個開源項目,而它不像iview、element-ui這些組件使用起來那麼便捷,需要繞一個小彎,為了圖方便於是對ECharts進行了一層封裝。
Echarts 、 Remodal和Pikaday是我們在開發後台管理類別網站時常用的三個第三方元件,本文主要給大家介紹了關於vue.js將echarts封裝為元件一鍵使用的相關內容,分享出來供大家參考學習,下面話不多說了,來一起看看詳細的介紹吧。
控制項示範
控制項使用
概要
基於echarts的二次封裝
由資料驅動
控制項原始碼見src/components/charts
#文件
props
##屬性 | 說明 | 類型 |
#_id | 圖表唯一標識,當id重複將會報錯 | |
_titleText | #圖表標題 | |
_xText | x軸描述 | |
#_yText |
y軸描述 |
_chartData
圖表資料
#_type
圖表類型,提供三種( LineAndBar/LineOrBar/Pie)
#呼叫範例
##
<chart :_id="'testCharts'" :_titleText="'访问量统计'" :_xText="'类别'" :_yText="'总访问量'" :_chartData="chartData" :_type="'Pie'"></chart> //测试数据样例 [["类别1",10],["类别2",20]]
實作方式
建立一個待渲染的dom
<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: '', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, 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)' } } } ] }) }
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 } }
以上是vue.js將echarts封裝為元件一鍵使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!