Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图

一、效果图

二、资源

主题编辑器
ECharts 教程

实现代码------想要进行实战的同学可以研究以下代码，下面的代码就是生成以上图片的代码，仔细研究10分钟就可以学会了，Vue上使用echarts还是很简单的

<template><div><div><p><span>技术统计</span></p></div><div id="myChart"style="width: 500px;height:500px;position: absolute;left: 19%;top: 24%;"></div><div id="myChart1"style="width: 500px;height:500px;position: absolute;left: 58%;top: 24%;"></div></div>
</template><script>
import * as echarts from 'echarts';require('echarts/lib/chart/bar')
require('echarts/lib/chart/pie')require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')export default {data(){return{allPeopleNum:0,superManagerNum:0,agencyNum:0,factoryManagerNum:0,factoryNum:0,equipmentNum:0,orderNum:0,productNum:0,}},mounted() {this.drawLine0();this.drawLine1();},methods: {async drawLine0() {const {data:res} = await this.$http.get("getBusinessNum");this.factoryNum=res.factoryNum;this.equipmentNum=res.equipmentNum;this.orderNum=res.orderNum;this.productNum=res.productNum;let myChart = echarts.init(document.getElementById('myChart'));myChart.setOption({title: {text: '                                     业务数据'},tooltip: {},xAxis: {axisLabel: {interval: 0 },data: ['云工厂', '工厂设备', '订单', '生产产品'],},yAxis: [{type: 'value',axisLabel: {formatter: '{value}'}}],series: [{name: '名称',type: 'bar',data:[{value:this.factoryNum,itemStyle:{normal:{color:'#516b91'}}},{value:this.equipmentNum,itemStyle:{normal:{color:'#59c4e6'}}},{value:this.orderNum,itemStyle:{normal:{color:'#edafda'}}},{value:this.productNum,itemStyle:{normal:{color:'#93b7e3'}}}],}]});},async drawLine1() {const {data:res} = await this.$http.get("getPeopleNum");this.allPeopleNum=res.allPeopleNum;this.superManagerNum=res.superManagerNum;this.agencyNum=res.agencyNum;this.factoryManagerNum=res.factoryManagerNum;let myChart = echarts.init(document.getElementById('myChart1'))myChart.setOption({title: {text: '                                      人员数据'},series : [{type: 'pie',color: ['#6a92ea','#B6A2DE','#2EC7C9','#FFCB8C'],radius: '67%',data:[{value:this.allPeopleNum, name:'总人数'},{value:this.superManagerNum, name:'超级管理员'},{value:this.agencyNum, name:'经销商'},{value:this.factoryManagerNum, name:'云工厂管理员'},]}]});},},}
</script><style lang="less" scoped>p {text-align: center;text-indent: -2em;span {font-weight: bolder;font-size: 21px;}
}</style>

Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图相关推荐

node 创建静态web服务器（下）（处理异步获取数据的两种方式）
接上一章. 上一章我们说创建的静态web服务器只能识别html,css,js文件,功能较为单一,且图片格式为text/html,这是不合理的. 本章,我们将解决该问题. 这里,我们先准备好一个json ...
揭秘 React 异步获取数据的进化历程
点击上方前端瓶子君,关注公众号回复算法,加入前端编程面试算法每日一题群本篇文章,以模拟从『Hacker News API[1]』获取热门文章为例,通过一步步地代码优化和封装,阐述 React 异 ...
vue+vuex+axios从后台获取数据存入vuex，组件之间共享数据
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今 ...
ajax异步获取数据后动态向表格中添加数据的页面
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...
ajax异步获取数据后动态向表格中添加数据(行)
因为某些原因,项目中突然需要做自己做个ajax异步获取数据后动态向表格中添加数据的页面,网上找了半天都没有看到现成的,决定自己写个例子 1.HTML页面 [html] view plaincopyp ...
vue中js文件里获取this（vue实例）
vue中js文件里获取this(vue实例) 1,在main.js中抛出vue实例,在需要用到的地方引入即可 main.js里let vueThis= new Vue({el: '#app',rout ...
vue使用echarts是，动态获取数据，动态更新图表数据。
当我们初始化完数据后,需要更新数据时,虽然请求成功,获取到新的数据.但是echarts的图表没有根据数据更新而更新,原因是数据更新了,但echarts还是初始化时的那个. 我们可以在请求成功后,重新初 ...
vue 父组件获取接口值传到子组件_vue 项目中 “父组件” 异步获取数据之后，传递给子组件不显示...
有两个组件:一个为 transaction(父组件),一个为 transactionList (子组件): 上图为一个列表页,为父组件,在父组件里面的data中定义了数据列表, template中: ...
Vue使用ajax或者axios获取数据，能获取到数据但是页面没有更新
问题: 用ajax或者axios,get数据是正常的.但是渲染数据时data一直为空问题代码: 下面代码看起来是正常的,但是当运行的时候会报错: 这时候你运行时会发现,数据可以请求到,但是会报错Ty ...

Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图

Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图

一、效果图

二、资源

主题编辑器

ECharts 教程

实现代码------想要进行实战的同学可以研究以下代码，下面的代码就是生成以上图片的代码，仔细研究10分钟就可以学会了，Vue上使用echarts还是很简单的

Vue：echarts画图实战，异步获取数据在Vue上使用echarts进行画图相关推荐

最新文章

热门文章