关于可视化大屏中使用Echarts

这是我参与更文挑战的第2天，活动详情查看： 更文挑战

接着上一篇文章，接到的需求是在可视化大屏中展示一个全国数据，类似于 某宝做的疫情地图，如下图所示

开始编写代码

首先引入Echarts 官方文当中的 echarts.min.js，其次还需要引入一个 china.js来展示全国所在的地区。一定要注意 引入JS的文件顺序（我这里引入的是老版本的Echarts 刚开始引入的是 5.0版本 后来实际编写过程中有坑） 改用旧版本的 echarts 首先初始化echarts (这里默认只编写js部分)

var myChart = echarts.init(document.getElementById('main'));

var dataList =[]; 这里面放的地区的数据

接下来是实现地图的核心

 `visualMap: {
        min: 0, // 最小值
        max: 3000, // 最大值
        text: ['3000', '0'],
        realtime: false,
        calculable: false,
        inRange: {
            color: ['#8bd4ff', '#0050b3'] // 左边导航条的渐变颜色
        },
        show: true,
        textStyle: {
            color: "#fff"
        }
    },
    geo: {//地理坐标系组件用于地图的绘制
        map: 'china',
        label: {
            normal: {
                show: true,
                fontSize: '12',
                color: '#770000'
            }
        },
        itemStyle: {
            normal: {
                borderWidth: .5, //区域边框宽度
                borderColor: '#1f9bd4', //区域边框颜色
            },
            emphasis: {
                borderWidth: .5, //地图边框的大小
                borderColor: '#000', //边框的颜色
                areaColor: "#fff100",//鼠标选择区域颜色

            }
        },

    },
    series: [//系列列表。（图表）
        {
             name: '图表信息', //地图的名称
            type: 'map',//图表类型
            geoIndex: 0,
            mapType: 'china',
            data: dataList,//图表的数据


            label: {
                normal: {
                    textStyle: {
                        fontSize: 13,
                        fontWeight: 'bold',
                        color: 'red'
                    }
                },
                emphasis: { //对应的鼠标悬浮效果
                    show: true,
                    textStyle: {
                        color: "#000"
                    }
                }
            },

        },


    ]
}`

tooltip: {//提示框组件 formatter: function (params, ticket, callback) {//提示框浮层内容格式器，支持字符串模板和回调函数两种形式。 return params.name + '：' + params.value }//数据格式化 },

    这里我使用的是自定义提示框组件，因为是项目中的需要，但是还可以默认写成
    
    

tooltip: {
            trigger: 'item',
           },
          
          
 在使用过程中 一定要注意 Echarts ，html部分 div的高度一定要注意一下； 
 
 遇见的问题是地图高度与我的div不一致，而且适配性不好 
 还有就是用最新的Echarts 上边在划入地图中不显示数据，这个没有仔细研究。

以上就是我编写可视化大屏的所有内容，如有错误，请及时指教，还有就是为啥最新的Echarts tooltip 出不来
希望知道的同学可以 说一下，一起探讨一下，欢迎讨论哦！