ECharts仪表盘-仪表盘18.zip资源-CSDN文库

共3个文件

js：2个

html：1个

版权申诉

2 浏览量 2025-03-13 01:16:33 上传评论收藏 1.01MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

ECharts仪表盘-仪表盘18.zip （3个子文件）

图表

lib

5.5.0

echarts.js 3.21MB

echarts.min.js 1005KB

svg

geo

bin

index.html 9KB

images

json

      <!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
        #chart-panel {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 1000px;
            height: 750px;
        }
    </style>
    <script src="./lib/5.5.0/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
    <div id="chart-panel"></div>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <script type="text/javascript">
        //初始化图表对象。
        var myChart = echarts.init(document.getElementById('chart-panel'));
        //图表配置。
        var dataArr = 60;
        var colorSet = {
            color: '#22B95E'
        };
        var color1 = {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: "rgba(255,255,255,0.1)"
                },
                {
                    offset: 1,
                    color: "rgba(255,255,255,0.3)"
                }
            ],
            global: false
        }
        var color2 = {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 1,
            colorStops: [
                {
                    offset: 0,
                    color: "#30DBBA"
                },
                {
                    offset: 1,
                    color: "#2DE696"
                }
            ],
            global: false
        }

        let option = {
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {},
                },
            },
            backgroundColor: '#0E1327',
            series: [
                {
                    type: "gauge",
                    radius: '52%',
                    splitNumber: 5,
                    axisLine: {
                        lineStyle: {
                            color: [
                                [1, colorSet.color]
                            ],
                            width: 2
                        }
                    },
                    axisLabel: {
                        show: true,
                        color: '#ffffff',
                        fontSize: 14,
                        fontFamily: 'SourceHanSansSC-Regular',
                        fontWeight: 'bold',
                        distance: -25,
                    },
                    axisTick: {
                        show: true,
                        splitNumber: 3,
                        distance: 10,
                        lineStyle: {
                            color: "white",
                            width: 1,
                        },
                        length: -6
                    },
                    splitLine: {
                        show: true,
                        length: -12,
                        distance: 12,
                        lineStyle: {
                            color: "white",
                        }
                    },
                    pointer: {
                        show: true,
                        length: '70%',
                        width: 3
                    },
                    itemStyle: {
                        color: "#ffffff"
                    },
                    detail: {
                        show: false,
                    },
                    data: [{
                        value: dataArr,
                    }],
                    animationDuration: 4000,
                },
                {
                    type: "gauge",
                    radius: '44%',
                    axisLine: {
                        lineStyle: {
                            color: [
                                [dataArr / 100, new echarts.graphic.LinearGradient(
                                    0, 1, 0, 0, [{
                                        offset: 0,
                                        color: 'rgba(45,230,150,0)',
                                    }, {
                                        offset: 0.5,
                                        color: 'rgba(45,230,150,0.2)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(45,230,150,1)',
                                    }
                                ]
                                )],
                            ],
                            width: 100
                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                {
                    type: "gauge",
                    radius: '46%',
                    axisLine: {
                        lineStyle: {
                            color: [
                                [dataArr / 100, color2],
                            ],
                            width: 10
                        }
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                {
                    type: "gauge",
                    radius: '18%',
                    axisLine: {
                        lineStyle: {
                            color: [
                                [1, colorSet.color]
                            ],
                            width: 1
                        }
                    },
                    axisLabel: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    pointer: {
                        show: false,
                    },
                    detail: {
                        formatter: function (value) {
                            if (value !== 0) {
                                var num = Math.round(value);
                                return parseInt(num).toFixed(0) + "%";
                            } else {
                                return 0;
                            }
                        },
                        offsetCenter: [0, 67],
                        textStyle: {
                            padding: [0, 0, 0, 0],
                            fontSize: 18,
                            color: "#ffffff"
                        }
                    },
                    title: {
                        show: true,
                        offsetCenter: [0, 46],
                        textStyle: {
                            color: "#fff",
                            fontSize: 14,
                            fontWeight: 400,
                        }
                    },
                    data: [{
                        name: "去年优良率",
                        value: dataArr,
                    }],
                },