当前位置：个人在线分享 > Vue3 Element-UI中使用ECharts（前端数据展示开发）

Vue3 Element-UI中使用ECharts（前端数据展示开发）

作者 : admin 本文共7252个字，预计阅读时间需要19分钟 发布时间： 2024-06-10 共2人阅读

  • 前端数据展示（数据可视化、数据大屏等）可使用的工具比较多，很多第三方都提供了在线平台，比如阿里云，只需数据接口，在线配置一下界面即可使用。

    1. 阿里云的使用：利用阿里云物联网平台（IoT）实现WEB数据可视化
    2. 第三方平台对比：有哪些免费简单的数据展示（数据可视化）网站

  • 也可以使用开源代码自己开发前端，本文所介绍的就是ECharts的开发，这是一款基于JavaScript 的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

    1. 官方网站：http://echarts.apache.org/zh/index.html
    2. 官方示例：http://echarts.apache.org/examples/zh/index.html
    3. 官方指南：http://echarts.apache.org/handbook/zh/get-started/

注意，本文是在Vue3版本下的Element-UI中使用，ECharts官网打开较慢，可尝试翻越。

Vue3 Element-UI中使用ECharts（前端数据展示开发）插图

安装

npm install echarts --save

调用

创建一个*.vue页面，实现方法如下三种。

1. 本页数据

修改官方代码：http://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() {},
  // 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>

Vue3 Element-UI中使用ECharts（前端数据展示开发）插图(1)

2. 调用数据

修改官方的线性图示例图代码，修改为线性和柱状混合展示图
http://echarts.apache.org/examples/zh/editor.html?c=data-transform-filter&lang=js

另需准备一个json文件，下载自官网：http://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>
import * as echarts from 'echarts'
import axios from 'axios'
import { nextTick } from 'vue'
</script>
<script>
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 Element-UI中使用ECharts（前端数据展示开发）插图(2)

  • 可以顺便学习一下vue3中 nextTick 的具体用法。

3. 异步调用

还是上面的例子（实现略有不同），setInterval()中原有的run()函数改为了getOpt()函数，主要用来学习axios如何返回值~~
学习：获取axios的return值

<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() {},
// 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>

4. 多表同时

结合两种不同的图标放在一个页面，其中新增一种表为：
http://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() {},
// 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;
// 调用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>

Vue3 Element-UI中使用ECharts（前端数据展示开发）插图(3)

参考：
Vue Element UI 之ECharts图表
Echarts 在vue3x中使用（包括动态数据变化）
优化了三年经验者的Echarts卡顿
关于vue+elementui 访问本地json和跨域访问API问题
Vue3+ElementPlus+Axios实现从后端请求数据并渲染
Vue3中的Methods用法介绍
Vue3中你应该知道的setup！

Vue3 Element-UI中使用ECharts（前端数据展示开发）插图(4)

本站无任何商业行为
个人在线分享 » Vue3 Element-UI中使用ECharts（前端数据展示开发）
admin

admin 钻石

分享到：

相关推荐

E-->