vue.js如何将echarts封装为组件一键使用详解
2017-10-10 10:08
1816 查看
前言
本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
说明
做项目的时候为了让数据展示的更加直观,总会用到图表相关的控件,而说到图表控件第一时间当然想到ECharts这个开源项目,而它不像iview、element-ui这些组件使用起来那么便捷,需要绕一个小弯,为了图方便于是对ECharts进行了一层封装
控件演示
控件使用
概要
- 基于echarts的二次封装
- 由数据驱动
- 控件源码见src/components/charts
文档
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脚手架里面使用echarts 组件显示中国地图---亲测
- Vue.js路由组件vue-router使用方法详解
- Vue官方推荐AJAX组件axios.js使用方法详解与API
- 使用Vue开发动态刷新Echarts组件的教程详解
- Vue.js学习系列(八)---如何使用组件
- 如何制作Vuejs组件,并且在项目中使用
- 详解如何使用Node.js编写命令工具――以vue-cli为例
- 详解Vue.js 2.0 如何使用axios
- Vue.js分页组件实现:diVuePagination的使用详解
- 如何使用Vuex+Vue.js构建单页应用
- 如何理解vue.js组件的作用域是独立的
- 如何使用Vuex+Vue.js构建单页应用
- js多功能分页组件layPage使用方法详解
- 基于Vue如何封装分页组件
- 详解Vue.js――60分钟组件快速入门(上篇)
- Flask MVVM 开发(vue.js) - ajax如何同步更新地址栏history 以及使用浏览器返回按钮
- vue.js树形组件详解,删除双击增加分支
- Vue.js-----轻量高效的MVVM框架(八、使用组件)
- 详解如何较好的使用js