前言
现在展厅的大看板是越花里胡哨越好，不过真的挺难做的。好在可以百度找到一些大神的作品进行参考。
下面的内容都是基于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 ' : '
