前端数据展示(数据可视化、数据大屏等)可使用的工具比较多,很多第三方都提供了在线平台,比如阿里云,只需数据接口,在线配置一下界面即可使用。
- 阿里云的使用:利用阿里云物联网平台(IoT)实现WEB数据可视化
- 第三方平台对比:有哪些免费简单的数据展示(数据可视化)网站
也可以使用开源代码自己开发前端,本文所介绍的就是
ECharts
的开发,这是一款基于JavaScript 的开源可视化图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。
注意,本文是在Vue3版本下的Element-UI中使用,ECharts官网打开较慢,可尝试翻越。
安装
javascript">npm install echarts --save
调用
创建一个*.vue
页面,实现方法如下三种。
1. 本页数据
修改官方代码:https://echarts.apache.org/handbook/zh/basics/import
<template>
<div id="main" style="width: 600px;height:400px;"></div>
</template>
<script setup>javascript">
import * as echarts from 'echarts'
</script>
<script>javascript">
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]
}
]
});
}
}
</script>
2. 调用数据
修改官方的线性图示例图代码,修改为线性和柱状混合展示图
https://echarts.apache.org/examples/zh/editor.html?c=data-transform-filter&lang=js
另需准备一个json文件,下载自官网:https://echarts.apache.org/examples/data/asset/data/life-expectancy-table.json
本例中将文件放于根目录,本例中路径为:http://localhost/life-expectancy-table.json
<template>
<div id="main" style="width: 600px;height:400px;"></div>
</template>
<script setup>javascript">
import * as echarts from 'echarts'
import axios from 'axios'
import { nextTick } from 'vue'
</script>
<script>javascript">
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){
// 调用json
axios.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值
<template>
<div id="main" style="width: 600px;height:400px;"></div>
</template>
<script setup>javascript">
import * as echarts from 'echarts'
import axios from 'axios'
import { nextTick } from 'vue'
</script>
<script>javascript">
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;
// 调用json
await 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中使用(包括动态数据变化)
关于vue+elementui 访问本地json和跨域访问API问题
Vue3+ElementPlus+Axios实现从后端请求数据并渲染
Vue3中的Methods用法介绍
Vue3中你应该知道的setup!