echarts 地图插件省市级联跳转

最新推荐文章于 2024-08-21 14:37:32 发布

一个无知的女程序猿

最新推荐文章于 2024-08-21 14:37:32 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/BBBBBingo/article/details/77181092

版权

本文介绍如何利用Echarts地图插件在公司项目中实现点击全国地图跳转到省级地图，并且能够在省级地图中点击城市进行选中操作。初学者指南，已实现基本功能。

摘要由CSDN通过智能技术生成

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="<%=basePath%>/static/common/js/echarts.js"></script>
        <script type="text/javascript" src="<%=basePath%>/static/common/js/map/china.js"></script>
        <title>首页统计信息</title>
    </head>
   
</head>
<body>

<div id="main" style="width: 800px;height:600px;"></div>

 <script>
            var chart = echarts.init(document.getElementById('main'));
            option = {
                series: [
                    {
                        type: 'map',
                        mapType: 'china',
                        roam: false,
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                       
                    }
                ]
            };
            chart.setOption(option);
            
            var flag=true;
            var province = '';
            chart.on('click', function (params) {
            	if(flag){
            		province =