echart地图以及地图链路样式

最新推荐文章于 2024-09-02 23:33:47 发布

田姐儿

最新推荐文章于 2024-09-02 23:33:47 发布

阅读量944

点赞数 1

文章标签： echart地图

本文链接：https://blog.csdn.net/weixin_45690699/article/details/101545029

版权

echart地图以及地图链路样式

html
js引入的先后顺序很重要


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>

<body>    
    <div id="interViewMap" style="width: 1000px;height:500px"></div>
</body>
<script src="./js/echarts.min.js"></script>//先引入echart.min.js
<script src="./js/china.js"></script>//后引入china.js
<script src="./js/map.js"></script>
</html>

var myChart = echarts.init(document.getElementById('interViewMap'));
var optionMap = {  
    backgroundColor: '#FFFFFF', //背景色 
    //标题
    title: {  
        text: '地图标题',  
        subtext: '',  
        x:'center'  
    }, 
    // geo组件配置坐标系为地理坐标系，为后面找各省份坐标准备，如果使用到各省坐标就必须用这个组件 
    geo: {  
        map: 'china',
        label: {
            normal: {
                show: false,
                formatter: '{a}',
                backgroundColor: '#fff',
                padding: [3, 5],
                borderRadius: 3,
                borderWidth: 1,
                borderColor: 'rgba(0,0,0,0.5)',
                color: '#777'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        },
        selectedMode: 'single',
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#404a59'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
     //各类数据配置属性
    series: [
    //这一组json是显示各省数据，
    {  
        name: '数据',  
        type: 'map',  
        mapType: 'china',   
        roam: true,  //是否可以拖动放大
        itemStyle: {
            normal: {
                label:{
                    show: false 
                },
                areaColor: '#5AD0BF',//地图颜色
                borderColor:'#E0F4F1',//省份边缘线颜色
            },
        
        },
        data:''  //数据
    },
    // 这个就是各省之间的连线
    {  
      type: 'lines',
        zlevel: 1,
        coordinateSystem: 'geo',// 表示使用的坐标系为地理坐标系
        polyline: true,// 这表示连线是否为多端点的连线
        // 连线的数据 ，各省坐标可以在china.js里面全局搜索
        data: [{
            coords: [
                [121.472644,31.231706], //上海的坐标
                [116.405285,39.904989] //北京的坐标
            ]
        },{
            coords: [
                [121.472644,31.231706], //上海的坐标
                [91.132212,29.660361]//西藏的坐标
            ]
        },
        {
            coords: [
                [121.472644,31.231706], //上海的坐标
                [103.823557,36.058039]//甘肃的坐标
            ]
        },{
            coords: [
                [121.472644,31.231706], //上海的坐标
                [112.982279,28.19409]//湖南的坐标
            ]
        }],
        //连线样式
        lineStyle: {
            normal: {
                color:"#676969",
                opacity: .5,
                width: 1
            }
        },
        //动画效果
        effect: {
            color:"#0C564B",
            constantSpeed: 20,
            show: true,
            trailLength: 0.1,
            symbolSize: 5
        },
    },
    //高亮时出现的效果
    {
        type: 'lines',
        coordinateSystem: 'geo',// 表示使用的坐标系为地理坐标系
        data: [{
            coords: [
                [121.472644,31.231706], //上海
                [116.405285,39.904989] //北京
            ]
        }],
        lineStyle: {
            normal: {
                width: 1,
                color:"#C4355F",
                emphasis:{
                    label:true
                }
                
            }
        },
        //动画效果
        effect: {
            constantSpeed: 20,
            show: true,
            trailLength: 0.1,
            symbolSize: 5
        },
        zlevel: 1
    },
    // 连线两端散点效果
    { 
        type: 'effectScatter',
        symbol:'circle',//散点的形状，具体的样式可以参照api
        symbolSize:5,//散点大小
        coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系
        zlevel: 3,
        itemStyle: {
            normal: {
                color: "#A2E153"
            }
        },
        data:  [[121.472644,31.231706], 
                [116.405285,39.904989],
                [91.132212,29.660361],
                [103.823557,36.058039],
                [112.982279,28.19409]
            ],
    }
],
};  
//初始化echarts实例
var myChart = echarts.init(document.getElementById('interViewMap'));
//使用制定的配置项和数据显示图表
myChart.setOption(optionMap);