1 2 3 4

纯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 + '万人' + '\n' + '面积:' + 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 + '\n' + '人口:' + params.data.renkou + '人' + '\n' + '面积:' + 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 + '\n' + '人口:' + params.data.renkou + '人' + '\n' + '面积:' + 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);

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

posted @ 2019-08-26 16:00  Dawnzhang  阅读(2647)  评论(0)  编辑  收藏  举报
PV