电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

在vue中使用Echarts畫曲線圖的示例

瀏覽:95日期:2022-11-17 09:00:46

現實的工作中, 數據不可能寫死的,所有的數據都應該通過發送請求進行獲取。所以本項目的需求是請求服務器獲得二維數組,并生成曲線圖。曲線圖的橫縱坐標均從獲得的數據中取得。Echarts官方文檔:

https://ecomfe.github.io/echarts-doc/public/en/index.html

前端框架使用vue,服務器使用express搭建,交互使用axios。

一.引入vue-resource

通過npm下載vue-resource

npm install vue-resource --save

在main.js中引入vue-resource并注冊

// main.jsimport VueResource from ’vue-resource’ Vue.use(VueResource)

二.設置aysnc-lineChart-option.js

將該曲線圖的沒有數據的option抽取到async-lineChart-option.js中。

此代碼在src/echarts/aysnc-lineChart-option.js文件中,代碼如下。

export const option = { title: { text: ’曲線圖’ }, backgroundColor: ’#FBFBFB’, tooltip: { trigger:’axis’ }, xAxis: { data: [], name: ’id’ }, yAxis: {}, series: [{ name: ’data’, type: ’line’, data: [], smooth : true, itemStyle: { normal: {color: ’hotpink’ } } }]}

三.在Curve.vue中請求數據

  1.從async-lineChart-option.js中引入option

2.在methods中添加drawLineChart()方法

3.在mounted()鉤子函數中調用drawBarChart()

4.添加加載動畫,在drawLineChart()方法中添加showLoading()和hideLoading()

此代碼在src/views/Curve.vue中,代碼如下:

<script> import {option} from ’../echarts/aysnc-lineChart-option.js’ //從aysnc-lineChart-option.js中引入option export default { name: ’Curve’, mounted() { //調用drawLineChart() this.drawLineChart(); }, data () { return { } }, methods:{drawLineChart() {// 基于準備好的dom,初始化echarts實例var myChart = this.$echarts.init(document.getElementById(’myChart’));// 繪制基本圖表myChart.setOption(option);//顯示加載動畫myChart.showLoading();//獲取數據this.$axios.get(’/getdate’).then(res => { //將json對象的所有id數據組成一個數組 var id = []; for(let i = 0;i < res.data.length;i++){ id.push(res.data[i].id); } //將json對象中的所有data數據組成一個數組 var data = []; for(let i = 0;i < res.data.length;i++){ data.push(res.data[i].data); } setTimeout(()=>{ //為了讓加載動畫效果明顯,這里加入了setTimeout,實現300ms延時 myChart.hideLoading(); //隱藏加載動畫 myChart.setOption({ xAxis: {data: id }, series: [{ data: data }] }) }, 300 )}) }, }, };</script>

四.效果圖

在vue中使用Echarts畫曲線圖的示例

以上就是在vue中使用Echarts畫曲線圖的示例的詳細內容,更多關于vue Echarts畫曲線圖的資料請關注好吧啦網其它相關文章!

標簽: Vue
相關文章:
主站蜘蛛池模板: 注塑模具_塑料模具_塑胶模具_范仕达【官网】_东莞模具设计与制造加工厂家 | 武汉画册印刷厂家-企业画册印刷-画册设计印刷制作-宣传画册印刷公司 - 武汉泽雅印刷厂 | 土壤养分检测仪_肥料养分检测仪_土壤水分检测仪-山东莱恩德仪器 大型多片锯,圆木多片锯,方木多片锯,板材多片锯-祥富机械有限公司 | 字典-新华字典-在线字典查字-字典趣| 原子吸收设备-国产分光光度计-光谱分光光度计-上海光谱仪器有限公司 | 东莞ERP软件_广州云ERP_中山ERP_台湾工厂erp系统-广东顺景软件科技有限公司 | 制氮设备-变压吸附制氮设备-制氧设备-杭州聚贤气体设备制造有限公司 | Dataforth隔离信号调理模块-信号放大模块-加速度振动传感器-北京康泰电子有限公司 | 箱式破碎机_移动方箱式破碎机/价格/厂家_【华盛铭重工】 | 亿立分板机_曲线_锯片式_走刀_在线式全自动_铣刀_在线V槽分板机-杭州亿协智能装备有限公司 | 工业洗衣机_工业洗涤设备_上海力净工业洗衣机厂家-洗涤设备首页 bkzzy在职研究生网 - 在职研究生招生信息咨询平台 | 上海冠顶工业设备有限公司-隧道炉,烘箱,UV固化机,涂装设备,高温炉,工业机器人生产厂家 | 恒温槽_恒温水槽_恒温水浴槽-上海方瑞仪器有限公司 | 广东教师资格网-广东教师资格证考试网 | 999范文网_优质范文下载写作帮手 | 云南成考网_云南成人高考报名网 粤丰硕水性环氧地坪漆-防静电自流平厂家-环保地坪涂料代理 | 光环国际-新三板公司_股票代码:838504 | 自动化生产线-自动化装配线-直流电机自动化生产线-东莞市慧百自动化有限公司 | 定时排水阀/排气阀-仪表三通旋塞阀-直角式脉冲电磁阀-永嘉良科阀门有限公司 | 手机存放柜,超市储物柜,电子储物柜,自动寄存柜,行李寄存柜,自动存包柜,条码存包柜-上海天琪实业有限公司 | 防潮防水通风密闭门源头实力厂家 - 北京酷思帝克门窗 | 骨龄仪_骨龄检测仪_儿童骨龄测试仪_品牌生产厂家【品源医疗】 | 天津市能谱科技有限公司-专业的红外光谱仪_红外测油仪_紫外测油仪_红外制样附件_傅里叶红外光谱技术生产服务厂商 | FAG轴承,苏州FAG轴承,德国FAG轴承-恩梯必传动设备(苏州)有限公司 | 渣土车电机,太阳能跟踪器电机,蜗轮蜗杆减速电机厂家-淄博传强电机 | MES系统工业智能终端_生产管理看板/安灯/ESOP/静电监控_讯鹏科技 | 反渗透水处理设备|工业零排放|水厂设备|软化水设备|海南净水设备--海南水处理设备厂家 | 合肥白癜风医院_[治疗白癜风]哪家好_合肥北大白癜风医院 | 悬浮拼装地板_幼儿园_篮球场_悬浮拼接地板-山东悬浮拼装地板厂家 | 防爆型气象站_农业气象站_校园气象站_农业四情监测系统「山东万象环境科技有限公司」 | 包装机_厂家_价格-山东包装机有限公司 | 粤丰硕水性环氧地坪漆-防静电自流平厂家-环保地坪涂料代理 | Eiafans.com_环评爱好者 环评网|环评论坛|环评报告公示网|竣工环保验收公示网|环保验收报告公示网|环保自主验收公示|环评公示网|环保公示网|注册环评工程师|环境影响评价|环评师|规划环评|环评报告|环评考试网|环评论坛 - Powered by Discuz! | 博博会2021_中国博物馆及相关产品与技术博览会【博博会】 | 数控专用机床,专用机床,自动线,组合机床,动力头,自动化加工生产线,江苏海鑫机床有限公司 | 电缆接头_防水接头_电缆防水接头_防水电缆接头_上海闵彬 | 右手官网|右手工业设计|外观设计公司|工业设计公司|产品创新设计|医疗产品结构设计|EMC产品结构设计 | 学叉车培训|叉车证报名|叉车查询|叉车证怎么考-工程机械培训网 | 太平洋亲子网_健康育儿 品质生活| 防渗膜厂家|养殖防渗膜|水产养殖防渗膜-泰安佳路通工程材料有限公司 | 干式磁选机_湿式磁选机_粉体除铁器-潍坊国铭矿山设备有限公司 |