vue echarts 动态数据,echarts定时更新数据
这篇文章主要为大家详细介绍了vue echarts实现数据实时更新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue echarts实现数据实时更新的具体代码，供大家参考，具体内容如下
今天在管理后台新增一个图表，用了埃查尔兹，记录一下
根据数据实时更新
安装
新公共管理安装电子图表-保存
然后在主页。射流研究…中配置一下
从"电子海图"导入电子海图
Vue.prototype.$echarts=echarts
可以了，接下来就是在你需要用的页面写了
//html宽高还是尽量固定吧，不然会出现一些奇奇怪怪的问题
div id=预览图表:style= { width: 600 px ，height: 600px}/div
data () {
返回{
echartUser: ，
echartRegistered:" "，
echartOnline: ，
}
}
//js
//这个是一个漏斗图
drawLine () {
让previewChart=this .$ e图表。init(文档。getelementbyid(预览图表))
previewChart.setOption({
颜色：[#4f8f98 ， #233541 ， #b32124]，
标题：{文本： 漏斗图 },
工具提示：{
触发器："项目",
格式化程序：" {a} br/{b} : {c}人
},
工具箱：{
功能：{
dataView: {readOnly: false}，
还原：{},
saveAsImage: {}
}
},
系列：[
{
名称：数据统计，
类型："漏斗",
左："10%",
top: 60，
//x2: 80，
底部：60,
宽度："80%",
//高度：{totalHeight} - y - y2，
最小值：0,
max: 100，
最小化："0%",
maxSize:“100%”，
排序："降序",
差距：2,
标签:{
秀：真的，
位置："内部"
},
标签:{
长度：10,
线型：{
宽度：1,
类型："实心"
}
},
项目样式：{
边框颜色： #fff ，
边框宽度：1
},
重点：{
标签:{
字体大小：18
}
},
//更新数据的时候，更新的是这个位置的数据
数据：[
{value: this.echartUser，name:用户人数},
{value: this.echartRegistered，name:注册人数},
{value: this.echartOnline，name:在线听力测试人数},
]
}
]
})
},
//获取数据
getTable () {
让开始时间=这个。搜索消息。开始时间
让endTime=this.searchMsg.endTime
让信道=
预览列表（开始时间、结束时间、频道)。然后(resp={
if (resp.errCode==0) {
//在这个位置使用下一滴答
//漏斗图数据
这个. nextTick( ()={
这个。echart注册=resp。数据。预览计数。电话计数
这个。echart user=resp。数据。预览计数。创建计数
这个。echartonline=resp。数据。预览计数。测试计数
//方法一，直接调用前面定义的绘制线()方法，然后给这个方法传参，然后在方法里面吧需要动态改变的地方替换成传参的这个变量达到动态改变数据的目的
这个。drawline(这个。echart注册，this.echartUser，this.echartOnline)
//方法二，最笨的办法，重新写一遍实例化展示的方法咯
让previewChart=this .$ e图表。init(文档。getelementbyid(预览图表))
previewChart.setOption({
系列：[{
数据：[
{值：resp。数据。预览计数。创建计数，名称：用户人数},
{值：resp。数据。预览计数。电话号码，姓名：注册人数},
{值：resp。数据。预览计数。测试计数，名称：在线听力测试人数},
]
}]
})
})
}否则{
这个消息错误(resp.msg)
}
})
},
搞定，这样就不用定义手表方法，简单粗暴的完成vue echrats的实时数据更新。
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。