easyEcharts简易echarts更新日期:2022-12-05 15:40请下载示例务必插件只有bar组件 api 说明都在vue文件中【请下载整个示例项目展示new】 网站效果展示http://jstopo.top
本次更新:
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包,让使用者可以自行查看分析原理)