Bootstrap

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

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>

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

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
GitHub的使用
Java毕业设计-基于springboot开发的在线课程管理系统-毕业论文（附毕设源代码）
面试题 19. 正则表达式匹配
vue项目去掉网页滚动条
android怎么安装apk文件,apk文件怎么安装？如何安装apk文件
2022.10.9
YOLOv8超参数解析
基于腾讯云（TRTC）的客户端直播中台SDK架构设计
C#第五次作业
CDN原理与识别
;