zoukankan      html  css  js  c++  java
  • 使用echarts在地图中使用dispatchAction

    注意事项

    1、必须使用goe渲染地图
    2、同一个option只能存在一个series参数
    3、tooltip提示框默认跟随series参数展示
    4、通过地图区域的鼠标悬停事件,用dispatchAction触发城市锚点scatter对应的tooltip
    5、dispatchAction的seriesIndex必须加上

    代码如下

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <script src="../echarts-4.8.0/package/dist/echarts.js"></script>
    <script src="./黔西南布依族苗族自治州.js"></script>
    </head>
    <body>
    <div id="map" style=" 500px;height: 500px;margin: 0 auto"></div>
    
    <script type="text/javascript">
    // 城市的坐标
    // yoy : year on year 同比
    // mom: month on month 环比
    const scatterData = [
    {
    name: '兴义市',
    value: [104.897982, 25.088599],
    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
    },
    {
    name: '安龙县',
    value: [105.471498, 25.108959],
    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
    },
    {
    name: '兴仁市',
    value: [105.192778, 25.431378],
    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
    },
    {
    name: '普安县',
    value: [104.955347, 25.786404],
    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
    },
    {
    name: '晴隆县',
    value: [105.218773, 25.832881],
    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
    },
    {
    name: '贞丰县',
    value: [105.650133, 25.385752],
    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
    },
    {
    name: '望谟县',
    value: [106.091563, 25.166667],
    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
    },
    {
    name: '册亨县',
    value: [105.81241, 24.983338],
    typeList: [{ type: '数据', yoy: '14.8', mom: '-12.8' }],
    },
    ];
    
    const option = {
    title: {
    text: '黔西南州',
    subtext: '兴义市',
    left: 'center',
    },
    tooltip: {
    backgroundColor: '#fff',
    trigger: 'item',
    alwaysShowContent: true,
    triggerOn: 'mousemove' ,
    formatter: function(params) {
    let htmlStr = '';
    params.data.typeList.forEach(item => {
    // 判断数值升降
    let colorSpan = number => {
    let color = number > 0 ? '#00cc99' : '#ff0000';
    return `<span style="color: ${color}">${number}%</span>`;
    };
    htmlStr += `
    <div>
    ${item.type}:同比 ${colorSpan(item.yoy)} 环比 ${colorSpan(item.mom)}
    </div>
    `;
    });
    
    return `<div style=" 300px; height: 100px; border-radius: 5px; color: #000; font-weight: 600;">
    ${htmlStr}
    </div>`;
    },
    },
    geo: {
    map: '黔西南州',
    roam: false,
    zoom: 1.2,
    itemStyle: {
    normal: {
    borderWidth: 2,
    borderColor: '#0090fe', //边框颜色
    areaColor: '#003399', //地图区域颜色
    },
    emphasis: {
    show: 'true',
    borderWidth: 4,
    borderColor: '#b2163c', //边框颜色
    areaColor: '#531f67', //鼠标移上去的颜色
    },
    },
    label: {
    normal: {
    color: '#fff',
    fontWeight: 'bold',
    show: true,
    },
    emphasis: {
    color: '#fff',
    fontWeight: 'bold',
    show: true,
    },
    },
    },
    series:[
    {
    type: 'scatter',
    coordinateSystem: 'geo',
    symbol: 'circle' ,
    symbolSize: 10 ,
    color: "#00cc99",
    data: scatterData
    }
    ]
    };
    
    echarts.registerMap("黔西南州", jsonGeo);
    let myChart = echarts.init(document.getElementById('map'));
    myChart.setOption(option);
    
    myChart.on('mouseover' , (params)=>{
    myChart.dispatchAction({
    type:'showTip',//默认显示江苏的提示框
    seriesIndex: 0,//这行不能省
    name: params.name
    });
    })
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    CentOS7设置tomcat开机自启动
    MySQL复制表结构和表数据
    SpEL表达式总结
    Flink快速入门
    Flink架构、原理与部署测试
    第十一篇:Spark SQL 源码分析之 External DataSource外部数据源
    第十篇:Spark SQL 源码分析之 In-Memory Columnar Storage源码分析之 query
    第九篇:Spark SQL 源码分析之 In-Memory Columnar Storage源码分析之 cache table
    第八篇:Spark SQL Catalyst源码分析之UDF
    第七篇:Spark SQL 源码分析之Physical Plan 到 RDD的具体实现
  • 原文地址:https://www.cnblogs.com/onesea/p/15392009.html
Copyright © 2011-2022 走看看