easyEcharts简易echarts更新单独封装组件纯js代码

113 阅读1分钟

easyEcharts简易echarts更新日期:2022-12-05 15:40请下载示例务必插件只有bar组件 api 说明都在vue文件中【请下载整个示例项目展示new】 网站效果展示http://jstopo.top

easyEcharts图片.jpg 本次更新: 1、组件封装示例

2、bar状图新增左右切换数据,pie饼图新增线条外延百分比文字展示样式,

具体效果下载源码,或者先看网站实例。

1"折线",2"水球",3"圆环",4"图例pie",5"外延线pie",6"仪表盘",7"bar柱状图",8"地图",9"温度计",10"雷达图" 仅供广大爱好者学习使用,版权归属源码开发者本人。 联系微信号:jays611 更新2022-12-10,主要从新发布一个版本,分解了每个图表模块,更清晰源码

图表 plugin插件封装更新日期:2022-12-05 下午

封装插件折线line实例:

components中代码

export default{
		props:{
			datas:{//折线数据
				default: ()=>{
					return {}
				},
				type: Object
			}
		},
		data(){
			return{
				lineColorArr: [], //切换折线1,折线2{color:"#888"},{color:"#888"}3.0最新版本修改
				dataJSON: []//折线数据
			}
		},
		watch:{
			datas(newVal, oldVal){//监听传过来数据变化
				this.lineColorArr = newVal.lineColorArr;//赋值图例数据
				this.dataJSON = newVal.dataJSON;//折线数据赋值
				const query = uni.createSelectorQuery().in(this);
				query.select('.chart').boundingClientRect(data => {
					this.domEchart = data;
					this.lineDraw("line", data, -1);
				}).exec();
			},
		},
01、柱状图bar.vue
02、折线图line.vue
03、饼状图pie.vue
04、地图map.vue
05、雷达图radarMap.vue
06、温度计图wdj.vue
07、水球图bollarc.vue
08、水柱图waterColumn.vue
09、仪表盘图gauge.vue
10、环形图huan.vue

性能优越!不依赖任何JS包,让使用者可以自行查看分析原理)