echarts_地图

echarts构建数据可视化

1.安装

1.1 安装nodejs

构建webpack项目，需要安装nodejs，告别传统直接

1	<script type="text/javascript"></script>

标签引用，nodejs安装和webpack构建这里先不说了，以后专门写webpack时候再说。nodejs前面也说过安装就不多说了。

1.2 安装echarts

直接使用命令

1	npm install echarts -s

这里说明一下，有个坑，echarts地图显示存在版本冲突，所以可以@你的版本号避免这种冲突。

1.3 引用echarts

在webpack构建的项目里，在index.js或者main.js，即页面直接引用的js引用echarts

1 2	let echarts = require('echarts'); window.echarts=echarts;

这里说明一下，也可以用import，这两个区别在以后的nodejs中回去讲解。

2.地图实现

2.1 html部分

首先在html中需要有放地图的位置，并且有自己的id，这里必须给该

大小，否则echarts显示不出来

1 2	<div id = "map" style="width:600px;height:500px;"> </div>

2.2 js部分

首先把地图对应的json传给echarts

1	echarts.registerMap(city, resultJson);

之后获取div

1	let myChart = echarts.init(document.getElementById("map"));

之后setoption

myChart.setOption({
                tooltip: {//配置鼠标方式显示提示样式
                    trigger: 'item',
                  formatter: '{b}:{c}'
                },
                series : [{
                    type: 'map',
                    //设置地图样式，未选中板块的样式和选中板块的样式
                    itemStyle: {
                    normal: {
                        areaColor: "#00BFFF",
                        borderWidth: 1,
                        borderColor: '#fff',
                        color: '#00BFFF',
                        label: {
                            show: true
                        }
                    },
                    emphasis: {                 // 也是选中样式
                        borderWidth: 1,
                        areaColor: "#58FA82",
                        borderColor: '#fff',
                        color: '#32cd32',
                        label: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                },
                    map: city,//要和echarts.registerMap（）中第一个参数一致
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    data : [{name:'广东', selected:true , value:100}]
                }]
            })