zoukankan      html  css  js  c++  java
  • echarts Map(地图) 不同颜色区块显示

    echarts Map(地图) 不同区块显示

    这里以重庆地图为例

    配置项:

    var option = {
            title : {
                text: '重庆市',
                subtext: '',
                x:'left'
            },
            tooltip : {
                    trigger: 'item',
                    formatter: '{b}',
                    itemSize:'14px'
                },
            legend: {
                orient: 'vertical',
                x:'center',
                data:['重庆市区县']
            },
            dataRange: {
                x: 'left',
                y: 'bottom',
                splitList: [
                    {start: 1500},
                    {start: 900, end: 1500},
                    {start: 310, end: 1000},
                    {start: 200, end: 300},
                    {start: 10, end: 200, label: '10 到 200(火灾数量)'},
                    {start: 5, end: 5, label: '5(火灾数量)', color: 'black'},
                    {end: 10}
                ],
                color: ['#eee', '#949fb1', '#f3ce85']
            },
            series : [
                {
                    name: '重庆市区县',
                    type: 'map',
                    mapType: '重庆',
                    roam: true,
                    itemStyle:{
                        normal:{
                            label:{
                                show:false,
                                textStyle: {
                                   color: "#000"
                                }
                            }
                        },
                        emphasis:{label:{show:true}}
                    },
                    data:[
                        {name: '城口县',value: Math.round(Math.random()*2000)},
                        {name: '开县',value: Math.round(Math.random()*2000)},
                        {name: '巫溪县',value: Math.round(Math.random()*2000)},
                        {name: '云阳县',value: Math.round(Math.random()*2000)},
                        {name: '奉节县',value: Math.round(Math.random()*2000)},
                        {name: '巫山县',value: Math.round(Math.random()*2000)},
                        {name: '万州区',value: Math.round(Math.random()*2000)},
                        {name: '梁平县',value: Math.round(Math.random()*2000)},
                        {name: '忠县',value: Math.round(Math.random()*2000)},
                        {name: '垫江县',value: Math.round(Math.random()*2000)},
                        {name: '石柱土家族自治县',value: Math.round(Math.random()*2000)},
                        {name: '丰都县',value: Math.round(Math.random()*2000)},
                        {name: '长寿区',value: Math.round(Math.random()*2000)},
                        {name: '涪陵区',value: Math.round(Math.random()*2000)},
                        {name: '合川区',value: Math.round(Math.random()*2000)},
                        {name: '潼南县',value: Math.round(Math.random()*2000)},
                        {name: '铜梁县',value: Math.round(Math.random()*2000)},
                        {name: '渝北区',value: Math.round(Math.random()*2000)},
                        {name: '璧山县',value: Math.round(Math.random()*2000)},
                        {name: '沙坪坝县',value: Math.round(Math.random()*2000)},
                        {name: '江北区',value: Math.round(Math.random()*2000)},
                        {name: '大足县',value: Math.round(Math.random()*2000)},
                        {name: '永川区',value: Math.round(Math.random()*2000)},
                        {name: '綦江县',value: Math.round(Math.random()*2000)},
                        {name: '南川区',value: Math.round(Math.random()*2000)},
                        {name: '万盛区',value: Math.round(Math.random()*2000)},
                        {name: '大渡口区',value: Math.round(Math.random()*2000)},
                        {name: '南岸区',value: Math.round(Math.random()*2000)},
                        {name: '武隆县',value: Math.round(Math.random()*2000)},
                        {name: '九龙坡区',value: Math.round(Math.random()*2000)},
                        {name: '荣昌县',value: Math.round(Math.random()*2000)},
                        {name: '秀山土家族苗族自治县',value: Math.round(Math.random()*2000)},
                        {name: '酉阳土家族苗族自治县',value: Math.round(Math.random()*2000)},
                        {name: '彭水苗族土家族自治县',value: Math.round(Math.random()*2000)},
                          {name: '江津区',value: Math.round(Math.random()*2000)},
                        {name: '北碚区',value: Math.round(Math.random()*2000)},
                        {name: '巴南区',value: Math.round(Math.random()*2000)}
                    ]
                }
            ]
        };
    
  • 相关阅读:
    C#多线程编程
    div水平垂直居中方法及优缺点
    Socket网络编程(TCP/IP/端口/类)和实例
    LINQ to SQL语句大全
    SQL Server修改表结构后批量更新所有视图
    SQL Server修改表结构后批量更新所有视图
    SQL Server修改表结构后批量更新所有视图
    开源Asp.Net Core小型社区系统DotNetClub
    CkEditor 4.1.3 + CkFinder 2.4
    文本编辑器-->CKEditor+CKFinder使用与配置
  • 原文地址:https://www.cnblogs.com/yz-blog/p/7490067.html
Copyright © 2011-2022 走看看