zoukankan      html  css  js  c++  java
  • echart3绘制地图

    使用echarts3绘制地图,引用js如下:

    <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="../js/echarts.js"></script>
    <script type="text/javascript" src="../js/china.js"></script>

    为echarts准备容器:

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

    初始化echarts:

    var myEcharts = echarts.init(document.getElementById("main"));

    指定地图配置项及样式:

    var options = {
                    backgroundColor: '#404a59', //背景颜色
                    title: { //主题
                        show: true, //显示主题
                        text: '中国地图', //主题内容
                        x: 'center', //设置主题水平居中
                        textStyle: {
                            color: '#fff' //字体颜色
                        },
                    },
                    series: [{
                        type: 'map',//指定图表为地图
                        map: 'china',
                        itemStyle: { //地图区域多边形
                            normal: { //普通状态的多边形样式
                                borderWidth: .5, //区域边框宽度
                                borderColor: '#fff', //区域边框颜色
                                areaColor: '#323c48' //区域颜色
                            },
                            emphasis: { //高亮状态的多边形样式
                                show: true, //高亮状态下显示省份
                                borderWidth: .5,
                                borderColor: '#4b0082',
                                areaColor: '#cccccc'
                            }
                        },
                    }],
                };

    以上配置只显示地图及将鼠标放在地图上时显示相应区域的省份名称,若需要加配置项参考echarts官网配置项http://echarts.baidu.com/option.html 。

    使用刚指定的配置项绘制地图

    myEcharts.setOption(options);

    地图效果如下(进入页面时地图没有显示省份,当把鼠标放在某区域时,显示相应区域省市名称):

  • 相关阅读:
    cidaemon.exe过程cpu入住率和关闭cidaemon.exe加工方法
    .net 一些常用的工具来破解
    关于加密和解密的设计思路
    oncopy和onpaste
    来迁移数据管道
    使用JSP实现商场购物车模块
    2014在辛星Javascript口译科
    Lua学习 1) —— Android呼叫变量值和分配
    HttpSQS
    手机后端开发
  • 原文地址:https://www.cnblogs.com/yyyyd/p/8274564.html
Copyright © 2011-2022 走看看