• 纯css、js 的H5页面对接echarts


    做项目时,会遇到一些零碎的技术点。记录下来以防忘记

    需求:做可视化界面,但是需要兼容ie8,需要用纯css、js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip)。

    实现方式(此处为一个中央云南地图的实现方法):

    1、定义容器

    // 页面逻辑
    <div class="sp-ynsdt" id="main4"></div>

    2、声明参数

    var myChart4 = echarts.init(document.getElementById('main4'));
    var geoCoordMap = { // 经纬度
        '昆明市': [102.712251, 25.540609],
        '昭通市': [103.717216, 27.336999],
        '曲靖市': [103.797851, 25.501557],
        '楚雄州': [101.546046, 25.041988],
        '玉溪市': [102.543907, 24.350461],
        '红河州': [102.384182, 23.366775],
        '文山州': [104.24401, 23.36951],
        '普洱市': [100.972344, 22.777321],
        '西双版纳州': [100.797941, 22.001724],
        '大理州': [100.225668, 25.589449],
        '保山市': [99.167133, 25.111802],
        '德宏州': [98.578363, 24.436694],
        '丽江市': [100.233026, 26.872108],
        '怒江州': [98.854304, 25.850949],
        '迪庆州': [99.06463, 27.826853],
        '临沧市': [100.08697, 23.886567]
      },
      // 云南省人口数
      rawData = [{
          name: '昆明市',
          value: 335,
          renkou: 100,
          mianji: 300
        },
        {
          name: '玉溪市',
          value: 234,
          renkou: 100,
          mianji: 300
        },
        {
          name: '曲靖市',
          value: 310,
          renkou: 100,
          mianji: 300
        },
        {
          name: '红河州',
          value: 210,
          renkou: 100,
          mianji: 300
        },
        {
          name: '昭通市',
          value: 455,
          renkou: 100,
          mianji: 300
        },
        {
          name: '丽江市',
          value: 153,
          renkou: 100,
          mianji: 300
        },
        {
          name: '楚雄州',
          value: 153,
          renkou: 100,
          mianji: 300
        },
        {
          name: '文山州',
          value: 310,
          renkou: 100,
          mianji: 300
        },
        {
          name: '普洱市',
          value: 210,
          renkou: 100,
          mianji: 300
        },
        {
          name: '西双版纳州',
          value: 234,
          renkou: 100,
          mianji: 300
        },
        {
          name: '大理州',
          value: 135,
          renkou: 100,
          mianji: 300
        },
        {
          name: '保山市',
          value: 310,
          renkou: 100,
          mianji: 300
        },
        {
          name: '德宏州',
          value: 455,
          renkou: 100,
          mianji: 300
        },
        {
          name: '怒江州',
          value: 234,
          renkou: 100,
          mianji: 300
        },
        {
          name: '迪庆州',
          value: 135,
          renkou: 100,
          mianji: 300
        },
        {
          name: '临沧市',
          value: 135,
          renkou: 100,
          mianji: 300
        },
      ]

    3、配置echarts参数样式

    // 打点函数
    function convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(0),
                    renkou: data[i].renkou,
                    mianji: data[i].mianji
                    // value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };
    // 各州市人口面积分布图
    var yunnanoprtion = {
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return params.data.name + '人口:' + params.data.renkou + '万人' + '
    ' + '面积:' + params.data.mianji + '平方千米';
            }
        },
        title: {
            text: '',
            // subtext: '数据来自网络',
            textStyle: {
                color: '#8B4513',
                fontSize: 20, // 标题字体大小
                right: '50%'
            },
        },
        visualMap: {
            show: false,
            min: 0,
            max: 400,
            left: 20,
            bottom: 10,
            text: ['高', '低'], // 文本,默认为数值文本
            color: ['#87cefa', '#e8f630', '#ff4500'],
            calculable: false
        },
        geo: {
            map: '云南',
            roam: true,
            top: '4%',
            zoom: 1.1,
            roam: false,
            aspectScale: 1,
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: 'rgba(0,0,0,0.4)'
                    }
                },
                show: false,
                formatter: function (params) {
                    return params.data.name + '
    ' + '人口:' + params.data.renkou + '人' + '
    ' + '面积:' + params.data.mianji +
                        ' km²';
                },
                textStyle: {
                    top: '-80px',
                    color: '#000040', // 地图区域字体颜色
                    fontSize: 0.1, // 地图区域字体大小
                    opacity: 1, // 地图区域字体透明级别
                    backgroundColor: 'rgba(0,23,11,0)' // 地图区域字体背景颜色 rgba(0,23,11,0)
                }
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis: {
                    areaColor: null,
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        },
        series: [{
            name: '云南',
            type: 'scatter',
            coordinateSystem: 'geo',
            left: 'center',
            top: 'top',
            map: '云南',
            data: convertData(rawData),
            symbolSize: 10,
            // symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
            symbolRotate: 35,
            zoom: 1.3,
            mapLocation: {
                x: 'left'
            },
            // position: ['20%', '60%'],
            // regionHeight: 2,
            top: '4%',
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        textStyle: {
                            color: "#fff",
                            fontSize: 9
                        }
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            label: {
                show: true,
                formatter: function (params) {
                    return params.data.name + '
    ' + '人口:' + params.data.renkou + '人' + '
    ' + '面积:' + params.data.mianji +
                        ' km²';
                },
                textStyle: {
                    top: '-80px',
                    color: '#000040', // 地图区域字体颜色
                    fontSize: 0.1, // 地图区域字体大小
                    opacity: 1, // 地图区域字体透明级别
                    backgroundColor: 'rgba(0,23,11,0)' // 地图区域字体背景颜色 rgba(0,23,11,0)
                }
            },
            light: {
                main: {
                    color: '#eee9e7', // 光照颜色
                    intensity: 1.2, // 光照强度
                    shadowQuality: 'high', // 阴影亮度
                    shadow: true, // 是否显示阴影
                    alpha: 60,
                    beta: 10
                },
                ambient: {
                    intensity: 0.3
                }
            }
        }, {
            name: 'categoryA',
            type: 'map',
            geoIndex: 0,
            // tooltip: {show: false},
            data: rawData
        }]
    };

    4、加载地图

    myChart4.setOption(yunnanoprtion)

    定时器循环显示tooltip

    // 必须要设置tooltip

    var
    index = 0; //播放所在下标 this.mTime = setInterval(function () { myChart4.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index }); index++; if (index >= rawData.length) { index = 0; } }, 600);

    有不同的观点或者实现方式。欢迎在评论区告诉我。

  • 相关阅读:
    网红面试题['1','2','3'].map(parseInt)解析
    微信小程序——评论点赞功能
    微信小程序背景音频播放在6.7.2微信版本兼容
    微信小程序之音频播放
    jquery判断是否为空
    自定义单选按钮
    AJAX防重复提交
    dedecms 开发问题总结及解决方案
    程序员面试被问到“三次握手,四次挥手”怎么办?
    问题:The project cannot be built until build path errors are resolved
  • 原文地址:https://www.cnblogs.com/clwydjgs/p/11412561.html
Copyright © 2020-2023  润新知