淘先锋技术网

首页 1 2 3 4 5 6 7
	场景需求:在使用echarts渲染的时候,有需求在页面中实现在echarts地图上叠加柱状图或者折线图,饼图等场景;
	目前地图上叠加的代码是甘肃省的json文件,也可以更换成全国的或者其他省份的,有需要下载其他省份的json文件的可以私聊我;
	目前实现的是echarts地图叠加柱状图,实现的效果图如下:

效果图:

echarts地图叠加柱状图

代码如下:

	html代码如下
	<Card class="cardBox leftBox">
        <div id="proviceMap" ref="proviceMap"></div>
    </Card>
js代码如下
<script>
//这里引入的是本地的json数据文件,目前是引用的甘肃省的JSON数据
import proviceJson from '../../../../../static/jsonData/ganSu.json' 
export default {
    name:"historicalResultsStatistics",
    data(){
        return{
            searchForm:{
                areas:[],
                resultData:"",
                time:"",
            },
            areasData:[],
            typeListCode:[],
            dataList:[
                { name: "兰州市", value: 540 ,value1:156},
                { name: "嘉峪关市", value: 830 ,value1:156},
                { name: "金昌市", value: 400,value1:156},
                { name: "白银市",  value: 750,value1:156},
                { name: "天水市", value: 130,value1:156},
                { name: "武威市", value: 830,value1:156},
                { name: "张掖市", value: 110,value1:156 },
                { name: "平凉市",  value: 19 ,value1:156},
                { name: "酒泉市",  value: 1150,value1:156},
                { name: "庆阳市", value: 690,value1:156 },
                { name: "定西市", value: 960 ,value1:156},
                { name: "陇南市", value: 839 ,value1:156},
                { name: "临夏回族自治州", value: 639 ,value1:156},
                { name: "甘南藏族自治州", value: 139 ,value1:156},
            ],
            myChart:null,
            centerData:{} ,//柱状图中心点的位置
        }
    },
    created(){
        var arr = proviceJson.features
        arr.length>0 && arr.forEach((item,index) =>{
            var obj = {}
            this.centerData[item.properties.name] = item.properties.center
        })
    },
    mounted(){
        this.$nextTick(() =>{
            this.initProviceMap();
        })
    },
    methods:{
        // 初始化省级的地图
        initProviceMap(){
            var _this = this
            this.$ECharts.registerMap('proviceJson', proviceJson)
            this.myChart = this.$ECharts.init(this.$refs.proviceMap, null, {renderer:'svg'});
            this.myChart.off('click');
            //echart 配制option  
            var options= {
                    tooltip: {
                        triggerOn: "mousemove",   //mousemove、click
                        padding:8,
                        borderWidth:1,
                        borderColor:'#409eff',
                        backgroundColor:'rgba(255,255,255,0.7)',
                        textStyle:{
                            color:'#000000',
                            fontSize:13
                        },
                    },
                    visualMap: {
                        show:true,
                        left: 26,
                        bottom: 40,
                        showLabel:true,
                        pieces: [
                            {
                                gte: 1000,
                                label: ">= 1000",
                                color: "#5475f5"
                            },
                            {
                                gte: 700,
                                lt: 999,
                                label: "700 - 999",
                                color: "#e6ac53"
                            },
                            {
                                gte: 500,
                                lt: 699,
                                label: "500 - 699",
                                color: "#9feaa5"
                            },
                            {
                                gte: 100,
                                lt:499,
                                label: "100 - 499",
                                color: "#85daef"
                            },
                            {
                                gte: 10,
                                lt: 99,
                                label: "10 - 99",
                                color: "#74e2ca"
                            },
                            {
                                lt:10,
                                label:'<10',
                                color: "#9fb5ea"
                            }
                        ]
                    },
                    geo: {
                        type: "map",
                        map:"proviceJson",
                        scaleLimit: {
                            min: 1,
                            max: 2
                        },
                        zoom: 1,
                        top: 120,
                        layoutSize: "100%", //保持地图宽高比
                        label: {
                            normal: {
                                show:true,
                                fontSize: "14",
                                color: "rgba(0,0,0,0.7)"
                            },
                            emphasis: {
								show: false,
								textStyle: {
									color: "#F3F3F3"
								}
							}
                        },
                        itemStyle: {
                            normal: {
                                borderColor: "rgba(0, 0, 0, 0.2)",
                                areaColor: '#1955a4',
                            },
                            emphasis: {
                                areaColor: "#f2d5ad",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                borderWidth: 0
                            }
                        }
                    },
                    series: []
            }
            this.myChart.clear();
            this.myChart.setOption(options , true);
            this.myChart.resize();
            //地图的点击事件
            this.myChart.on('click', function(params) {
            })
            var option = {
                xAxis: [],
                yAxis: [],
                grid: [],
                series: [],
            };
            echarts.util.each(_this.dataList, function(dataItem, idx) {
                var geoCoord = _this.centerData[dataItem.name];
                var coord = _this.myChart.convertToPixel('geo', geoCoord);
                idx += '';
                var inflationData = [dataItem.value,dataItem.value1];
                option.xAxis.push({
                    id: idx,
                    gridId: idx,
                    type: 'category',
                    nameLocation: 'middle',
                    nameGap: 3,
                    nameTextStyle:{
                        color:"#000000",
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color:"#fff",
                        show: false
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: '#555'
                        }
                    },
                    data: ["总体规划","专项规划"],
                    z: 100
                });
                option.yAxis.push({
                    id: idx,
                    gridId: idx,
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    z: 100
                });
                option.grid.push({
                    id: idx,
                    width: 30,
                    height: 40,
                    left: coord[0] - 15,
                    top: coord[1] - 15,
                    z: 100
                });
                option.series.push({
                    id: idx,
                    type: 'bar',
                    xAxisId: idx,
                    yAxisId: idx,
                    barGap: 0,
                    barCategoryGap: 2,
                    data: inflationData,
                    z: 100,
                    itemStyle: {
                        normal: {
                            color: function(params){
                                // 柱状图每根柱子颜色
                                var colorList = ['#fcae91','#fb6a4a'];//['#fcae91','#fb6a4a','#cb181d'];
                                return colorList[params.dataIndex];
                            }
                        }
                    }
                });
            });
            _this.myChart.setOption(option);
        },
    }
}
</script>