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

最新推荐文章于 2024-05-11 22:23:17 发布

转载最新推荐文章于 2024-05-11 22:23:17 发布 · 617 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/zhongshijun521/article/details/105269073/

javaScript 同时被 2 个专栏收录

3 篇文章

订阅专栏

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>

在这里插入图片描述