echarts中国地图配置

   <script type="text/javascript" src="js/echarts.min.js" ></script>
    <script type="text/javascript" src="js/china.js" ></script>

function randomData() {
return Math.round(Math.random()*500);
}

var mydata = [
{name: ‘北京’,value: ‘100’ },{name: ‘天津’,value: randomData() },
{name: ‘上海’,value: randomData() },{name: ‘重庆’,value: randomData() },
{name: ‘河北’,value: randomData() },{name: ‘河南’,value: randomData() },
{name: ‘云南’,value: randomData() },{name: ‘辽宁’,value: randomData() },
{name: ‘黑龙江’,value: randomData() },{name: ‘湖南’,value: randomData() },
{name: ‘安徽’,value: randomData() },{name: ‘山东’,value: randomData() },
{name: ‘新疆’,value: randomData() },{name: ‘江苏’,value: randomData() },
{name: ‘浙江’,value: randomData() },{name: ‘江西’,value: randomData() },
{name: ‘湖北’,value: randomData() },{name: ‘广西’,value: randomData() },
{name: ‘甘肃’,value: randomData() },{name: ‘山西’,value: randomData() },
{name: ‘内蒙古’,value: randomData() },{name: ‘陕西’,value: randomData() },
{name: ‘吉林’,value: randomData() },{name: ‘福建’,value: randomData() },
{name: ‘贵州’,value: randomData() },{name: ‘广东’,value: randomData() },
{name: ‘青海’,value: randomData() },{name: ‘西藏’,value: randomData() },
{name: ‘四川’,value: randomData() },{name: ‘宁夏’,value: randomData() },
{name: ‘海南’,value: randomData() },{name: ‘台湾’,value: randomData() },
{name: ‘香港’,value: randomData() },{name: ‘澳门’,value: randomData() }
];
var optionMap = {
backgroundColor: ‘#FFFFFF’,
title: {
text: ‘全国地图大数据’,
subtext: ‘’,
x:‘center’
},
tooltip : {
trigger: ‘item’
},

            //左侧小导航图标
            visualMap: {  
                show : true,  
                x: 'left',  
                y: 'center',  
                splitList: [   
                    {start: 500, end:600},{start: 400, end: 500},  
                    {start: 300, end: 400},{start: 200, end: 300},  
                    {start: 100, end: 200},{start: 0, end: 100},  
                ],  
                color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']  
            },  
            
            //配置属性
            series: [{  
                name: '数据',  
                type: 'map',  
                mapType: 'china',   
                roam: true,  
                label: {  
                    normal: {  
                        show: true  //省份名称  
                    },  
                    emphasis: {  
                        show: false  
                    }  
                },  
                data:mydata  //数据
            }]  
        };  
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(optionMap);
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts 5.0中,如果你想高亮显示地图上的特定区域,你可以通过设置`visualMap`来进行操作。视觉映射(Visual Map)允许你动态调整图表的颜色范围,以突出显示数据分布的变化。 以下是一个基本步骤: 1. **创建地图组件**: 首先,你需要引入ECharts库,并创建一个地理图实例,比如中国地图(China): ```javascript var myChart = echarts.init(document.getElementById('map')); ``` 2. **加载地图数据**: 使用`echarts.registerMap`注册地图数据并获取对应的数据系列: ```javascript echarts.registerMap('china', ...); // 注册地图数据 var geoCoordMap = echarts.mapData('china'); ``` 3. **配置地图**: 将地图系列添加到图表中,并配置好视觉映射的属性,如范围、颜色梯度等: ```javascript var option = { series: [{ type: 'map', mapType: 'china', // 显示的地图类型 data: ..., // 地区编码对应的值 roam: false, // 禁止缩放和平移 visualMap: { // 视觉映射配置 show: true, pieceswise: [{min: 0, max: 100, color: ['#f00', '#0f0']}, {max: 200, color: ['#00f']}], // 分段颜色映射 dimension: 0, // 指定数据维度 }], }] }; ``` 4. **高亮区域**: 如果你想针对某个区域进行高亮,可以提供该区域的值给视觉映射的`pieceValue`选项,或者在用户交互时动态更新它。 ```javascript var highlightValue = 50; // 例如你要高亮的最大值 option.series.visualMap_pieceValue = [highlightValue]; ``` 5. **渲染图表**: 最后,调用`setOption`方法将配置应用到图表上: ```javascript myChart.setOption(option); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值