echarts 地图（echarts 地图有哪些属性）

本文目录

• echarts 地图有哪些属性
• echarts怎么设置地图的大小
• 如何在echarts地图上显示数据
• Echarts 地图 省份的颜色自定义如何设置
• 如何用ECharts动态在地图上标识点
• 为什么我用echarts写的地图总是显示不出来
• echarts地图上 某区域指定位置添加文字说明
• echarts如何实现点击地图某个区域，某个区域放大，望贴出代码
• 请教echarts地图的一些使用问题
• echarts地图搭配饼图怎样实现

echarts 地图有哪些属性

ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。ECharts (Enterprise Charts 商业产品图表库)提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。

echarts怎么设置地图的大小

option里边有个bmap设置其中的zoom为的大小即可设置地图大小。bmap: {center: }},

如何在echarts地图上显示数据

require.config({ paths:{ echarts:’./js/echarts’, ’echarts/chart/bar’ : ’./js/echarts-map’, ’echarts/chart/line’: ’./js/echarts-map’, ’echarts/chart/map’: ’./js/echarts-map’ } }); var option = { title : { text: ’某地区蒸发量和...

Echarts 地图 省份的颜色自定义如何设置

1、首先将省份和颜色的关系描述起来，写到js中。

2、然后在地图实现方法中从数据库中获取数据，然后将数据作为变量代Echarts的option中的data值。

3、在注入这些值的时候进行判断，根据不同的选择情况，从关系描述的js中获取值，看看选择条件是否在范围之内，如果是，则加上itemStyle属性。

4、然后对不同的下拉选择进行判断，当点击查询按钮的时候，将这些值传递到定义的全局变量中。

5、接着写这个地图的点击事件，其中search_map()方法是重新查询后台数据，生成地图所需要的数据，regionList是定义的变量，用来存放要选中的区域块的值。

6、最后展示效果，各个省份都用颜色设置出来了。

如何用ECharts动态在地图上标识点

ECharts可以很方便的在网页上绘制地图，图表，并且可以提供下载图像，放大，缩小，拖动等功能，今天主要说一下它的地图类型（type:＇map＇)是如何实现的．首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里，它是一个JS的字典对象，由键／值对组成，键表示点的名称，值则表达它的坐标，由经纬度组成，它是一个数组，如.latitude });}myChart.setOption(option);

为什么我用echarts写的地图总是显示不出来

显示什么问题？我之前遇到的就是引用echarts后地图不显示的问题。 这个问题是因为echarts3的地图的geo数据以前的中国地图是内置了，现在新版本需要自己下载的china的js或json数据，引用了之后就可以显示了。http://echartsbaiducom/download-m为什么我用echarts写的地图总是显示不出来

echarts地图上 某区域指定位置添加文字说明

可以在电脑版的echarts地图选择地点然后标记，具体步骤如下：

1、打开echarts地图地图。

2、选择地图功能区中的工具箱，选择标记功能。

3、点击弹出的工具箱中的标记标志，选择想要进行标记的地点。

4、标记想要的地点后，输容入标记地点的名称并点击保存。

注意事项：

1、以计算机为主体的电子设备在制图中的广泛应用，地图不再限于用符号和图形表达在纸（或类似的介质）上，它可以数字的形式存储于磁介质上，或经可视化加工表达在屏幕上；

2、由于航天技术的发展，出现了卫星遥感影像，这不但给地图制作提供了新的数据源，还可以把影像直接作为地理事物的表现形式，同时把人们的视野拓展到月球和其他星球。

3、多媒体技术的发展，使得视频、声音等都可以成为地图的表达手段。

echarts如何实现点击地图某个区域，某个区域放大，望贴出代码

网页链接这个上面写的   不知是不是你要的效果。供参考

import echarts from ’echarts/lib/echarts’;

import ’echarts/lib/chart/map’;

/*geojson文件很大，生产环境中，应该放在public文件夹中，并异步加载*/

import { geoJson } from ’./regionJsonXc’;

import { sqJson } from ’./regionJsonXc’;

let defaultBlue = ’#25ade6’;

let darkBlue = ’#186396’; //详细地图，线条颜色暗一些

// 配置option，一定要查看echarts官方配置文档

let option = {

    // 地图配置

    geo: { 

        show: true,

        map: ’XC’,

        label: {

            normal: {

                show: true,

                color: ’#ccc’,

                fontSize: 14,

            },

            emphasis: {

                show: true,

                color: ’#fff’

            }

        },

        roam: true, // 滚轮滚动--放大或缩小

        itemStyle: {

            normal: {

                label: {

                    show: true,

                    color: ’#fff’,

                    fontSize: 14,

                },

                areaColor: ’rgba(24,99,150,0.05)’,

                borderColor: #186396,

                shadowColor: #186396,

                shadowBlur: 10,

            },

            emphasis: {

                label: {

                    show: false,

                    color: ’#fff’,

                    shadowColor: ’#25ade6’,

                    shadowBlur: 10,

                },

                areaColor: ’rgba(24,99,150,0.5)’,

            },

        },

        zoom: 1

    },

    series:

};

let myChart = null;

class XcMap extends Component {

    state = {

        option: option,

        detail: false, // 是否使用详细地图

        curMap:geoJson,

    }

    componentDidMount() {

        this.draw(geoJson);

    }

    drawMap = (json) =》 {

        const { option } = this.state;

        let echartElement = document.getElementById(’xc-map’);

        myChart = echarts.init(echartElement);

        echarts.registerMap(’XC’, json);

        myChart.setOption(option, true);

        myChart.on(’georoam’, this.onDatazoom); // 缩放监听事件

    }

    /*

        获取zoom和center

        zoom:地图缩放值，

        center:中心位置，地图拖动之后会改变

    */

    getZoom = () =》 {

        if(myChart){

            let { zoom, center } = myChart.getOption().geo;

            return { zoom, center }

        }

        return;

    }

    /*

        保存缩放值和中心位置，

    */

    saveZoom = () =》 {

        let { zoom, center } = this.getZoom();

        const { option } = this.state;

        option.geo.zoom = zoom;

        option.geo.center = center;

       this.setState({option});

    }

    /**

     * 地图缩小/放大

     */

    onDatazoom = () =》 {

        const { detail, option } = this.state;

        const { zoom } = this.getZoom();

        const threshold = 1.7;

        this.saveZoom(); // 地图缩放后，将缩放值和center保存在状态中

        if (zoom 》= threshold && !detail) {

            // 切换详细地图

            option.geo.itemStyle.normal.borderColor = darkBlue;

            option.geo.itemStyle.normal.shadowColor = darkBlue;

            this.setState({

                detail:true,

                option,

                curMap:sqJson

            });

            this.drawMap(sqJson);

        } else if (detail && zoom 《 threshold) {

            // 切换默认地图

            option.geo.itemStyle.normal.borderColor = defaultBlue;

            option.geo.itemStyle.normal.shadowColor = defaultBlue;

            this.setState({

                detail:false,

                option,

                curMap:geoJson

            });

            this.drawMap(geoJson);

        }

    }

    render() {

        const {  position } = this.state;

        return (《div》

            《div id=“xc-map“ className={styles.map}》《/div》

        《/div》);

    }

}

export default XcMap;

请教echarts地图的一些使用问题

看了echarts的demo以及网上大家使用echarts的经验。我使用的是大家都的模块化单文件引入。首先要去echarts和zrender上需要的文件然后将下来的文件放在你项目的目录下，我将文件都放在我项目的js目录下。需要注意的是导入的zrender文件夹名不要改变，zrender和echarts在同一个目录下面。在项目中引用相关文件。我想要用echarts画地图，引用了map.js。引用地图的paths设置比较特殊，如图中我写的是 ’echarts/chart/map’: ’../../Scripts/js/echarts/map’,后面写的是map在项目中的实际路径，引用别的图表如pie则其目录只要和 ’echarts’: ’../../Scripts/js/echarts’后面的目录同即可。引用相关的文件后可能还会出现很多的小问题，主要去看看js文件目录是否正确。扩展地图插件的时候或者有别的需求需要引入config文件时，要注意一定要将引用的代码放在function(ec){}中，这样就不会报“echarts/config“ is not exists!错了调试完成后，就可以见到你想要看到的图片啦

echarts地图搭配饼图怎样实现

1）打开BDP个人版，先上传数据：数据上传后，在工作表右上方点击“添加图表”—“新建图表”，选择需要的工作数据（可选择多个工作表数据哦）；

2）拖拽成图：先拖拽工作表至图层，再拖拽经纬度、维度数值，然后选择地图统计图：饼图即可；（这里是选择热力图）

注：若只有省份地址，没有具体的经纬度数据，可以用BDP的“地址转经纬度”功能，瞬间就把地址转成具体的经纬度，分析也很精确~ 

3）GIS地图“润色”

可设置颜色、尺寸，也可以对地图进行放大缩小（鼠标滑动即可），操作很简单；