ECharts图形柱状图顶部显示数

大得369

已于 2023-04-10 08:00:23 修改

阅读量6.9k

点赞数 3

分类专栏： js 文章标签： javascript vue.js 前端

于 2022-02-16 14:39:18 首次发布

本文链接：https://blog.csdn.net/qq_34631220/article/details/122963182

版权

js 专栏收录该内容

39 篇文章 1 订阅

订阅专栏

label: {
    show: true
},

//头部显示
label: {
    show: true,
    position: 'top'
},

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用 layui</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div style="margin-top: 20px;margin-left: 20px;width: 98%;height: 100%;">
    <div style="position: absolute;z-index: 1;color: white;text-align:center;width: 1000px;margin-top:10px">能耗使用情况（月/度）</div>
    <div style="width: 1000px;height: 500px;z-index:0;" id="main"></div>
</div>
<script src="./layui/layui.js"></script>
<script src="./jquery-3.5.1.js"></script>
<script src="./echarts.js"></script>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    let category = [];
    let dottedBase = +new Date();
    let lineData = [];
    let barData = [];
    for (let i = 0; i < 12; i++) {
        category.push([1 + i,''].join('月'));
        let b = Math.random() * 200;
        let d = Math.random() * 200;
        b = Number(b.toFixed(2));
        var c = Number(d) + Number(b);
        c = Number(c.toFixed(2));
        barData.push(Number(b));
        lineData.push(Number(c));
    }
    // option
    option = {
        backgroundColor: '#0f375f',
        tooltip: {
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['line', 'bar'],
            textStyle: {
                color: '#ccc'
            }
        },
        xAxis: {
            data: category,
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },
        yAxis: {
            splitLine: { show: false },
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },
        series: [
            {
                name: '使用水电费(元)',
                type: 'line',
                smooth: true,
                showAllSymbol: true,
                symbol: 'emptyCircle',
                symbolSize: 15,
                data: lineData,
                label: {
                    show: true
                },
            },
            {
                name: '已收费用(元)',
                type: 'bar',
                barWidth: 10,
                itemStyle: {
                    borderRadius: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#14c8d4' },
                        { offset: 1, color: '#43eec6' }
                    ])
                },
                data: barData
            },
            {
                name: '使用水电费（元）',
                type: 'bar',
                barGap: '-100%',
                barWidth: 10,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(20,200,212,0.5)' },
                        { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
                        { offset: 1, color: 'rgba(20,200,212,0)' }
                    ])
                },
                z: -12,
                data: lineData
            },
            {
                name: '使用水电费（元）',
                type: 'pictorialBar',
                symbol: 'rect',
                itemStyle: {
                    color: '#0f375f'
                },
                symbolRepeat: true,
                symbolSize: [12, 4],
                symbolMargin: 1,
                z: -10,
                data: lineData
            }
        ]
    };
    option && myChart.setOption(option);
</script>
</body>
</html>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5aSn5b6XMzY5,size_20,color_FFFFFF,t_70,g_se,x_16

大得369

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
ECharts图形柱状图顶部显示数

label: { show: true},<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用 layui</title> &lt.
复制链接

扫一扫