echarts 地图统计

最新推荐文章于 2025-05-26 15:33:40 发布

原创最新推荐文章于 2025-05-26 15:33:40 发布 · 820 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

JS 组件专栏收录该内容

21 篇文章

订阅专栏

X轴数据太多，显示不全设置

xAxis: [
    {
        type: 'category',
        axisLabel:{
            interval:0,//横轴信息全部显示
            rotate: -30 //-30度角倾斜显示
        },

设置Y坐标的最大值和单位

yAxis : [
    {
        name: '流量(m^3/s)',
        type: 'value',
        max: 500,
        axisLabel : {
            show:true,
            interval: 'auto',    // {number}
            rotate: -45,
            margin: 18,
            formatter: '{value} ml'    //单位
        },

数据加个单位：显示相关的label或tooltip都支持formatter，如数值轴你就可以通过axis的axisLabel.formatter做换算控制，支持function

Y轴保留1位小数

yAxis : [
    {
        type : 'value',
        axisLabel: {
            formatter: function (value, index) {
                return value.toFixed(1);
            }
        }
    }
],

鼠标悬停数据提示带单位

tooltip: {
    trigger: 'axis',
    formatter: "收支统计 : <br/>{b} : {c}万"
},

柱状图数据带上单位

series: [
    {
        type: 'bar',
        itemStyle: {
            normal: {
                label: {
                    show: true,
                    position: 'top',
                    formatter: '￥{c}'
                }
            }
        },

柱状图修改颜色

name: '合计工时',
type: 'bar',
itemStyle: {
    normal: {
        color: '#00bfff',
        label : {
            show: true,
            position: 'top',
            textStyle: {
                color: '#00bfff'
            }
        }
    }
},

中国地图echart3.js

var option = {
    timeline: {
        data: [
            '2002-01-01','2003-01-01','2004-01-01',
            {
                value: '2005-01-01',
                tooltip: {
                    formatter: '{b} GDP达到一个高度'
                },
                symbol: 'diamond',
                symbolSize: 16
            },
            '2006-01-01'
        ],
        label: {
            formatter: function (s) {
                var date = new Date(s);
                var month = date.getMonth() + 1;
                return date.getFullYear() + "-" + (month > 9 ? month : '0' + month);
            }
        },
//            autoPlay : true,
        playInterval: 1000,
        symbolSize: 15,
        width: '750'
    },
    grid: {
        bottom: 100 //留位置给日期轴
    },
    options: [
        {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['累计成交额']
            },
            visualMap: {
                min: 0,
                max: 2500,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true
            },
            series: [
                {
                    name: '累计成交额',
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    'data': dataMap.dataGDP['2002']
                }
            ]
        },
//            {
//                series : [
//                    {'data': dataMap.dataGDP['2003']}
//                ]
//            }
    ]
};
$.get('__PUBLIC__/js/plugins/visualization/echarts/map/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var myChart = echarts.init(document.getElementById('chart_div'));

    for (var year = 2003; year <= 2006; year++) {
        option.options.push({
            series : [
                {'data': dataMap.dataGDP[year]}
            ]
        });
    }
    
    myChart.setOption(option);
    myChart.on('mapselectchanged',function($params){
      console.log($params.data.name); //省的名称 
    });
});

echart2制作中国地图,点击对应的省市链接到该省份的详细介绍

require(['echarts', 'echarts/chart/map'], function (charts) {
    var myChart = charts.init(document.getElementById('chart_div'));
    var option = {
        title: {
            text: '全国34个省市自治区',
            subtext: '中国地图（点击切换）'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            x: 'right',
            data: ['随机数据']
        },
        dataRange: {
            min: 0,
            max: 1000,
            text: ['高', '低'],           // 文本，默认为数值文本
            calculable: true
        },
        series: [
            {
                name: '随机数据',
                type: 'map',
                mapType: 'china',
                selectedMode: 'single',
                roam: true,
                itemStyle: {
                    normal: {label: {show: true}},
                    emphasis: {label: {show: true}}
                },
                data: [
                    {name: '北京', value: Math.round(Math.random() * 1000)},
                    {name: '天津', value: Math.round(Math.random() * 1000)},
                    {name: '上海', value: Math.round(Math.random() * 1000)},
                    {name: '重庆', value: Math.round(Math.random() * 1000)},
                    {name: '河北', value: Math.round(Math.random() * 1000)},
                    {name: '河南', value: Math.round(Math.random() * 1000)},
                    {name: '云南', value: Math.round(Math.random() * 1000)},
                    {name: '辽宁', value: Math.round(Math.random() * 1000)},
                    {name: '黑龙江', value: Math.round(Math.random() * 1000)},
                    {name: '湖南', value: Math.round(Math.random() * 1000)},
                    {name: '安徽', value: Math.round(Math.random() * 1000)},
                    {name: '山东', value: Math.round(Math.random() * 1000)},
                    {name: '新疆', value: Math.round(Math.random() * 1000)},
                    {name: '江苏', value: Math.round(Math.random() * 1000)},
                    {name: '浙江', value: Math.round(Math.random() * 1000)},
                    {name: '江西', value: Math.round(Math.random() * 1000)},
                    {name: '湖北', value: Math.round(Math.random() * 1000)},
                    {name: '广西', value: Math.round(Math.random() * 1000)},
                    {name: '甘肃', value: Math.round(Math.random() * 1000)},
                    {name: '山西', value: Math.round(Math.random() * 1000)},
                    {name: '内蒙古', value: Math.round(Math.random() * 1000)},
                    {name: '陕西', value: Math.round(Math.random() * 1000)},
                    {name: '吉林', value: Math.round(Math.random() * 1000)},
                    {name: '福建', value: Math.round(Math.random() * 1000)},
                    {name: '贵州', value: Math.round(Math.random() * 1000)},
                    {name: '广东', value: Math.round(Math.random() * 1000)},
                    {name: '青海', value: Math.round(Math.random() * 1000)},
                    {name: '西藏', value: Math.round(Math.random() * 1000)},
                    {name: '四川', value: Math.round(Math.random() * 1000)},
                    {name: '宁夏', value: Math.round(Math.random() * 1000)},
                    {name: '海南', value: Math.round(Math.random() * 1000)},
                    {name: '台湾', value: Math.round(Math.random() * 1000)},
                    {name: '香港', value: Math.round(Math.random() * 1000)},
                    {name: '澳门', value: Math.round(Math.random() * 1000)}
                ]
            }
        ]
    };
    myChart.setOption(option);

    var ecConfig = require('echarts/config');
    myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {
        var selected = param.selected;
        var selectedProvince;
        var name;
        for (var i = 0, l = option.series[0].data.length; i < l; i++) {
            name = option.series[0].data[i].name;
            option.series[0].data[i].selected = selected[name];
            if (selected[name]) {
                selectedProvince = name;
            }
        }
        if (typeof selectedProvince == 'undefined') { //城市点击后
            option.series[0].mapType = 'china';
            option.title.subtext =  '中国地图（点击切换）';
            myChart.setOption(option, true);
            return;
        }
        option.series[0].mapType = selectedProvince;
        //根据省取动态数据
        option.series[0].data.push(
            {name: '荆门市', value: Math.round(Math.random() * 1000)},
            {name: '咸宁市', value: Math.round(Math.random() * 1000)},
            {name: '随州市', value: Math.round(Math.random() * 1000)},
            {name: '孝感市', value: Math.round(Math.random() * 1000)},
            {name: '武汉市', value: Math.round(Math.random() * 1000)},
            {name: '黄石市', value: Math.round(Math.random() * 1000)},
            {name: '神农架林区', value: Math.round(Math.random() * 1000)},
            {name: '天门市', value: Math.round(Math.random() * 1000)},
            {name: '仙桃市', value: Math.round(Math.random() * 1000)},
            {name: '潜江市', value: Math.round(Math.random() * 1000)},
            {name: '鄂州市', value: Math.round(Math.random() * 1000)},
            {name: '宜昌市', value: Math.round(Math.random() * 1000)}
        );
        option.title.subtext = selectedProvince + ' （点击切换）';
        myChart.setOption(option, true);
    });
});