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

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

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

瀏覽:92日期: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
相關文章:
主站蜘蛛池模板: 螺旋压榨机-刮泥机-潜水搅拌机-电动泥斗-潜水推流器-南京格林兰环保设备有限公司 | 四川实木门_成都实木门 - 蓬溪聚成门业有限公司 | 工业铝型材-铝合金电机壳-铝排-气动执行器-山东永恒能源集团有限公司 | 数年网路-免费在线工具您的在线工具箱-shuyear.com | 南方珠江-南方一线电缆-南方珠江科技电缆-南方珠江科技有限公司 南汇8424西瓜_南汇玉菇甜瓜-南汇水蜜桃价格 | 杭州火蝠电商_京东代运营_拼多多全托管代运营【天猫代运营】 | 自动记录数据电子台秤,记忆储存重量电子桌称,设定时间记录电子秤-昆山巨天 | 智能汉显全自动量热仪_微机全自动胶质层指数测定仪-鹤壁市科达仪器仪表有限公司 | 棉服定制/厂家/公司_棉袄订做/价格/费用-北京圣达信棉服 | 招商帮-一站式网络营销服务|搜索营销推广|信息流推广|短视视频营销推广|互联网整合营销|网络推广代运营|招商帮企业招商好帮手 | 农业仪器网 - 中国自动化农业仪器信息交流平台 | 闸阀_截止阀_止回阀「生产厂家」-上海卡比阀门有限公司 | 江苏全风,高压风机,全风环保风机,全风环形高压风机,防爆高压风机厂家-江苏全风环保科技有限公司(官网) | 换链神器官网-友情链接交换、购买交易于一体的站长平台 | WTB5光栅尺-JIE WILL磁栅尺-B60数显表-常州中崴机电科技有限公司 | 细胞染色-流式双标-试剂盒免费代做-上海研谨生物科技有限公司 | 插针变压器-家用电器变压器-工业空调变压器-CD型电抗器-余姚市中驰电器有限公司 | 上海小程序开发-小程序制作-上海小程序定制开发公司-微信商城小程序-上海咏熠 | 欧盟ce检测认证_reach检测报告_第三方检测中心-深圳市威腾检验技术有限公司 | 硅胶布|电磁炉垫片|特氟龙胶带-江苏浩天复合材料有限公司 | 橡胶粉碎机_橡胶磨粉机_轮胎粉碎机_轮胎磨粉机-河南鼎聚重工机械制造有限公司 | 厌氧反应器,IC厌氧反应器,厌氧三相分离器-山东创博环保科技有限公司 | 智能监控-安防监控-监控系统安装-弱电工程公司_成都万全电子 | 真空冷冻干燥机_国产冻干机_冷冻干燥机_北京四环冻干 | 滚珠丝杆升降机_螺旋升降机_丝杠升降机-德迈传动 | 衢州装饰公司|装潢公司|办公楼装修|排屋装修|别墅装修-衢州佳盛装饰 | 加热制冷恒温循环器-加热制冷循环油浴-杭州庚雨仪器有限公司 | 蓄电池回收,ups电池后备电源回收,铅酸蓄电池回收,机房电源回收-广州益夫铅酸电池回收公司 | 圆形振动筛_圆筛_旋振筛_三次元振动筛-河南新乡德诚生产厂家 | 复合土工膜厂家|hdpe防渗土工膜|复合防渗土工布|玻璃纤维|双向塑料土工格栅-安徽路建新材料有限公司 | 飞歌臭氧发生器厂家_水处理臭氧发生器_十大臭氧消毒机品牌 | 青岛侦探调查_青岛侦探事务所_青岛调查事务所_青岛婚外情取证-青岛狄仁杰国际侦探公司 | 微型实验室真空泵-无油干式真空泵-微型涡旋耐腐蚀压缩机-思科涡旋科技(杭州)有限公司 | 铁盒_铁罐_马口铁盒_马口铁罐_铁盒生产厂家-广州博新制罐 | 假肢-假肢价格-假肢厂家-河南假肢-郑州市力康假肢矫形器有限公司 | 退火炉,燃气退火炉,燃气热处理炉生产厂家-丹阳市丰泰工业炉有限公司 | 慈溪麦田广告公司,提供慈溪广告设计。 | 石家庄网站建设|石家庄网站制作|石家庄小程序开发|石家庄微信开发|网站建设公司|网站制作公司|微信小程序开发|手机APP开发|软件开发 | 水平筛厂家-三轴椭圆水平振动筛-泥沙震动筛设备_山东奥凯诺矿机 包装设计公司,产品包装设计|包装制作,包装盒定制厂家-汇包装【官方网站】 | 泰国专线_泰国物流专线_广州到泰国物流公司-泰廊曼国际 | 拉力测试机|材料拉伸试验机|电子拉力机价格|万能试验机厂家|苏州皖仪实验仪器有限公司 |