周池勋,中影益田假日影城,康乃馨图片大全
前言
本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
说明
做项目的时候为了让数据展示的更加直观,总会用到图表相关的控件,而说到图表控件第一时间当然想到echarts这个开源项目,而它不像iview、element-ui这些组件使用起来那么便捷,需要绕一个小弯,为了图方便于是对echarts进行了一层封装
控件演示
控件使用
概要
文档
props
属性 | 说明 | 类型 |
---|---|---|
_id | 图表唯一标识,当id重复将会报错 | string |
_titletext | 图表标题 | string |
_xtext | x轴描述 | string |
_ytext | y轴描述 | string |
_chartdata | 图表数据 | array |
_type | 图表类型,提供三种(lineandbar/lineorbar/pie) |
调用示例
<chart :_id="'testcharts'" :_titletext="'访问量统计'" :_xtext="'类别'" :_ytext="'总访问量'" :_chartdata="chartdata" :_type="'pie'"></chart> //测试数据样例 [["类别1",10],["类别2",20]]
实现方式
创建一个待渲染的dom
<template> <div :id="_id" class="chart"></div> </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+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论