There are many tools available for front-end data display (data visualization, data big screen, etc.). Many third parties provide online platforms, such as Alibaba Cloud. You only need a data interface and configure the interface online to use it.
- Use of Alibaba Cloud: Using Alibaba Cloud Internet of Things Platform (IoT) to realize WEB data visualization
- Third-party platform comparison: What free and simple data display (data visualization) websites are there?
You can also use open source code to develop the front end yourself. This article introduces the development of
ECharts, which is an open source visual chart library based on JavaScript. It can run smoothly on PCs and mobile devices and is compatible with current Most browsers (IE9/10/11, Chrome, Firefox, Safari, etc.) rely on the vector graphics library ZRender to provide intuitive, interactive, and highly customizable data visualization charts.
- Official website: https://echarts.apache.org/zh/index.html
- Official examples: https://echarts.apache.org/examples/zh/index.html
- Official guide: https://echarts.apache.org/handbook/zh/get-started/
Note that this article is used in Element-UI under the Vue3 version. The ECharts official website is slow to open, so you can try to skip it.
Installation
npm install echarts --save
Call
Create a *.vue page and implement it in the following three ways.
1. Data on this page
Modify the official code: https://echarts.apache.org/handbook/zh/basics/import
<template>
<div id="main" style="width: 600px;height:400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
</script>
<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->}
},
created() {<!-- -->},
// Triggered when DOM rendering is completed
mounted() {<!-- -->
// Based on the prepared dom, initialize the echarts instance
var myChart = echarts.init(document.getElementById('main'))
// Draw the chart
myChart.setOption({<!-- -->
title: {<!-- -->
text: 'ECharts Getting Started Example'
},
tooltip: {<!-- -->},
xAxis: {<!-- -->
data: ['shirt', 'cardigan', 'chiffon shirt', 'pants', 'high heels', 'socks']
},
yAxis: {<!-- -->},
series: [
{<!-- -->
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
});
}
}
</script>
2. Calling data
Modify the official linear chart example code to a mixed linear and columnar display chart
https://echarts.apache.org/examples/zh/editor.html?c=data-transform-filter & amp;lang=js
You also need to prepare a json file, download it from the official website: https://echarts.apache.org/examples/data/asset/data/life-expectancy-table.json
In this example, the file is placed in the root directory. In this example, the path is:http://localhost/life-expectancy-table.json
<template>
<div id="main" style="width: 600px;height:400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import axios from 'axios'
import {<!-- --> nextTick } from 'vue'
</script>
<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->}
},
created() {<!-- -->},
// Triggered when DOM rendering is completed
mounted() {<!-- -->
//Data source, be careful to modify it yourself
var url = 'http://localhost/life-expectancy-table.json';
// Based on the prepared dom, initialize the echarts instance
var myChart = echarts.init(document.getElementById('main'))
// Initiate a request every three seconds to obtain data and draw charts
nextTick(() => {<!-- -->
setInterval(() => {<!-- -->
\t// implement
this.run(url, myChart);
}, 3000)
})
},
methods: {<!-- -->
\t// implement
run (url, obj){<!-- -->
// call 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>
plan
- You can also learn the specific usage of nextTick in vue3.
3. Asynchronous call
Still the above example (the implementation is slightly different), the original run() function in setInterval() has been changed to the getOpt() function, mainly Used to learn how axios returns values~~
Learning: Get the return value of axios
<template>
<div id="main" style="width: 600px;height:400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import axios from 'axios'
import {<!-- --> nextTick } from 'vue'
</script>
<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->}
},
created() {<!-- -->},
// Triggered when DOM rendering is completed
mounted() {<!-- -->
//Data source, be careful to modify it yourself
var url = 'http://localhost/life-expectancy-table.json';
// Based on the prepared dom, initialize the echarts instance
var myChart = echarts.init(document.getElementById('main'))
// Initiate a request every three seconds to obtain data and draw charts
nextTick(() => {<!-- -->
setInterval(() => {<!-- -->
// Different implementation from above
this.getOpt(url).then(opt=>{<!-- -->
myChart.setOption(opt);
});
}, 3000)
})
},
methods: {<!-- -->
\t// Obtain
async getOpt (url){<!-- -->
let option;
// call 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>
4. Multiple tables simultaneously
Combine two different icons on one page, and add a new table:
https://echarts.apache.org/examples/zh/editor.html?c=gauge-ring
<template>
<div id="main" style="width: 600px;height:400px;float:left"></div>
<div id="sub" style="width: 600px;height:400px;float:left;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import axios from 'axios'
import {<!-- --> nextTick } from 'vue'
</script>
<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->}
},
created() {<!-- -->},
// Triggered when DOM rendering is completed
mounted() {<!-- -->
//Data source, be careful to modify it yourself
var url = 'http://localhost/life-expectancy-table.json';
// Based on the prepared dom, initialize the echarts instance
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}%'
}
}
]
};
// Initiate a request every three seconds to obtain data and draw charts
nextTick(() => {<!-- -->
setInterval(() => {<!-- -->
// main part
this.getOptMain(url).then(opt=>{<!-- -->
myMain.setOption(opt);
});
// sub part
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 & amp; & amp; mySub.setOption(option);
},
methods: {<!-- -->
\t// Obtain
async getOptMain (url){<!-- -->
let option;
// call 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>
refer to:
ECharts chart of Vue Element UI
Echarts used in vue3x (including dynamic data changes)
Optimized Echarts lag for three years of experience
Regarding vue + elementui access to local json and cross-domain access API issues
Vue3 + ElementPlus + Axios implements requesting data from the backend and rendering
Introduction to Methods usage in Vue3
What you should know about setup in Vue3!
