阅读:5851回复:1
DataV 你值得拥有的大屏展示工具文章目录 数据填充篇总结 DataV
效果图
怎么玩
尝鲜篇
<script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script>
<div id="demo"> </div>
<dv-decoration-9 style="width:150px;height:150px;">66%<\/dv-decoration-9>
<script> var app = new Vue({ el: '#demo' }) </script>
<!DOCTYPE html> <html> <head> <title>DataV</title> <script src="https://unpkg.com/vue"></script> <!--调试版--> <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script> </head> <body> <div id="demo"> <dv-decoration-9 style="width:150px;height:150px;">66%</dv-decoration-9> </div> <script> var app = new Vue({ el: '#demo' }) </script> </body> </html>
进阶篇
实现步骤
<script> var app = new Vue({ el: '#demo', data: { "config": { "data": [66, 45], "shape": "roundRect" } } }) </script>
<!DOCTYPE html> <html> <head> <title>DataV</title> <script src="https://unpkg.com/vue"></script> <!--调试版--> <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script> </head> <body> <div id="demo"> <dv-water-level-pond :config="config" style="width:150px;height:200px" /> </div> <script> var app = new Vue({ el: '#demo', data: { "config": { "data": [66, 45], "shape": "roundRect" } } }) </script> </body> </html>
数据填充篇
实现步骤
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script> var app = new Vue({ el: '#demo', data: { "config": { "data": [85, 15], "shape": "roundRect" } }, methods :{ getdata: function(){ axios .get('/static/demo.json') .then(response => (this.config = response.data)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }, mounted() { //this.timer = setInterval(()=>{this.getdata();},1000); this.getdata(); } }) </script>
{ "data": [88, 55], "shape": "roundRect" }
<!DOCTYPE html> <html> <head> <title>DataV</title> <script src="https://unpkg.com/vue"></script> <!--调试版--> <script src="https://unpkg.com/@jiaminghi/data-view/dist/datav.map.vue.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> </head> <body> <div id="demo"> <dv-water-level-pond :config="config" style="width:150px;height:200px" /> </div> <script> var app = new Vue({ el: '#demo', data: { "config": { "data": [85, 15], "shape": "roundRect" } }, methods :{ getdata: function(){ axios .get('/static/demo.json') .then(response => (this.config = response.data)) .catch(function (error) { // 请求失败处理 console.log(error); }); } }, mounted() { //this.timer = setInterval(()=>{this.getdata();},1000); this.getdata(); } }) </script> </body> </html>
总结
|
|
沙发#
发布于:2020-10-23 12:55
|
|