长沙企业网站建设公,怎样制作游戏软件,品牌设计公司品牌设计公司排名,wordpress上传logo前端数据展示#xff08;数据可视化、数据大屏等#xff09;可使用的工具比较多#xff0c;很多第三方都提供了在线平台#xff0c;比如阿里云#xff0c;只需数据接口#xff0c;在线配置一下界面即可使用。 阿里云的使用#xff1a;利用阿里云物联网平台#xff08;I… 前端数据展示数据可视化、数据大屏等可使用的工具比较多很多第三方都提供了在线平台比如阿里云只需数据接口在线配置一下界面即可使用。 阿里云的使用利用阿里云物联网平台IoT实现WEB数据可视化第三方平台对比有哪些免费简单的数据展示数据可视化网站 也可以使用开源代码自己开发前端本文所介绍的就是ECharts的开发这是一款基于JavaScript 的开源可视化图表库可以流畅的运行在 PC 和移动设备上兼容当前绝大部分浏览器IE9/10/11ChromeFirefoxSafari等底层依赖矢量图形库 ZRender提供直观交互丰富可高度个性化定制的数据可视化图表。 官方网站https://echarts.apache.org/zh/index.html官方示例https://echarts.apache.org/examples/zh/index.html官方指南https://echarts.apache.org/handbook/zh/get-started/ 注意本文是在Vue3版本下的Element-UI中使用ECharts官网打开较慢可尝试翻越。 安装
npm install echarts --save调用
创建一个*.vue页面实现方法如下三种。
1. 本页数据
修改官方代码https://echarts.apache.org/handbook/zh/basics/import
templatediv idmain stylewidth: 600px;height:400px;/div
/templatescript setup
import * as echarts from echarts
/scriptscript
export default {data() {return {}},created() {},// DOM 渲染完成触发mounted() {// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main))// 绘制图表myChart.setOption({title: {text: ECharts 入门示例},tooltip: {},xAxis: {data: [衬衫, 羊毛衫, 雪纺衫, 裤子, 高跟鞋, 袜子]},yAxis: {},series: [{name: 销量,type: bar,data: [5, 20, 36, 10, 10, 20]}]}); }
}
/script2. 调用数据
修改官方的线性图示例图代码修改为线性和柱状混合展示图 https://echarts.apache.org/examples/zh/editor.html?cdata-transform-filterlangjs 另需准备一个json文件下载自官网https://echarts.apache.org/examples/data/asset/data/life-expectancy-table.json 本例中将文件放于根目录本例中路径为http://localhost/life-expectancy-table.json templatediv idmain stylewidth: 600px;height:400px;/div
/templatescript setup
import * as echarts from echarts
import axios from axios
import { nextTick } from vue
/scriptscript
export default {data() {return {}},created() {},// DOM 渲染完成触发mounted() {// 数据来源注意自行修改var url http://localhost/life-expectancy-table.json;// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main))// 每隔三秒发起请求获取数据并绘制图表nextTick(() {setInterval(() {// 执行this.run(url, myChart);}, 3000)}) },methods: {// 执行run (url, obj){// 调用jsonaxios.get(url).then(res {let option {dataset: [{id: dataset_raw,source: res.data},{id: dataset_since_1950_of_germany,fromDatasetId: dataset_raw,transform: {type: filter,config: {and: [{ dimension: Year, gte: 1950 },{ dimension: Country, : Germany }]}}},{id: dataset_since_1950_of_france,fromDatasetId: dataset_raw,transform: {type: filter,config: {and: [{ dimension: Year, gte: 1950 },{ dimension: Country, : France }]}}}],title: {text: Income of Germany and France since 1950},tooltip: {trigger: axis},xAxis: {type: category,nameLocation: middle},yAxis: {name: Income},series: [{type: line,datasetId: dataset_since_1950_of_germany,showSymbol: false,encode: {x: Year,y: Income,itemName: Year,tooltip: [Income]}},{type: bar,datasetId: dataset_since_1950_of_france,showSymbol: false,encode: {x: Year,y: Income,itemName: Year,tooltip: [Income]}}]};obj.setOption(option);})} }
}
/script展示图 可以顺便学习一下vue3中 nextTick 的具体用法。
3. 异步调用
还是上面的例子实现略有不同setInterval()中原有的run()函数改为了getOpt()函数主要用来学习axios如何返回值~~ 学习获取axios的return值
templatediv idmain stylewidth: 600px;height:400px;/div
/templatescript setup
import * as echarts from echarts
import axios from axios
import { nextTick } from vue
/scriptscript
export default {data() {return {}},created() {},// DOM 渲染完成触发mounted() {// 数据来源注意自行修改var url http://localhost/life-expectancy-table.json;// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main))// 每隔三秒发起请求获取数据并绘制图表nextTick(() {setInterval(() {// 与上面不同的实现方式this.getOpt(url).then(opt{myChart.setOption(opt);}); }, 3000)}) },methods: {// 获取async getOpt (url){let option;// 调用jsonawait axios.get(url).then(res {option {dataset: [{id: dataset_raw,source: res.data},{id: dataset_since_1950_of_germany,fromDatasetId: dataset_raw,transform: {type: filter,config: {and: [{ dimension: Year, gte: 1950 },{ dimension: Country, : Germany }]}}},{id: dataset_since_1950_of_france,fromDatasetId: dataset_raw,transform: {type: filter,config: {and: [{ dimension: Year, gte: 1950 },{ dimension: Country, : France }]}}}],title: {text: Income of Germany and France since 1950},tooltip: {trigger: axis},xAxis: {type: category,nameLocation: middle},yAxis: {name: Income},series: [{type: line,datasetId: dataset_since_1950_of_germany,showSymbol: false,encode: {x: Year,y: Income,itemName: Year,tooltip: [Income]}},{type: bar,datasetId: dataset_since_1950_of_france,showSymbol: false,encode: {x: Year,y: Income,itemName: Year,tooltip: [Income]}}]};})return option;} }
}
/script4. 多表同时
结合两种不同的图标放在一个页面其中新增一种表为 https://echarts.apache.org/examples/zh/editor.html?cgauge-ring
templatediv idmain stylewidth: 600px;height:400px;float:left/divdiv idsub stylewidth: 600px;height:400px;float:left;/div
/templatescript setup
import * as echarts from echarts
import axios from axios
import { nextTick } from vue
/scriptscript
export default {data() {return {}},created() {},// DOM 渲染完成触发mounted() {// 数据来源注意自行修改var url http://localhost/life-expectancy-table.json;// 基于准备好的dom初始化echarts实例var myMain echarts.init(document.getElementById(main))var mySub echarts.init(document.getElementById(sub))var option;const gaugeData [{value: 20,name: Perfect,title: {offsetCenter: [0%, -30%]},detail: {valueAnimation: true,offsetCenter: [0%, -20%]}},{value: 40,name: Good,title: {offsetCenter: [0%, 0%]},detail: {valueAnimation: true,offsetCenter: [0%, 10%]}},{value: 60,name: Commonly,title: {offsetCenter: [0%, 30%]},detail: {valueAnimation: true,offsetCenter: [0%, 40%]}}];option {series: [{type: gauge,startAngle: 90,endAngle: -270,pointer: {show: false},progress: {show: true,overlap: false,roundCap: true,clip: false,itemStyle: {borderWidth: 1,borderColor: #464646}},axisLine: {lineStyle: {width: 40}},splitLine: {show: false,distance: 0,length: 10},axisTick: {show: false},axisLabel: {show: false,distance: 50},data: gaugeData,title: {fontSize: 14},detail: {width: 50,height: 14,fontSize: 14,color: inherit,borderColor: inherit,borderRadius: 20,borderWidth: 1,formatter: {value}%}}]};// 每隔三秒发起请求获取数据并绘制图表nextTick(() {setInterval(() {// main部分this.getOptMain(url).then(opt{myMain.setOption(opt);});// sub部分gaugeData[0].value (Math.random() * 100).toFixed(2);gaugeData[1].value (Math.random() * 100).toFixed(2);gaugeData[2].value (Math.random() * 100).toFixed(2);mySub.setOption({series: [{data: gaugeData,pointer: {show: false}}]});}, 3000)})option mySub.setOption(option);},methods: {// 获取async getOptMain (url){let option;// 调用jsonawait axios.get(url).then(res {option {dataset: [{id: dataset_raw,source: res.data},{id: dataset_since_1950_of_germany,fromDatasetId: dataset_raw,transform: {type: filter,config: {and: [{ dimension: Year, gte: 1950 },{ dimension: Country, : Germany }]}}},{id: dataset_since_1950_of_france,fromDatasetId: dataset_raw,transform: {type: filter,config: {and: [{ dimension: Year, gte: 1950 },{ dimension: Country, : France }]}}}],title: {text: Income of Germany and France since 1950},tooltip: {trigger: axis},xAxis: {type: category,nameLocation: middle},yAxis: {name: Income},series: [{type: line,datasetId: dataset_since_1950_of_germany,showSymbol: false,encode: {x: Year,y: Income,itemName: Year,tooltip: [Income]}},{type: bar,datasetId: dataset_since_1950_of_france,showSymbol: false,encode: {x: Year,y: Income,itemName: Year,tooltip: [Income]}}]};})return option;}}
}
/script 参考 Vue Element UI 之ECharts图表 Echarts 在vue3x中使用包括动态数据变化 优化了三年经验者的Echarts卡顿 关于vueelementui 访问本地json和跨域访问API问题 Vue3ElementPlusAxios实现从后端请求数据并渲染 Vue3中的Methods用法介绍 Vue3中你应该知道的setup
