echarts看板效果图：流光折线图、3d柱状图、3d饼图、3d地图

无知的小菜鸡

已于 2022-11-24 14:14:29 修改

阅读量2.9k

点赞数

分类专栏：可视化文章标签：大屏看板 echarts

于 2022-11-23 11:29:51 首次发布

本文链接：https://blog.csdn.net/weixin_41897680/article/details/127958626

版权

前言

现在展厅的大看板是越花里胡哨越好，不过真的挺难做的。好在可以百度找到一些大神的作品进行参考。

下面的内容都是基于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 + ' : '