纯css、js 的H5页面对接echarts

Dawnzhang

发布于 2019-08-27 10:54:01

1.9K0

发布于 2019-08-27 10:54:01

文章被收录于专栏：Dawnzhang的开发者手册Dawnzhang的开发者手册

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

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

实现方式（此处为一个中央云南地图的实现方法）：

1、定义容器

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

2、声明参数

var myChart4 = echarts.init(document.getElementById('main4'));

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
    }]
};