做项目的时候为了让数据展示的更加直观,总会用到图表相关的控件,而说到图表控件第一时间当然想到ECharts这个开源项目,而它不像iview、element-ui这些组件使用起来那么便捷,需要绕一个小弯,为了图方便于是对ECharts进行了一层封装。
Echarts 、 Remodal和Pikaday是我们在开发后台管理类网站时常用的三个第三方组件,本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。
控件演示
控件使用
概要
基于echarts的二次封装
由数据驱动
控件源码见src/components/charts
文档
props
属性 | 说明 | 类型 |
---|---|---|
_id | 图表唯一标识,当id重复将会报错 | String |
_titleText | 图表标题 | String |
_xText | x轴描述 | String |
_yText | y轴描述 | String |
_chartData | 图表数据 | Array |
_type | 图表类型,提供三种(LineAndBar/LineOrBar/Pie) |
调用示例
1 2 3 4 5 6 7 8 |
|
实现方式
创建一个待渲染的dom
1 2 3 |
|
绘制函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
|
挂载结束、数据源改变时重绘
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
|
相关推荐:
Atas ialah kandungan terperinci vue.js将echarts封装为组件一键使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!