| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> echarts交互成功的案例 -> 正文阅读 |
|
[JavaScript知识库]echarts交互成功的案例 |
<template> ??<div> ????<h1>测试echarts</h1> ????<div ??????id="main" ??????style="float:?left;?width:?100%;?height:?300px;?background:?#dcdfe6" ????></div> ??</div> </template> <script> import?*?as?echarts?from?"echarts"; import?axios?from?'axios' export?default?{ ??name:?"index", ??data()?{ ????return?{ ????}; ??}, ??mounted()?{ ????this.statistics(); ??}, ??methods:?{ ????statistics()?{ ????????const?that?=?this; ??????//?基于准备好的dom,初始化echarts实例 ??????var?myChart?=?echarts.init(document.getElementById("main")); ????????//?axios交互数据 ?????????axios.get( ??????????"接口", ??????????{?headers:?{?"content-type":?"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJtb2JpbGUiOiIxMzg3NjQ4MjU3MSIsImV4cCI6MTY1MTIzMzQxNn0.K4RKIax6L0oV-ggU4m5s54w4G6FrpSa9aHIeILwnFJQ"?}?} ????????) ????????.then((res)?=>?{ ??????????if?(res.status?===?200)?{ ?????????????console.log(res.data.data); ????????????that.arr?=?[]; ????????????that.qq?=?[]; ????????????for(var?item?in?res.data.data){ ???????????????that.arr.push(res.data.data[item]); ???????????????that.qq.push(item); ???????????} ??????????? ???????????console.log('arr',that.arr); ???????????console.log("打印",that.qq);???????????? ?????????????//?绘制图表 ???myChart.setOption({ ????title:?{ ??????text:?'异步数据加载示例' ????}, ????tooltip:?{}, ????legend:?{}, ????xAxis:?{ ??????data:that.qq, ????}, ????yAxis:?{}, ????series:?[ ??????{ ????????name:?'销量', ????????type:?'bar', ????????data:[ ??????????{value:1,name:'ss'}, ??????????{} ????????] ??????} ????] ??});} ????????}) ????????.catch((err)?=>?{}); ????}, ??}, }; </script> <style?scoped> #main?{ ??height:?500px; ??height:?500px; ??/*?background-color:?orange;?*/ } </style> |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/27 11:14:43- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |