前言
现在展厅的大看板是越花里胡哨越好，不过真的挺难做的。好在可以百度找到一些大神的作品进行参考。
下面的内容都是基于echarts 5.3.3 和 vue3 。另外demo都是参考别人的案例。
流光折线图
效果图
代码
<template>
<div id="demo"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import {
onMounted } from 'vue';
// 设置echart数据
const setOption = (xaxisData:any, yaxisData:any, animationData:any) => {
const dom = document.getElementById('demo');
if (dom) {
// 初始化echart
const myEchart = echarts.init(dom);
// 配置项
const option = {
backgroundColor: '#001829',
grid: {
top: '15%',
left: '1%',
right: '1%',
bottom: '1%',
containLabel: true
},
tooltip: {
trigger: 'axis',
confine: true,
backgroundColor: 'rgba(255, 132, 90, 0.3)',
borderColor: '#FF845A',
textStyle: {
fontSize: 16,
color: '#fff'
},
formatter: (params:any) => {
const item = params[0];
return '终端数量' '<br/>' item.name '：' item.value ' 个';
},
// 鼠标移入时竖线的样式
axisPointer: {
type: 'line',
lineStyle: {
color: '#FF845A'
}
}
},
xAxis: {
data: xaxisData,
boundaryGap: true,
axisLine: {
show: true,
symbol: ['none', 'rect'],
symbolSize: [6, 12],
lineStyle: {
width: 2,
color: '#537DAA'
}
},
axisTick: {
show: false
}
},
yAxis: {
name: '(个)',
nameTextStyle: {
color: '#AEC9FF',
fontWeight: 400,
fontSize: 14
},
axisLabel: {
color: '#AEC9FF'
},
// x、y轴顶端的样式，小矩形
axisLine: {
show: true,
symbol: ['none', 'rect'],
symbolSize: [6, 12],
lineStyle: {
width: 2,
color: '#537DAA'
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(83, 125, 170, 0.2)'
}
}
},
series: [
{
type: 'line',
lineWidth: 1.2,
data: yaxisData,
// 线条节点的样式
symbol: 'image://https://easyv.assets.dtstack.com/data/114350/729633/img/aqp4b9ektk_1642493282093_00kx2xfruc.png',
symbolSize: 15,
itemStyle: {
color: 'rgba(114, 178, 255, 1)'
},
// 线条样式
lineStyle: {
width: 2,
shadowBlur: 20,
shadowColor: '#72B2FF',
shadowOffsetY: 10
},
// 线条下面阴影的样式，线性渐变
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(114, 178, 255, 0.25)'
},
{
offset: 1,
color: 'rgba(114, 178, 255, 0)'
}
],
false
),
opacity: 1
}
},
{
type: 'lines',
coordinateSystem: 'cartesian2d',
data: [{
coords: animationData
}],
zlevel: 1,
// 是否是多线段
polyline: true,
symbol: 'circle',
effect: {
show: true,
trailLength: 0.4,
symbol: 'circle',
period: 8,
symbolSize: 8
},
lineStyle: {
normal: {
color: '#64FFFF',
width: 0,
opacity: 0,
curveness: 1
}
}
}
]
};
// 设置属性
myEchart.setOption(option);
// 监听窗口变化
window.addEventListener('resize', function() {
myEchart.resize();
});
}
};
onMounted(() => {
const xaxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const yaxisData = [2220, 1682, 2791, 3000, 4090, 3230, 2910];
// 动画数据
const animationData = [['周一', 2220], ['周二', 1682], ['周三', 2791], ['周四', 3000], ['周五', 4090], ['周六', 3230], ['周日', 2910]];
setOption(xaxisData, yaxisData, animationData);
});
</script>
<style lang="scss" scoped>
#demo{
width: 500px;
height: 400px;
}
</style>
本质上是两条线组合在一起的，一条是静态的线条，一条是动态的线条。相关属性都可以在官方文档里找到。
3d柱状图
效果图
代码
<template>
<div id="demo"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import {
onMounted } from 'vue';
// 设置echart数据
const setOption = (xaxisData:any, yaxisData:any) => {
const dom = document.getElementById('demo');
if (dom) {
// 初始化echart
const myEchart = echarts.init(dom);
// 绘制顶面、侧面
drawCube();
// 配置项
const option = {
backgroundColor: '#012366',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
const item = params[1];
return item.name ' : ' 