echarts水球图内阴影与胶囊图制作

最新推荐文章于 2024-08-08 07:37:59 发布

杀猪刀-墨林

最新推荐文章于 2024-08-08 07:37:59 发布

阅读量2.2k

点赞数 4

分类专栏： # echarts 文章标签：水球图，胶囊图水球图内阴影

本文链接：https://blog.csdn.net/qq_38948398/article/details/109281035

版权

echarts 专栏收录该内容

19 篇文章 3 订阅

订阅专栏

先贴代码后贴图，最后讲解

git地址以及文档

水球图：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水泡图</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        #container {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts-en.min.js"></script>
    <script src="https://echarts.baidu.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.min.js"></script>
</body>
<script>
    const options = {
        // 悬浮提示
        // tooltip: [],
        // color: [],
        // // 图例
        // legend: [],
        // // 横轴  
        // xAxis: [],
        // // 纵轴
        // yAxis: [],
        // 标题
        title: {
            text: (0.2 * 100).toFixed(0) + '{a|%}',
            textStyle: {
                fontSize: 12,
                fontFamily: 'Microsoft Yahei',
                fontWeight: 'normal',
                color: '#bcb8fb',
                rich: {
                    a: {
                        fontSize: 10,
                    }
                }
            },
            x: 'center',
            y: '35%'
        },
        backgroundColor: '#060646',
        // 数据
        series: [{
            type: 'liquidFill',
            radius: '40%',
            center: ['50%', '50%'],
            data: [0.6, 0.6, 0.6, 0.5],
            backgroundStyle: {
                color: {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(255, 255, 0, 0)' // 0% 处的颜色
                    }, {
                        offset: 0.5,
                        color: 'rgba(255, 255, 0, 0)' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#00ffff8c' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            },
            outline: {
                borderDistance: 2,
                itemStyle: {
                    borderWidth: 0,
                    borderColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(69, 73, 240, 0)'
                        }, {
                            offset: 1,
                            color: 'rgba(69, 73, 240, 1)'
                        }],
                        // globalCoord: false
                    },
                    shadowBlur: 30,
                    shadowColor: 'red',
                }
            },
            label: {
                formatter: function() {
                    return '';
                },
            }
        }]
    }
    echarts.init(document.getElementById('container')).setOption(options);
</script>

</html>

胶囊图：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图峰值</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100%;
            height: 100%;
        }
        
        #container {
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script src="https://cdn.bootcss.com/echarts/4.7.0/echarts-en.min.js"></script>
    <script>
        const options = {
            color: ['#003366', '#006699', '#4cabce', '#e5323e'],
            // tooltip: {
            //     trigger: 'axis',
            //     axisPointer: {
            //         type: 'shadow'
            //     }
            // },
            grid: {
                top: '15%'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    mark: {
                        show: true
                    },
                    dataView: {
                        show: true,
                        readOnly: false
                    },
                    magicType: {
                        show: true,
                        type: ['line', 'bar', 'stack', 'tiled']
                    },
                    restore: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    }
                }
            },
            backgroundColor: 'rgb(20,28,52)',
            xAxis: [{
                    type: 'category',
                    show: false,
                    axisTick: {
                        show: false
                    },
                    data: ['2012', '2013', '2014', '2015', '2016']
                },
                // 峰值
                {
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: 'white',
                        fontSize: 8,
                        formatter: function(value) {
                            if (value == 390) {
                                return '{a|' + value + '}';
                            } else {
                                return value.toLocaleString();
                            }
                        },
                        rich: {
                            a: {
                                fontSize: 12,
                                fontFamily: 'Microsoft YaHei',
                                borderColor: 'red',
                                color: 'red'
                            },
                        },
                    },
                    zlevel: 8,
                    position: 'top',
                    data: [320, 332, 301, 334, 390]
                }
            ],
            yAxis: [{
                type: 'value',
                max: 450,
                show: false
            }],
            series: [{
                name: 'Forest',
                type: 'bar',
                barGap: 0,
                zlevel: 1,
                data: [320, 332, 301, 334, 390],
                itemStyle: {
                    normal: {
                        barBorderRadius: 30,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0,
                            color: 'rgb(57,89,255,1)'
                        }, {
                            offset: 1,
                            color: 'rgb(46,200,207,1)'
                        }]),
                    },
                },
                barWidth: 20,
                // label:{
                //     normal: {
                //         show: true,
                //         position: 'top'
                //     }
                // }
            }, {
                name: 'Steppe',
                type: 'bar',
                barGap: '-100%',
                itemStyle: {
                    normal: {
                        color: 'rgba(24,31,68,1)',
                        barBorderRadius: 30,
                    }
                },
                barWidth: 20,
                data: [450, 450, 450, 450, 450]
            }, ]
        }
        echarts.init(document.getElementById('container')).setOption(options);
    </script>

</html>

水球图效果：