Echart 仪表盘图渐变色

四喜花露水

于 2024-09-06 15:07:32 发布

阅读量130

点赞数 1

分类专栏： Echart 文章标签：前端 echarts javascript

本文链接：https://blog.csdn.net/gaowxx/article/details/141960265

版权

Echart 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
    <style>
        .chart-item {
            width: 50%;
            height: 400px;
            margin: 24px auto;
        }
    </style>
</head>

<body>
    <div class="chart-item" id="chart"></div>
    <script>
        var myChartArr = [];
        function drawChart(id, data) {
            var myEchart = echarts.init(document.getElementById(id));
            var option = {
                angleAxis: {
                    show: false,
                    max: (data.max * 360) / 240, //-45度到225度，二者偏移值是270度除360度
                    type: "value",
                    startAngle: 210,
                    splitLine: {
                        show: true,
                    },
                },
                barMaxWidth: 10,
                radiusAxis: {
                    show: false,
                    type: "category",
                },
                //圆环位置和大小
                polar: {
                    center: ["50%", "42%"],
                    radius: "130%",
                },
                series: [{
                    type: "bar",
                    data: [{
                        value: data.value,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                offset: 1,
                                color: '#3791fb'
                            }, {
                                offset: 0,
                                color: '#5cbef9'
                            }], false)
                        },
                    },],
                    barGap: "-100%",
                    coordinateSystem: "polar",
                    roundCap: true, //顶端圆角
                    z: 3,
                }, {

                    type: "bar",
                    data: [{
                        value: data.max,
                        itemStyle: {
                            color: "#f5f5fd",
                            opacity: 1,
                            borderWidth: 0,
                        },
                    },],
                    barGap: "-100%",
                    coordinateSystem: "polar",
                    roundCap: true,
                    z: 1,

                },
                //仪表盘
                {
                    type: "gauge",
                    startAngle: 210,
                    endAngle: -35,
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    splitLabel: {
                        show: false,
                    },
                    pointer: {
                        show: true,
                        length: "70%",
                        width: 3,
                        itemStyle: {
                            color: "#96a9ba",
                        },
                    },
                    detail: {
                        formatter: function (params) {
                            return data.value / 50;
                        },
                        color: "#333333",
                        fontSize: 16,
                    },
                    title: {
                        show: false,
                    },
                    data: [{
                        value: data.value,
                    },],
                },


                ],
            };
            myEchart.setOption(option)
            myChartArr.push(myEchart)
        }
        drawChart('chart', { max: 100, value: 90 })

        $(window).resize(function () {
            for (var i = 0; i < myChartArr.length; i++) {
                myChartArr[i].resize();
            }
        })
    </script>
</body>

</html>