echarts地图,柱状图,折线图实战

news2024/11/7 15:34:46

1.地图

 



<template>
    <div style="height: 100%;" class="cantainerBox">
        <div class="top">
            <div class="leftTop">
                <span class="firstSpan">推广进度</span>
                <div>
                    省份选择:
                    <el-select v-model="valueProvinces" placeholder="请选择">
                        <el-option
                            v-for="item in optionsProvince"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="cityStyle">
                    城市选择:
                    <el-select v-model="valueCity" placeholder="请选择">
                        <el-option
                            v-for="item in optionsCity"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <span class="rightLeft">查看更多</span>
        </div>
        <div class="container">
            <div id="echart_map" ref="echart_map" :style="{'width': innerWidth,'height': innerHeight}"></div>
            <div class="center">
                <div v-for="(item,index) in showColorDataPrint" :key="item.name" class="centerBox">
                    <div :style="getClass(item)">
                    </div>
                    <div class="content">
                        {{ 'top.' }}{{ index + 1 }}
                    </div>
                </div>   
            </div>
            <div class="right">
                <PillarChart/>
                <!-- <div id="echart_pillar" ref="echart_pillar" :style="{'width': '100%','height': '100%'}"></div> -->
            </div>
        </div>
        <div></div>
    </div>
    
</template>
<script>

const henanmap = require("../../../../echartData/henan.json")
const chongqingmap = require("../../../../echartData/chongqing.json")
const neimengmap = require("../../../../echartData/neimeng.json")
const china = require("../../../../echartData/china.json")
import showColorData from '../../../../echartData/showColorData.js'
import getColorByValue from './colorChoice.js'
import PillarChart from './PillarChart.vue'

export default{
    data(){
        return{
            myChart:null,
            optionsProvince: [{
                value: '',
                label: '全部'
                }, {
                value: '1',
                label: '河南'
                }, {
                value: '2',
                label: '内蒙古'
                }, {
                value: '3',
                label: '重庆'
                }
            ],
            fixedCoordinates : [  
                {name: '地点1', coord: [116.405285, 39.904989]}, // 北京的经纬度作为示例  
                {name: '地点2', coord: [121.473701, 31.230416]}  // 上海的经纬度作为示例  
                // 添加更多地点...  
            ],
            optionsCity: [],
            valueProvinces: '',
            valueCity: '',
            showValue: '',
            choiceColorData:[],
            dataColor:showColorData,
            showColorDataPrint:[],
            // 调一下样式
            innerWidth:window.innerWidth<=1920? '40%':'40%',
            innerHeight:window.innerWidth<=1920? '100%':'100%',
            // 调一下样式
            innerWidth1:window.innerWidth<=1920? '100%':'100%',
            innerHeight1:window.innerWidth<=1920? '100%':'100%',
        }
    },
    components:{PillarChart},
    mounted(){
        // 页面第一次加载展示中国地图
        this.showValue = 'china'
        // 这是相关模拟每个地市有多少站点,value就是站点数
        this.choiceColorData = this.dataColor['china']
        // 获取相关数据对应的颜色
        this.showColorDataPrint= this.topTenData(this.choiceColorData)
        // 模拟相关的各个省份的地理数据
        localStorage.setItem('henan',JSON.stringify(henanmap))
        localStorage.setItem('chongqing',JSON.stringify(chongqingmap))
        localStorage.setItem('neimeng',JSON.stringify(neimengmap))
        localStorage.setItem('china',JSON.stringify(china))
        // 挂载地图
        this.myChartMap = this.$echarts.init(this.$refs.echart_map)
        // 初始化地图
        this.initMap(this.showValue)
        // 挂载地图
        // this.myChartPillar = this.$echarts.init(this.$refs.echart_pillar)
        // 初始化地图
        // this.initPillar()
        // 样式自适应
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.myChartMap) {
            this.myChartMap.dispose(); // 清理图表实例
        }
    },
    watch:{
        'valueProvinces':{
            handler(val,oldVal){
                console.log('val',val);
                switch(val){
                    case '':
                        this.showValue = 'china';
                        this.choiceColorData = this.dataColor[this.showValue]
                        // 获取相关数据对应的颜色
                        this.showColorDataPrint= this.topTenData(this.choiceColorData)
                        this.initMap(this.showValue)
                        break;
                    case '1':
                        this.showValue = 'henan';
                        this.choiceColorData = this.dataColor[this.showValue]
                        this.optionsCity = this.dataColor[this.showValue]
                        // 获取相关数据对应的颜色
                        this.showColorDataPrint= this.topTenData(this.choiceColorData)
                        this.initMap(this.showValue)
                        break;
                    case '2':
                        this.showValue = 'neimeng';
                        this.choiceColorData = this.dataColor[this.showValue]
                        this.optionsCity = this.dataColor[this.showValue]
                        // 获取相关数据对应的颜色
                        this.showColorDataPrint= this.topTenData(this.choiceColorData)
                        this.initMap(this.showValue)
                        break;
                    case '3':
                        this.showValue = 'chongqing';
                        this.choiceColorData = this.dataColor[this.showValue]
                        this.optionsCity = this.dataColor[this.showValue]
                        // 获取相关数据对应的颜色
                        this.showColorDataPrint= this.topTenData(this.choiceColorData)
                        this.initMap(this.showValue)
                        break;
                    default:
                        break;
                }
                
            }
        }
    },
    methods:{
        // 自适应
        handleResize() {
            if (this.myChartMap) {
                setTimeout(() => {
                    this.myChartMap.resize();
                },500)
            }
        },
        // 地图右侧图需要展示10个小方格,给动态样式
        getClass(item){
            let styleItem = {
                width:'10px',
                height:'10px',
                background:item.itemStyle.color
            }
            return styleItem
        },
        // 对于所有数据进行排序整理出来前10
        topTenData(arr){
            return  arr.sort((a, b) => b.value - a.value) // 从大到小排序  
                .slice(0, 10) // 取前10个元素  
                .map(item => ({
                    name:item.name,
                    value:item.value,
                    itemStyle:{
                        color:getColorByValue(item.value)
                    }
                }))
        },
        // 初始化地图
        initMap(showValue){
            this.$echarts.registerMap('GX',localStorage.getItem(showValue?showValue:'china'))
            var options = {
                visualMap:{
                    // 不显示颜色条
                    show:false
                },
                tooltip:{
                    
                },
                series:[
                    {
                        type:'map',
                        map:'GX',
                        label:{
                            show:false
                        },
                        // 添加markPoint来显示小红旗  
                        markPoint: {  
                            symbol: `image://${require('../../../../assets/saas/hongqi.png')}`, // 使用小红旗符号  
                            symbolSize: 50, // 调整符号大小  
                            itemStyle: {  
                                color: 'red', // 小红旗的颜色  
                                borderColor: '#fff', // 边框颜色  
                                borderWidth: 2 // 边框宽度  
                            },  
                            data: this.fixedCoordinates.map(coord => ({  
                                name: coord.name,  
                                coord: coord.coord,  
                                value: '' // 这个值在地图上不显示,但可以用于排序或其他目的  
                            }))  
                        },
                        data:this.choiceColorData.map(item => ({
                            name:item.name,
                            value:item.value,
                            itemStyle:{
                                color:getColorByValue(item.value)
                            }
                        }))
                    }
                ],

            }
            this.myChartMap.setOption(options);
        }
    }
}
</script>
<style scoped>
.cantainerBox{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid rgba(235,235,235,1);
    border-radius: 8px;
    .top{
        width: 100%;
        height: 54px!important;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        margin-bottom: 0!important;
        background-image: linear-gradient(180deg, #F8FFFF 0%, rgba(248,255,255,0.20) 99%);
        border-radius: 8px 8px 0px 0px;
        display: flex;
        justify-content: flex-start;
        .leftTop{
            display: flex;
            justify-content: flex-start;
            .firstSpan{
                margin-top: 6px;
                font-family: PingFangSC-Semibold;
                font-size: 16px;
                color: #2C2C32;
                /* line-height: 16px; */
                font-weight: 600;
                margin-right: 80px;
            }
            .cityStyle{
                margin-left: 40px;
            }

        }
        .rightLeft{
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #3077F9;
            line-height: 14px;
            font-weight: 400;
        }
    }
    .container{
        height: 90%;
        flex-grow: 1;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        display: flex;
        justify-content: flex-start;
        #echart_map{
            /* width: 40%; */
            /* height: 100%!important; */
            background: #F7FAFF;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }
        .center{
            padding-left: 150px;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;
            flex-direction: column;
            width: 20%;
            height: 100%;
            background: #F7FAFF;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            padding-top: 20px;
            .centerBox{
                display: flex;
                justify-content: flex-start;
                flex-grow: 1;
                .content{
                    font-family: PingFangSC-Regular;
                    font-size: 12px;
                    color: #454865;
                    line-height: 9px;
                    margin-left: 10px;
                }
            }
            
        }
        .right{
            width: 40%;
            /* height: 90%; */
            height: 100%;
            padding-left: 50px!important;
        }
    }
}

/* #echart_pillar{
   height: 100%;
   width: 100%; 
}  */




</style>

2.柱状图

<template>
     <div id="echart_pillar" ref="echart_pillar" :style="{'height': '100%'}"></div>
</template>

<script>
import * as echarts from 'echarts'
export default{
    mounted(){
        // 挂载地图
        this.myChartPillar = this.$echarts.init(this.$refs.echart_pillar)
        // 初始化地图
        this.initPillar()
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.myChartPillar) {
            this.myChartPillar.dispose()
        }
    },
    methods:{
         // 自适应
         handleResize() {
            if (this.myChartPillar) {
                setTimeout(() => {
                    this.myChartPillar.resize();
                },300)
            }
        },
        initPillar(){
            var option = {  
                title: {  
                    text: 'TOP10,已覆盖12省29市'  
                },  
                tooltip: {},  
                xAxis: {
                    type: 'value',  
                    boundaryGap: [0, 0.01],
                    // 隐藏网格
                    splitLine: { show: false },
                    // 隐藏数值标签
                    axisLabel: {  
                        show: false // 隐藏x轴数值标签  
                    },
                    axisLine: {  
                        show: true, // 隐藏y轴轴线(如果不需要的话),
                        lineStyle:{
                            color:'rgba(235,235,235,1)',
                            type:'solid',
                            width:2
                        }
                    }
                },  
                yAxis: {  
                    type: 'category',  
                    data: ['河南', '河北', '山东', '四川', '重庆','内蒙', '西藏', '江苏', '广州', '广西'] ,
                    splitLine: { 
                        show: false 
                    },
                    axisLine: {  
                        show: true, // 隐藏y轴轴线(如果不需要的话)  
                        lineStyle:{
                            color:'rgba(235,235,235,1)',
                            type:'solid',
                            width:2
                        }
                    },
                    axisLabel:{
                        fontFamily: 'PingFangSC-Regular',
                        fontSize: '12px',
                        color: '#454865',
                        fontweight: 400,
                    }
                },  
                series: [{  
                    name: '销量',  
                    type: 'bar',  
                    data: [5, 20, 36, 10, 10,6,8,15,20,23],
                    itemStyle: {
                        normal: {  
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0,
                                [  
                                    { offset: 0, color: '#3A7FFF' }, // 起始颜色和位置  
                                    { offset: 1, color: '#4FE3A8' }  // 结束颜色和位置  
                                ]  
                            )  
                        }  
                    },
                    label: {  
                        show: true, // 显示标签  
                        position: 'right', // 标签位置在柱子顶部  
                        formatter: (val) => {
                            return val.value + '个'
                        }, // 标签内容格式,{c}表示销量值  
                        color: 'black', // 标签文字颜色(可选)  
                        fontSize: 12, // 标签文字大小(可选)
                        fontFamily: 'PingFangSC-Regular',
                        color: '#9296B1',
                        fontWeight: '400' 
                    }  
                }]  
            };  
            // 使用刚指定的配置项和数据显示图表。  
            this.myChartPillar.setOption(option);  
        }
    }
}
</script>

 3.折线图

<template>
    <div class="containerLine">
        <div class="tops"><span>营销统计</span></div>
        <div id="echart_line" ref="echart_line" :style="{'width': '100%','height': '90%'}"></div>
    </div>
</template>
<script>
export default{
    mounted(){
          // 挂载地图
          this.myChartLine = this.$echarts.init(this.$refs.echart_line)
          // 初始化地图
          this.initLine()
          // 样式自适应
          window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.handleResize);
        if (this.myChartLine) {
            this.myChartLine.dispose(); // 清理图表实例
            // this.myChartPillar.dispose()
        }
    },
    methods:{
        // 自适应
        handleResize() {
            if (this.myChartLine) {
                setTimeout(() => {
                    this.myChartLine.resize();
                    // this.myChartPillar.resize();
                },1)
            }
        },
        initLine(){
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月','4月', '5月', '6月','7月', '8月', '9月','10月', '11月', '12月'],
                    axisLine: {  
                        show: true, // 隐藏y轴轴线(如果不需要的话),
                        lineStyle:{
                            color:'rgba(235,235,235,1)',
                            type:'solid',
                            width:2
                        }
                    },
                    axisLabel:{
                        fontFamily: 'PingFangSC-Regular',
                        fontSize: '14px',
                        color: '#9296B1',
                        fontWeight: 400,
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: { 
                        show: true
                    },
                    axisTick: {  
                        show: false // 显示刻度线  
                    },
                    axisLine: {  
                        show: true, // 隐藏y轴轴线(如果不需要的话)  
                        lineStyle:{
                            color:'rgba(235,235,235,1)',
                            type:'solid',
                            width:2
                        }
                    },
                    axisLabel:{
                        fontFamily: 'PingFangSC-Regular',
                        fontSize: '14px',
                        color: '#9296B1',
                        fontwWight: 400,
                    },
                    min:0,
                    max:1500
                },
                grid: {  
                    left: '3%', // 调整左边距  
                    right: '3%', // 调整右边距  
                    // 可以根据需要调整top和bottom属性来控制上下边距  
                },  
                series: [
                    {
                        data: [820, 932, 901, 934, 1290, 1330, 1320,820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true,
                        areaStyle: {  
                            color: {  
                                type: 'linear',  
                                x: 0,  
                                y: 0,  
                                x2: 0,  
                                y2: 1,  
                                colorStops: [{  
                                    offset: 0, color: 'rgba(255, 255, 255, 0)' // 透明  
                                }, {  
                                    offset: 1, color: 'rgba(255, 214, 122, 0.8)' // 黄色半透明  
                                }],  
                                global: false // 缺省为 false  
                            }  
                        }  
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。  
            this.myChartLine.setOption(option);  
        }
    }
}
</script>
<style scoped>
.containerLine{
    width: 100%;
    height: 100%;
    .tops{
        background-image: linear-gradient(180deg, #F8FFFF 0%, rgba(248,255,255,0.20) 99%);
        border-radius: 8px 8px 0px 0px;
        height: 40px;
        line-height: 40px;
        span{
            margin-left: 26px;
            font-family: PingFangSC-Semibold;
            font-size: 16px;
            color: #2C2C32;
            line-height: 16px;
            font-weight: 600;
        }
    }
}
</style>

 工作之余做的小样式,挺好看!希望大家喜欢!地理数据可以直接去阿里官网下载!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2229612.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Redis高级篇之bigKey理论介绍以及优化

文章目录 0 前言1.MoreKey案例2.BigKey案例2.1多大算BigKey2.1.1 string和二级结构2.2 Bigkey危害、产生与发现2.2.1 bigkey的危害2.2.2 如何产生2.2.3 如何发现 2.2.4 大key如何删除3.BigKey生产调优3.1 redis.conf配置文件 LAZY FREEING相关说明 结语 0 前言 bigKey是面试经常…

讲讲 kafka 维护消费状态跟踪的方法?

大家好&#xff0c;我是锋哥。今天分享关于【讲讲 kafka 维护消费状态跟踪的方法&#xff1f;】面试题&#xff1f;希望对大家有帮助&#xff1b; 讲讲 kafka 维护消费状态跟踪的方法&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Kafka 中&#x…

UE5.4 PCG Layered Biomes插件

B站学习链接 官方文档 一、PCGSpawn Preset&#xff1a;负责管理PCG要用到的植被资产有哪些 二、BiomesSettings&#xff1a;设置要使用的植被资产Layer、Spawn参数 1.高度Layer参数&#xff1a; 2.地形Layer&#xff1a;我这里用地形样条线绘制了一块地形Layer 绘制点和…

深度了解flink(七) JobManager(1) 组件启动流程分析

前言 JobManager是Flink的核心进程&#xff0c;主要负责Flink集群的启动和初始化&#xff0c;包含多个重要的组件(JboMaster&#xff0c;Dispatcher&#xff0c;WebEndpoint等)&#xff0c;本篇文章会基于源码分析JobManagr的启动流程&#xff0c;对其各个组件进行介绍&#x…

ChatGPT终于变成了智能搜索引擎

一、引言 今天即2024年11月1日&#xff0c;ChatGPT又给我们带来了惊喜。 继前一段时间新增加聊天搜索功能之后&#xff0c;ChatGPT又新增联网功能&#xff0c;可以像搜索引擎一样进行网页搜索&#xff0c;这样一个智能工具摇身一变成AI搜索了&#xff01; 有了AI搜索我们将可…

ZK范式系列之zkVM介绍(1)

1. 引言 zkVM&#xff08;Zero-Knowledge Virtual Machine&#xff0c;零知识虚拟机&#xff09;&#xff1a; 是一种功能强大的虚拟机&#xff0c;利用零知识证明 (zero-knowledge proof&#xff0c;ZKP) 来保证计算的完整性和隐私性。 零知识证明&#xff08;ZKP&#xff…

颠覆微服务管理:用Traefik+Docker轻松实现自动化流量控制

#作者&#xff1a; Power0fMoney 文章目录 第一部分&#xff1a;背景和现状1.1 微服务架构的兴起1.2 容器技术的普及1.3 运维的痛点 第二部分&#xff1a;详细解释Traefik各个功能模块2.1 动态服务发现2.2 内置的Lets Encrypt支持2.3 中间件支持2.4 负载均衡策略2.5 监控和可视…

BSV区块链为供应链管理带来效率革命

​​发表时间&#xff1a;2024年10月10日 供应链管理是众多行业的重中之重&#xff0c;它确保了商品能够从制造商处顺畅地传递到消费者手中。然而&#xff0c;传统的供应链管理面临着许多挑战&#xff0c;包括缺乏透明度、延误、欺诈和协调上的低效率等等。 BSV区块链技术的出…

Xcode 15.4 运行flutter项目,看不到报错信息详情?

Xcode升级后&#xff0c;遇到了奇怪的事情&#xff1a; 运行flutter项目&#xff0c;左侧栏显示有报错信息&#xff0c;但是点击并没有跳转出具体的error详情。【之前都会自己跳转出来的&#xff0c;升级后真的是无厘头】 方案&#xff1a; 点击左侧导航栏最右边的图标——>…

Openlayers高级交互(14/20):汽车移动轨迹动画(开始、暂停、结束)

本示例演示在vue+openlayers中实现轨迹动画,这里设置了小汽车开始,暂停,结束等的控制键,采用了线段步长位置获取坐标来定位点的方式来显示小车的动态。 效果图 专栏名称内容介绍Openlayers基础实战 (72篇)专栏提供73篇文章,为小白群体提供基础知识及示例演示,能解决基…

【深入浅出】深入浅出Bert(附面试题)

本文的目的是为了帮助大家面试Bert&#xff0c;会结合我的面试经历以及看法去讲解Bert&#xff0c;并非完整的技术细致讲解&#xff0c;介意请移步。 深入浅出】深入浅出Bert&#xff08;附面试题&#xff09; 网络结构Pre-TrainingFine-Tuning 输入编码词向量编码句子编码位置…

保存暄桐的这份清福清单 让福气慢慢积累

鸿福易享&#xff0c;清福难得。真正的清福&#xff0c;不是多么好的物质基础&#xff0c;而是来源于内心的平安喜乐。生活于纷繁的现代社会&#xff0c;想获得清净的福德实属不易&#xff0c;于是&#xff0c;便更需要我们为自己创造条件。暄桐送你一份清福清单&#xff0c;当…

Profinet、Ethernet/IP 工业以太网无线通信解决方案

在工业现场&#xff0c;我们常常会面临这样的困扰&#xff1a;两个PLC之间、PLC 跟远程IO之间或者PLC 跟伺服之间由于种种原因不方便布线&#xff0c;严重影响了通讯效率和生产进程。为了解决这一难题&#xff0c;三格电子设计了一款工业以太网无线网桥&#xff0c;这款无线网桥…

【Flask】四、flask连接并操作数据库

目录 前言 一、 安装必要的库 二、配置数据库连接 三、定义模型 四、操作数据库 1.添加用户 2.删除用户 3.更新用户信息 4查询所有用户 五、测试结果 前言 在Flask框架中&#xff0c;数据库的操作是一个核心功能&#xff0c;它允许开发者与后端数据库进行交互&#xf…

NGINX 交叉编译 arm32

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…

如何在Linux下安装和配置Docker

文章目录 安装前的准备在Debian/Ubuntu上安装Docker添加Docker仓库安装Docker验证安装 在CentOS/RHEL上安装Docker安装必要的软件包设置Docker仓库安装Docker启动Docker服务 Docker的基本使用拉取一个镜像运行一个容器 配置Docker创建Docker目录使用非root用户运行Docker 结语 …

什么是感知器?

神经网络是松散地基于人脑结构的信号处理工具。它们通常与人工智能 (AI) 相关。我不喜欢“人工智能”这个词&#xff0c;因为它不且简单化。如果将“智能”定义为快速进行数值计算的能力&#xff0c;那么神经网络是人工智能。但在我看来&#xff0c;智能远不止于此——它是设计…

【js逆向学习】某多多anti_content逆向(补环境)

文章目录 声明逆向目标逆向分析逆向过程总结 声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供完整代码&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的…

Centos系统新增网卡后获取不到网卡的IP地址解决方法

一、问题描述 当我们给Centos系统添加了新的网卡后,使用查看IP地址命令【ip addr】时,发现新网卡没有获取到对应的IP地址信息,如下图所示: 二、解决方法 有两种解决方法:一种是自动获取IP地址;另外一种是手动配置IP地址; 2.1、自动获取IP地址 #自动获取网卡的IP地址命…

ARB链挖矿DApp系统开发模式定制

在区块链生态中&#xff0c;挖矿作为一种获取加密资产的方式&#xff0c;越来越受到关注。ARB链凭借其高效的性能和灵活的智能合约系统&#xff0c;成为了开发挖矿DApp的理想平台。本文将探讨ARB链挖矿DApp的开发模式定制&#xff0c;包括架构设计、功能实现以及最佳实践。 ARB…