最近在学习web搞大屏看板

人到中年,delphi发展越来越不行,就业环境是真差啊,没办法,学呗

中国地图:

  // 中国地图
         function getChinaMapChart() {
    // 初始化echarts实例
     var myEcharts = echarts.init(document.getElementById("china_box"));
     var option = {
         geo: {
             map: 'china',
             label: {
                 normal: {
                     show: false, //显示省份标签
                 },
                 emphasis: { //对应的鼠标悬浮效果
                     show: false,
                     textStyle: {
                         color: "#fff"
                     }
                 }
             },
             roam: false,//是否开启鼠标缩放和平移漫游
             itemStyle: {//地图区域的多边形 图形样式
                 normal: {//是图形在默认状态下的样式
                     borderWidth: .5, //区域边框宽度
                     borderColor: '#fff', //区域边框颜色
                     areaColor: "#3EABFF", //区域颜色
                 },
                 emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                     borderWidth: .5,
                     borderColor: '#fff',
                     areaColor: "#11D163",
                     label: { show: true }
                 }
             },
             aspectScale: 0.75,
             zoom: 1.2,//地图缩放比例,默认为1

         },
         title: {  //标题样式
             text: '',
             x: "center",
             textStyle: {
                 fontSize: 18,
                 color: "#fff"
             },
         },
         tooltip: {  //这里设置提示框
             show: false,
             trigger: 'item',  //数据项图形触发
             backgroundColor: "#fff",  //提示框浮层的背景颜色。
         },
         visualMap: {//视觉映射组件
             show: false,
             top: 'center',
             left: 'left',
             min: 10,
             max: 500000,
             text: ['High', 'Low'],
             realtime: false,  //拖拽时,是否实时更新
             calculable: true,  //是否显示拖拽用的手柄
             inRange: {
                 color: ['#DAF117', 'yellow', '#115FE4'],  //散点颜色变换
                 symbolSize: [10, 100] // 数据最小映射到 10,最大映射到 30
             }
         },
         series: [
             {
                 name: '',
                 type: 'effectScatter', // series图表类型
                 coordinateSystem: 'geo', // series坐标系类型
                 symbolSize: function (val) {//设置散点大小
                     return val[2] / (val[2] / 12)
                 },
                 data: [
                //     {
                //      name: '北京',    // 数据项名称,在这里指地区名称
                //      value: [        // 数据项值
                //          116.46,     // 地理坐标,经度
                //          39.92,      // 地理坐标,纬度
                //          340         // 北京地区的数值
                //      ],
                //      tooltip: {
                //          show: true,
                //          trigger: 'item',  //数据项图形触发
                //          backgroundColor: "#fff",  //提示框浮层的背景颜色。
                //          borderColor: 'rgba(0,0,0,0)',
                //          formatter: function (params) {
                //              //return 'Top1<br><br>{b}:' + params,
                //          },

                //      },
                //      itemStyle: {
                //          normal: {
                //              color: '#11D163',
                //          }
                //      },
                //      label: {
                //          normal: {
                //              show: true, //显示省份标签
                //              position: 'right',
                //              textStyle: {
                //                  color: "#E61870",//标签字体颜色
                //              },
                //              formatter: '{b}'
                //          },
                //      },
                //      rippleEffect: {//涟漪特效相关配置
                //          brushType: 'stroke',//波纹的绘制方式,可选 'stroke' 和 'fill'

                //      },
                //  }, 
                 { name: '广州', value: [113.28,23.12, 90] ,label: {
                         normal: {
                             show: false, //显示省份标签
                             position: 'right',
                             textStyle: {
                                 color: "#E61870",//标签字体颜色
                             },
                             formatter: '{b}'
                         },
                     },},

                 ]
             }
         ]
     };
     // 使用刚指定的配置项和数据显示图表。
     myEcharts.setOption(option);
 }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑贝是条狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值