Echarts 中国地图(包括china.js文件)

最新推荐文章于 2024-08-05 05:00:00 发布

给大佬带帽

最新推荐文章于 2024-08-05 05:00:00 发布

阅读量3.4w

点赞数 10

分类专栏： ECharts 文章标签： ECharts

本文链接：https://blog.csdn.net/m0_37706442/article/details/86493101

版权

ECharts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

用Echarts写中国地图需要导入china.js（现在官方不提供下载，个人找的在最下面有）,根据需要的效果如下。位置可以自己在option里面修改

<!DOCTYPE html>
<html> 
<head>
    首先，引入jquery.js echarts.js china.js(必要)
　　 <script src="/jquery.js"></script>
    <script src="echarts.min.js"></script>
    <script src="china.js"></script>
<head>
<body>
　　创建一个DIV容器 方便初始化
　　<div id="china-map"></div>

    <script type="text/javascript"> 
    var myChart = echarts.init(document.getElementById('china-map'));  
    function randomData() {
        return Math.round(Math.random() * 1000);
    }

    var data = [{
        name: '云南',
        value1: randomData(),
        value2: randomData(),
    }, {
        name: '辽宁',
        value1: randomData(),
        value2: randomData(),
    }, {
        name: '黑龙江',
        value1: randomData(),
        value2: randomData(),
    }, {
        name: '湖南',
        value1: randomData(),
        value2: randomData(),
    },{
        name: '福建',
        value1: randomData(),
        value2: randomData(),
    }, {
        name: '贵州',
        value1: randomData(),
        value2: randomData(),
    }, {
        name: '广东',
        value1: randomData(),
        value2: randomData(),
    }, {
        name: '青海',
        value1: randomData(),
        value2: randomData(),
    }, {
        name: '西藏',
        value1: randomData(),
        value2: randomData(),
    }, {
        name: '四川',
        value1: randomData(),
        value2: randomData(),
    }];


    var resultdata0 = [];
    var sum0 = 0;
    var titledata = [];
    for (var i = 0; i < data.length; i++) {
        var d0 = {
        name: data[i].name,
        value: data[i].value1 + data[i].value2
        };
        titledata.push(data[i].name)
        resultdata0.push(d0);
        sum0 += data[i].value1 + data[i].value2;
    }

    function NumDescSort(a,b){
        return a.value-b.value;
    }

    resultdata0.sort(NumDescSort);

    var option = {
        title: [{                   //标题
        text: '销售量统计',
        subtext: '纯属虚构',
        left: 'left'
        },{                         //右上角全部
        text: '全部: ' +sum0,
           right: '54%',
        top: 40,
        width: 100,
        textStyle: {
            color: '#555',
            fontSize: 16
        }
        }],
        tooltip: {
        trigger: 'item'
        },
        visualMap: {             　　//左下角拉条
        min: 0,
        max: 2500,
        left: 'left',
        top: '50',
        text: ['高', '低'],
        calculable: true,
        colorLightness: [0.2, 100],
        color: ['#c05050','#e5cf0d','#5ab1ef'],
        dimension: 0
        },
        toolbox: {                  //右边工具栏
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {
            readOnly: false
            },
            restore: {},
            saveAsImage: {}
        }
        },
        grid: {                 //右边的bar
        right: '30%',
        top: 100,
        bottom: 40,
        height:'40%',
        width: '30%'
        },
        xAxis: [{
        position: 'top',
        type: 'value',
        boundaryGap: false,
        splitLine: {
            show: false
        },
        axisLabel:{
              rotate:45, 　　　　//刻度旋转45度角
              textStyle:{
            }
        }
        }],
        yAxis: [{
        type: 'category',
        data: titledata,
        axisTick: {
            alignWithLabel: true
        }
        }],
        barWidth:30,
        series: [{              //地图
        z: 1,
        name: '全部',
        type: 'map',
        map: 'china',
        left: '10',
        right: '70%',
        top: 100,
        bottom: "35%",
        zoom: 1,
        label: {
            normal: {
            show: true
            },
            emphasis: {
            show: true
            }
        },
        //roam: true,
        data: resultdata0
        }, {                //bar
        name: '全部',
        z: 2,
        type: 'bar',
         barWidth: '%10',
        label: {
            normal: {
            show: true
            },
            emphasis: {
            show: true,
            }
        },
        itemStyle: {
            emphasis: {
            color: "rgb(254,153,78)"
            }
        },
        data: resultdata0
        }]
    };
    myChart.setOption(option);  
    </script>    
</body>
</html>