echarts 图片添加,注意一定echarts的版本坑了2天

通过ECharts展示宁波各区域空气质量监测站点的数据,根据监测数值不同显示不同图标。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
            #chart{
                width:500px;
                height:500px;
                border:1px solid #999;
            }
        </style>
	</head>
	<body>
        <div id="chart">
        </div>
		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var dataTemp = [
		{
			lng: "121.59874400",
			num: 10,
			time: "2020-03-19 08",
			stationname: "太古小学(鄞州)",
			lat: "29.85970300"
		},
		{
			lng: "121.57025100",
			num: 65,
			time: "2020-03-19 08",
			stationname: "万里学院(鄞州)",
			lat: "29.82393300"
		},
		{
			lng: "121.72304700",
			num: 120,
			time: "2020-03-19 08",
			stationname: "龙赛医院(镇海)",
			lat: "29.96021500"
		},
		{
			lng: "121.84661500",
			num: 165,
			time: "2020-03-19 08",
			stationname: "环保大楼(北仑)",
			lat: "29.91421000"
		},
		{
			lng: "121.57000639",
			num: 230,
			time: "2020-03-19 08",
			stationname: "白沙活动中心(江北)",
			lat: "29.90139717"
		},
		{
			lng: "121.53491900",
			num: 80,
			time: "2020-03-19 08",
			stationname: "市监测中心(海曙)",
			lat: "29.87092600"
		},
		{
			lng: "121.43101500",
			num: 59,
			time: "2020-03-19 08",
			stationname: "城南小学(宁海)",
			lat: "29.29136000"
		},
		{
			lng: "121.28829300",
			num: 270,
			time: "2020-03-19 08",
			stationname: "溪口镇政府(奉化)",
			lat: "29.69543800"
		},
		{
			lng: "121.26432700",
			num: 280,
			time: "2020-03-19 08",
			stationname: "实验小学(慈溪)",
			lat: "30.18224100"
		}
];
                                  
function addImage(url, params, api, realData){
    return  {
        type: 'image',

        style: {
            image: url,
            x: api.coord([
                realData[params.dataIndex].lng, realData[params.dataIndex]
                    .lat
            ])[0],
            y: api.coord([
                realData[params.dataIndex].lng, realData[params.dataIndex].lat
            ])[1],
            width: 20,
            height: 19,
        }
    }
}
var uploadedDataURL = "js/data-1509940365453-SkScnUTCW.json";
var myChart = echarts.init(document.getElementById('chart'));
$.getJSON(uploadedDataURL, function (usaJson) {
    myChart.hideLoading();
    echarts.registerMap('ningbo', usaJson);
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            return params.data.stationname + ' : ' + params.data.num;  
                        }
                    },
                    geo: {
                        show: true,
                        map: "ningbo",
                        roam: true,
                        scaleLimit: {
                            min: 1,
                            max: 10
                        },
                        zoom: 1,
                        aspectScale: 1,
                        top:30,
                        itemStyle: {
                            normal: {
                                borderColor: "rgba(255, 255, 255, 0.5)",
                                areaColor: "rgba(0, 255, 255, 0.5)",
                                borderWidth: 1,
                                shadowBlur: 10,
                                shadowColor: "rgba(63, 218, 255, 0.5)"
                            },
                            emphasis: {
                                show: false,
                                areaColor: "#31d2ff"
                            }
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: "10",
                                color: "#333333"

                            },
                            emphasis: {
                                show: false
                            }
                        }
                    },
                    series: [
                        
                        {
                            name: '地图',
                            type: 'custom',
                            coordinateSystem: 'geo',
                            renderItem: function (params,api) {//具体实现自定义图标的方法
                                if (dataTemp[params.dataIndex].num > 0  &&  dataTemp[params.dataIndex].num <= 50) {
                                    return addImage("img/index2/jcd_1.png", params, api, dataTemp);
                                } else if (dataTemp[params.dataIndex].num > 50  &&  dataTemp[params.dataIndex].num <= 100) {
                                    return addImage("img/index2/jcd_2.png", params, api, dataTemp)
                                } else if (dataTemp[params.dataIndex].num > 100  &&  dataTemp[params.dataIndex].num <= 150) {
                                    return addImage("img/index2/jcd_3.png", params, api, dataTemp)
                                } else if (dataTemp[params.dataIndex].num > 150  &&  dataTemp[params.dataIndex].num <= 200) {
                                    return addImage("img/index2/jcd_4.png", params, api, dataTemp)
                                } else if (dataTemp[params.dataIndex].num > 200  &&  dataTemp[params.dataIndex].num <= 250) {
                                    return addImage("img/index2/jcd_5.png", params, api, dataTemp)
                                } else {
                                    return addImage("img/index2/jcd_6.png", params, api, dataTemp)
                                }
                            },
                            data: dataTemp
                           
                        }
                    ]
                };
                myChart.setOption(option);
});
        </script>
	</body>
	
</html>

在这里插入图片描述

### 如何在 ECharts 中使用地图 API 实现地图可视化 要在 ECharts 中集成地图,可以通过自定义背景图层的方式加载地图的服务。以下是具体方法: #### 1. 地图简介 地图是中国国家地理信息公共服务平台提供的在线地图服务[^3]。它支持多种类型的瓦片地图(如矢量地图、卫星影像等),并通过 RESTful 接口提供访问。 #### 2. 获取地图密钥 要使用地图的服务,需先注册账号并申请 API 密钥。API 密钥用于验证请求合法性,并控制流量配额[^4]。 #### 3. 配置 ECharts 使用地图 通过设置 `geo` 组件的 `mapProperty` 和 `background` 属性,可以将地图作为底图加载到 ECharts 地图中。以下是一个完整的代码示例: ```javascript // 引入 ECharts 库 import * as echarts from 'echarts'; export default { name: 'TianDiTuMap', mounted() { this.initEcharts(); }, methods: { initEcharts() { const chartDom = document.getElementById('tian-di-tu-map'); const myChart = echarts.init(chartDom); // 定义地图 URL 模板 const tdtUrlTemplate = 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=YOUR_API_KEY'; const labelUrlTemplate = 'http://t0.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=YOUR_API_KEY'; const option = { backgroundColor: '#fff', // 设置背景颜色 bmap: {}, // 如果需要百度地图可启用此选项 series: [ { type: 'custom', renderItem: (params, api) => ({ type: 'group', children: [ { type: 'image', style: { image: tdtUrlTemplate, }, }, { type: 'image', style: { image: labelUrlTemplate, }, }, ], }), coordinateSystem: 'bmap', }, ], }; myChart.setOption(option); }, }, }; ``` 注意:上述代码中的 `YOUR_API_KEY` 需替换为你自己的地图 API 密钥[^5]。 #### 4. 自定义样式与交互功能 除了基本的地图显示外,还可以利用 ECharts 提供的功能扩展地图应用: - **标记点**:通过 `series.scatter` 添加散点数据。 - **热力图**:结合 `visualMap` 创建动态热力分布效果。 - **路径动画**:借助 `lines` 类型绘制带方向性的流动轨迹。 以上操作均无需额外依赖库文件即可完成复杂的数据呈现需求[^6]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值