数据大屏之实现页面小组件第一篇

大部分可能会涉及到echarts相关知识的一些应用

大屏中用字体实现的一些样式字体效果

css代码:

@font-face {
    font-family: "chartfont"; 
    src: url('../font/Italic.ttf?t=1623722677794') format('truetype');
}

.chartfont {
    font-family: "chartfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
   
159
161

关键的代码就可以展示如下文字效果


image.png

一些小饼显示数据状态的实现方式,可以copy过去直接使用效果

如果要实现如下效果,想过用css3效果画,最终卡在数据初始化的一个动画效果

image.png

如果要用css3实现如下的一个动画效果,最终没有实现,以下是动画效果展示:

GIF 2022-5-24 19-00-58.gif

采用了echarts 实现 echarts实在太好用,可惜的是,目前知道的官网关闭了示例网站(上面放了大量由用户上传作品管理的网站),就凭这个网站上的大量例子就可以实现95%上的效果
引入echarts

 const colorList = [
            "rgba(0, 246, 143, 0.15)",
            "rgba(0, 246, 143, 1)",
            "rgba(0, 246, 143, 0.3)",
        ];
        let intActual = 80;
        let intRemain = 20;

        let option= {
// 图表居中显示的文字
            title: {
                text: "{a|" + intActual + "}{b|%}",
                x: "center",
                y: "center",
                textStyle: {
                    rich: {
                        a: {
                            fontSize: 12,
                            color: "#fff",
                            padding: [10, 0, 14, 0],
                            fontWeight: "600",
                        },
                        b: {
                            fontSize: 12,
                            color: "#fff",
                            padding: [8, 0, 14, 0],
                        },
                    },
                },
            },
// series 实现 三层 一层套一层 radius要设置好
            series: [
                {
                    type: "pie",
                    radius: [0, "55%"],
                    center: ["50%", "50%"],
                    z: 0,
                    itemStyle: {
                        normal: {
                            color: colorList[0],
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                        },
                    },
                    label: {
                        normal: {
                            position: "center",
                        },
                    },
                    data: [100],
                },
                {
                    type: "pie",
                    radius: [0, "70%"],
                    hoverAnimation: false,
                    label: {
                        normal: {
                            show: false,
                        },
                    },

                    data: [
                        {
                            value: intActual,
                            itemStyle: {
                                color: colorList[1],
                                opacity: 0.4,
                            },
                        },
                        {
                            value: intRemain,
                            itemStyle: {
                                opacity: 0,
                            },
                        },
                    ],
                },
                {
                    type: "pie",
                    radius: ["70%", "80%"],
                    hoverAnimation: false,

                    labelLine: {
                        show: false,
                    },
                    data: [
                        {
                            value: intActual,
                            itemStyle: {
                                color: colorList[1],
                                opacity: 1,
                            },
                        },
                        {
                            value: intRemain,
                            itemStyle: {
                                color: colorList[2],
                                opacity: 1,
                            },
                        },
                    ],
                },
            ],
        };
        echarts.init(
        document.getElementById("demo")
    ).setOption(option, true);

实现一些背景样式,主要是通过给background 设置图片达到目的

image.png

大屏中页面里每一块四个角有些需要加上自定义的样式

下面两个图要联合起来看


image.png

image.png

有些时候我们需要给echarts图表加上自定义滚动条样式

image.png
   dataZoom: [
            {
                show: true,
                height: 12,
                xAxisIndex: [0],
                bottom: "8%",
                start: 10,
                end: 90,
                handleIcon:
                    "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
                handleSize: "110%",
                handleStyle: {
                    color: "#d3dee5",
                },
                textStyle: {
                    color: "transparent",
                },
                borderColor: "#90979c",
            },
            {
                type: "inside",
                show: true,
                height: 15,
                start: 1,
                end: 35,
            },
        ],

bar增加渐变 & 字体倾斜

image.png

直接上代码:

  series: [
            {
                type: "bar",
                barWidth: 15,

                itemStyle: {
                    normal: {
// 主要是这段代码 ,让bar产生了渐变
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 2, [
                            {
                                offset: 0,
                                color: "#008AFF",
                            },
                            {
                                offset: 1,
                                color: "transparent",
                            },
                        ]),
                    },
                },
            },
  xAxis: {
        // 主要是这段代码实现了 倾斜
            axisLabel: {
                rotate: -40,
            
            },
        },

echarts 自定义实现悬浮提示框的样式

image.png
  tooltip: {
            trigger: "axis",
// 下面几个样式实现真个div背景样式
            padding: 0,
            position: ["50%", "50%"],
            backgroundColor: "rgba(0, 15, 33, 0.65)",
            extraCssText: "border-radius:0;box-shadow: 0 2px 4px 0 #070914;",
            axisPointer: {
                type: "shadow",
            },
// 这里实现div内容自定义然后加上自定义的样式
            formatter: function (param) {
                let di =
                    '
' + name + "
" + '测试文本' + '' + param[0].data + "" + '测试文本' + '
' + '
' + "
"; return di; }, }, .left-top-corner-tooltip{ position: absolute; left:0; top:0; width:16px; height:16px; background: url("../img/left-top-corner-tooltip.png") 0 0 / 100% 100% no-repeat; }

自定义实现一个进度条的样式

image.png
.schedule-li-show{ position: relative; } .schedule-li-show-bg{ width: 100%; height: 16px; background: #FFFFFF; opacity: 0.15; } .schedule-li-show-top{ height: 8px; background: linear-gradient(90deg, #008AFF 0%, #00ECFF 100%); position: absolute; top: 4px; } .schedule-li-show-top-line{ content: ""; position: absolute; top: 0px; width: 3px; height: 16px; background: #FFFFFF; }

你可能感兴趣的:(数据大屏之实现页面小组件第一篇)