echars基本使用

Java_小小白 Java_小小白 博客等级 墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 300+累计阅读 350平均单平台 已同步平台 优快云 微信公众号 微博 知乎 掘金 百家号 博客园 抖音 小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网 我也要 码龄9年
关注
原创 最新推荐文章于 2026-04-01 04:14:14 发布 350 阅读 AI 写同款· GEO 优化 ›
DNA图谱分析：自动分析DNA图谱中的变异YOLOv5、YOLOv8、YOLOv10 YOLO（You Only Look Once）是一种基于卷积神经网络（CNN）的目标检测模型，因其高效的检测速度和优异的精度而广泛应用于计算机视觉任务。一次性检测：与传统的目标检测方法不同，YOLO通过回归方法同时预测多个边界框和类别信息，从而实现高效的目标检测。高精度与高速度：YOLO在检测精度和速度之间找到了平衡，适用于实时目标检测任务。 阅读详情

话不多说上代码

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/common/core/taglib_omcs.jsp"%>
<script src="${ctx }/common/plugin/echart/echarts.min.js"></script>
<script src="new.js"></script>
<html>
	<head>
	<meta charset="UTF-8">
	<script type="text/javascript">
		$(document).ready(function() {
			initCharts();
		});
	</script>
 </head>
	<body style="background-color:#f7f8fa;">
			<div style="width: 100%; height: 150px;">
				<div style="width: 30%; height: 100%; float: left;">
					<div id="chartA" class="" style="width: 100%; height: 100%"></div>
				</div>
				<div style="width: 25%; height: 100%; float: left;">
					<div id="chartB" class="" style="width: 100%; height: 100%"></div>
				</div>
				<div style="width: 20%; height: 100%; float: left;">
					<div id="chartC" class="" style="width: 100%; height: 100%"></div>
				</div>
				<div style="width: 25%; height: 100%; float: left;">
					<div id="chartD" class="" style="width: 100%; height: 100%"></div>
				</div>
			</div>
			<div style="width: 100%; height: 250px;">
				<div style="width: 33%; height: 100%; float: left;">
					<div id="chartE" class="" style="width: 100%; height: 50%"></div>
					<div id="chartF" class="" style="width: 100%; height: 50%"></div>
				</div>
				<div style="width: 33%; height: 100%; float: left;">
					<div id="chartMap" style="width: 100%; height: 100%"></div>
				</div>
				<div style="width: 33%; height: 100%; float: left;">
					<div id="chartH" class="" style="width: 100%; height: 50%"></div>
					<div id="chartI" class="" style="width: 100%; height: 50%"></div>
				</div>
			</div>
			<div style="width: 100%; height: 150px;">
				<div style="width: 25%; height: 100%; float: left;">
					<div id="chartJ" class="" style="width: 100%; height: 100%"></div>
				</div>
				<div style="width: 25%; height: 100%; float: left;">
					<div id="chartK" class="" style="width: 100%; height: 100%"></div>
				</div>
				<div style="width: 25%; height: 100%; float: left;">
					<div id="chartL" class="" style="width: 100%; height: 100%"></div>
				</div>
				<div style="width: 25%; height: 100%; float: left;">
					<div id="chartM" class="" style="width: 100%; height: 100%"></div>
				</div>
			</div>
	</body>
</html>

new.js

function initWTSYQK(){
	var myChartA = echarts.init(document.getElementById('chartA'));
	myChartA.clear();
	getWTSUQK(myChartA);
}
function initFLZBQK(){
	var myChartA = echarts.init(document.getElementById('chartB'));
	myChartA.clear();
	getFLZBQK(myChartA);
}
function initSYWTLQK(){
	var myChartA = echarts.init(document.getElementById('chartC'));
	myChartA.clear();
	getSYWTLQK(myChartA);
}
function initWTSYHTK(){
	var myChartA = echarts.init(document.getElementById('chartD'));
	myChartA.clear();
	getWTSYHTK(myChartA);
}
function initGSSYWTLQK(){
	var myChartA = echarts.init(document.getElementById('chartE'));
	myChartA.clear();
	getGSSYWTLQK(myChartA);
}
function initGSSYJJLQK(){
	var myChartA = echarts.init(document.getElementById('chartF'));
	myChartA.clear();
	getGSSYJJLQK(myChartA);
}
function initWJJSYWTQK(){
	var myChartA = echarts.init(document.getElementById('chartH'));
	myChartA.clear();
	getWJJSYWTQK(myChartA);
}
function initSYHTKWTLQK(){
	var myChartA = echarts.init(document.getElementById('chartI'));
	myChartA.clear();
	getSYHTKWTLQK(myChartA);
}
function initWTSUXFQQK(){
	var myChartA = echarts.init(document.getElementById('chartJ'));
	myChartA.clear();
	getWTSUXFQQK(myChartA);
}
function initWTSUXFQZB(){
	var myChartA = echarts.init(document.getElementById('chartK'));
	myChartA.clear();
	getWTSUXFQZB(myChartA);
}
function initGSSYWTLXFQQK(){
	var myChartA = echarts.init(document.getElementById('chartL'));
	myChartA.clear();
	getGSSYWTLXFQQK(myChartA);
}
function initWTSUHTKXFQQK(){
	var myChartA = echarts.init(document.getElementById('chartM'));
	myChartA.clear();
	getWTSUHTKXFQQK(myChartA);
}
function initMap(){
	var myChartA = echarts.init(document.getElementById('chartMap'));
	myChartA.clear();
	getMap(myChartA);
}

function initCharts() {
	initWTSYQK();
	initFLZBQK();
	initSYWTLQK();
	initWTSYHTK();
	initGSSYWTLQK();
	initGSSYJJLQK();
	initWJJSYWTQK();
	initSYHTKWTLQK();
	initWTSUXFQQK();
	initWTSUXFQZB();
	initGSSYWTLXFQQK();
	initWTSUHTKXFQQK();
	initMap();
}

function getWTSUQK(myChart){
	var option;
	option = {
		title:{
			text:'2021年1-x月问题溯源情况',
			left:'center',
			textStyle: {
			      fontSize: 12
			    },
			    top: 10,
		},
		color: ['#4f81bd', '#f79646', '#a5a5a5', '#bbbbbb'],
	    tooltip: {},
	    grid: {
	        top: 40,
	        bottom: 30,
	    },
	    legend: {
	    	bottom: 0,
	        itemWidth: 16,
	        itemHeight: 4,
	        itemGap: 6,
	        textStyle: {
	            fontSize: 8
	        },
	        data:['问题量','已解决','未解决','解决率']
	    },
	    xAxis: {
	        data: ["市场类","移动网络质量","家宽网络质量","投标处理质量"],
	        axisLabel: {
	        	margin: 2,
	        	fontSize: 8
	        },
	        axisTick: {
	            show: false
	        }
	    },
	    yAxis: [
	        {
	           show:false
	        },
	        {
	            type: 'value',
	            name: '解决率',
	            min: 0,
	            max: 100,
	            interval: 10,
	            show:false
	        }
	    ],
	    series: [{
	    	barGap: 0,
	        name: '问题量',
	        type: 'bar',
	        data: [188, 429, 530, 4],
	        itemStyle: {
				normal: {
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
							color: 'black',
							fontSize: 8
						}
					}
				}
			},

	    },{
	        name: '已解决',
	        type: 'bar',
	        data: [114, 336, 441, 1],
	        itemStyle: {
				normal: {
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
							color: 'black',
							fontSize: 8
						}
					}
				}
			},
	    },{
	        name: '未解决',
	        type: 'bar',
	        data: [7, 20, 30, 20],
	        itemStyle: {
				normal: {
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
							color: 'black',
							fontSize: 8
						}
					}
				}
			},
	    },
	    {
	        name: '解决率',
	        type: 'line',
	        yAxisIndex: 1,
	        data: [60.6, 78.3, 83.2, 25],
	        itemStyle: {
                normal: {  
                    label: {  
                        show: true,  
                        position: 'top',  
                        formatter: '{c}%',
                        fontSize: 8
                    }  
                }  
            },  

	    }]
	};
	myChart.setOption(option);
}
function getFLZBQK(myChart){
	var option;
	option = {
			title:{
				text:'2021年1-x月溯源问题分类占比情况',
				left:'center',
				textStyle: {
				      fontSize: 12
				    },
				    top: 10,
			},
			color: [ '#ffdc73', '#deebf7', '#5b9bd5','#bfbfbf'],
	    tooltip: {
	        trigger: 'item'
	    },
	    series: [
	        {
	            name: '访问来源',
	            center: ['50%','60%'],
	            type: 'pie',
	            radius: '70%',
	            itemStyle: {
					normal: {
						label: {
							formatter:'{b} : ({d}%)',
							textStyle: {
								fontSize: 8
							}
						}
					}
				},
	            data: [
	                {value: 1048, name: '投诉处理质量'},
	                {value: 735, name: '市场类'},
	                {value: 580, name: '移动网络质量'},
	                {value: 884, name: '家宽网络质量'},
	            ],
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        },
	        
	        
	    ]
	};
	myChart.setOption(option);
}
function getSYWTLQK(myChart){
	var option;
	option = {
			title:{
				text:'超过3个月未解决溯源问题量情况',
				left:'center',
				textStyle: {
				      fontSize: 12
				    },
				    top: 10,
			},
			grid: {
		        top: 40,
		        bottom: 30,
		    },
		tooltip: {},
	    xAxis: {
	        type: 'category',
	        data: ['市场类', '移动网络质量'],
			axisLabel: {
		    	margin: 2,
		    	fontSize: 8
		    },
		    axisTick: {
		        show: false
		    }
	    },
	    yAxis: {
	        show:false
	    },
	    series: [{
	        data: [{
	            value: 66,
	            itemStyle: {
	                color: '#deebf7'
	            }
	        },{
	            value: 15,
	            itemStyle: {
	                color: '#5b9bd5'
	            }
	        }],
	        type: 'bar',
	        barWidth: "40%",
	        itemStyle: {
				normal: {
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						formatter:'{b}:{c}',
						textStyle: { //数值样式
							color: 'black',
							fontSize: 8
						}
					}
				}
			}
	    }]
	};
	myChart.setOption(option);
}
function getWTSYHTK(myChart){
	var option;
	option = {
			title:{
				text:'2021年1-x问题溯源回头看',
				left:'center',
				textStyle: {
				      fontSize: 12
				    },
				    top: 10,
			},
			grid: {
		        top: 40,
		        bottom: 30,
		    },
		    color: [ '#4f81bd', '#f79646'],
	    tooltip: {},
	    legend: {
	        data:['发起量','解决量'],
	        bottom: 0,
	        itemWidth: 16,
	        itemHeight: 4,
	        itemGap: 6,
	        textStyle: {
	            fontSize: 8
	        },
	    },
	    xAxis: {
	        data: ["市场类","移动网络质量","家宽网络质量"],
	        axisLabel: {
	        	margin: 2,
	        	fontSize: 8
	        },
	        axisTick: {
	            show: false
	        }
	    },
	    yAxis: {
	    	show:false
	    },
	    series: [
	    	{
	    	barGap: 0,
	        name: '发起量',
	        type: 'bar',
	        data: [5, 20, 36],
	    itemStyle: {
			normal: {
				label: {
					show: true, //开启显示
					position: 'top', //在上方显示
					textStyle: { //数值样式
						color: 'black',
						fontSize: 8
					}
				}
			}
		},
	    },{
	    	barGap: 0,
	        name: '解决量',
	        type: 'bar',
	        data: [6, 24, 18],
	        itemStyle: {
				normal: {
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
							color: 'black',
							fontSize: 8
						}
					}
				}
			},
	    }]
	};
	myChart.setOption(option);
}
function getGSSYWTLQK(myChart){
	var option;
	option = {
			title:{
				text:'2021年1-x月各市级溯源问题量情况',
				left:'center',
				textStyle: {
				      fontSize: 12
				    },
				    top: 10,
			},
			grid: {
		        top: 40,
		        bottom: 30,
		    },
		    color: [ '#5b9bd5', '#7bb355'],
	    tooltip: {},
	    legend: {
	    	bottom: 0,
	        itemWidth: 16,
	        itemHeight: 4,
	        itemGap: 6,
	        textStyle: {
	            fontSize: 8
	        },
	        data:['2021年1-5月溯源问题量','占比']
	    },
	    xAxis: {
	        data: ["沈阳","大连","鞍山","辽阳","丹东","营口","本溪","广州"],
	        axisLabel: {
	        	margin: 2,
	        	fontSize: 8
	        },
	        axisTick: {
	            show: false
	        }
	    },
	    yAxis: [
	        {
		           show:false
		        },
		        {
		            type: 'value',
		            name: '占比',
		            min: 0,
		            max: 100,
		            interval: 10,
		            show:false
		        }
		    ],
	    series: [{
	        name: '2021年1-5月溯源问题量',
	        type: 'bar',
	        data: [5, 20, 36, 10, 30, 50, 20, 10],
	        itemStyle: {
				normal: {
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
							color: 'black',
							fontSize: 8
						}
					}
				}
			},
	    	
	    },
	    {
	        name: '占比',
	        type: 'line',
	        data: [40, 28, 27, 23, 27, 25, 20, 15],
	        itemStyle: {
                normal: {  
                    label: {  
                        show: true,  
                        position: 'top',  
                        formatter: '{c}%',
                        fontSize: 8
                    }  
                }  
            },
	    }]
	};
	myChart.setOption(option);
}
function getGSSYJJLQK(myChart){
	var option;
	option = {
			title:{
				text:'2021年1-x月各市级溯源解决率情况',
				left:'center',
				textStyle: {
				      fontSize: 12
				    },
				    top: 10,
			},
			grid: {
		        top: 40,
		        bottom: 30,
		    },
		    color: [ '#5b9bd5'],
	    tooltip: {},
	    xAxis: {
	    	data: ["沈阳","大连","鞍山","辽阳","丹东","营口","本溪","广州"],
	    	axisLabel: {
	        	margin: 2,
	        	fontSize: 8
	        },
	        axisTick: {
	            show: false
	        }
	    },
	    yAxis: {
	    	show:false
	    },
	    series: [
	    {
	        name: '占比',
	        type: 'line',
	        data: [80, 70, 66, 72, 70, 75, 66, 82],
	        itemStyle: {
                normal: {  
                    label: {  
                        show: true,  
                        position: 'top',  
                        formatter: '{c}%',
                        fontSize: 8
                    }  
                }  
            },
	    }]
	};
	myChart.setOption(option);
}
function getWJJSYWTQK(myChart){
	var option;
	option = {
			title:{
				text:'各单位超3个月未解决溯源问题情况',
				left:'center',
				textStyle: {
				      fontSize: 12
				    },
				    top: 10,
			},
			grid: {
		        top: 40,
		        bottom: 30,
		    },
		    color: [ '#a6a6a6', '#deebf7', '#5b9bd5','#ffc000'],
			legend: {
		    	bottom: 0,
		        itemWidth: 16,
		        itemHeight: 4,
		        itemGap: 6,
		        textStyle: {
		            fontSize: 8
		        },
		        data:['超6个月','超5个月']
		    },
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'shadow'
	        }
	    },
	    xAxis: [
	        {
	            type: 'category',
	            data: ["沈阳","大连","鞍山","辽阳","丹东","营口","本溪","广州"],
	            axisLabel: {
		        	margin: 2,
		        	fontSize: 8
		        },
		        axisTick: {
		            show: false
		        }
	        }
	    ],
	    yAxis: [
	        {
	            show:false
	        }
	    ],
	    series: [
	        {
	            name: '超6个月',
	            type: 'bar',
	            stack: '广告',
	            emphasis: {
	                focus: 'series'
	            },
	            data: [6, 3, 2, 4, 6, 1, 5, 3]
	        },
	        {
	            name: '超5个月',
	            type: 'bar',
	            stack: '广告',
	            emphasis: {
	                focus: 'series'
	            },
	            data: [7, 7, 8, 2, 1, 4, 4, 5]
	        },
	        {
	            name: '3',
	            type: 'bar',
	            stack: '广告',
	            emphasis: {
	                focus: 'series'
	            },
	            data: [5, 5, 4, 8, 2, 6, 7, 3]
	        },
	        {
	            name: '4',
	            type: 'bar',
	            stack: '广告',
	            emphasis: {
	                focus: 'series'
	            },
	            data: [3, 6, 4, 8, 2, 5, 6, 8]
	        }
	    ]
	};
	myChart.setOption(option);
}







function getSYHTKWTLQK(myChart){	
	var option;
	option = {
			title:{
				text:'2021年1-5月各市溯源回头看问题量情况',
				left:'center',
				textStyle: {
				      fontSize: 12
				    },
				    top: 10,
			},
			grid: {
		        top: 40,
		        bottom: 30,
		    },
		    color: [ '#5b9bd5', '#7bb355'],
	    tooltip: {},
	    legend: {
	    	bottom: 0,
	        itemWidth: 16,
	        itemHeight: 4,
	        itemGap: 6,
	        textStyle: {
	            fontSize: 8
	        },
	        data:['2021年1-5月溯源回头看问题量','占比']
	    },
	    xAxis: {
	        data: ["沈阳","大连","鞍山","辽阳","丹东","营口","本溪","广州"],
	        axisLabel: {
	        	margin: 2,
	        	fontSize: 8
	        },
	        axisTick: {
	            show: false
	        }
	    },
	    yAxis: [
	        {
		           show:false
		        },
		        {
		            type: 'value',
		            name: '占比',
		            min: 0,
		            max: 100,
		            interval: 10,
		            show:false
		        }
		    ],
	    series: [{
	        name: '2021年1-5月溯源回头看问题量',
	        type: 'bar',
	        data: [5, 20, 36, 10, 30, 50, 20, 10],
	        itemStyle: {
				normal: {
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
							color: 'black',
							fontSize: 8
						}
					}
				}
			},
	    	
	    },
	    {
	        name: '占比',
	        type: 'line',
	        data: [40, 28, 27, 23, 27, 25, 20, 15],
	        itemStyle: {
                normal: {  
                    label: {  
                        show: true,  
                        position: 'top',  
                        formatter: '{c}%',
                        fontSize: 8
                    }
                }  
            },
	    }]
	};
	myChart.setOption(option);
}
function getWTSUXFQQK(myChart){
	var option;
	option = {
			title:{
				text:'2021年x+1月问题溯源新发起情况',
				left:'center',
				textStyle: {
				      fontSize: 12
				    },
				    top: 10,
			},
			grid: {
		        top: 40,
		        bottom: 30,
		    },
		    color: [ '#4f81bd'],
		tooltip: {},
	    xAxis: {
	        type: 'category',
	        data: ['市场类', '移动网络质量','家宽网络质量'],
	        axisLabel: {
	        	margin: 2,
	        	fontSize: 8
	        },
	        axisTick: {
	            show: false
	        }
	    },
	    yAxis: {
	        show:false
	    },
	    series: [{
	        data: [3, 39, 144],
	        barWidth: "40%",
	        type: 'bar',
	        itemStyle: {
				normal: {
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
							color: 'black',
							fontSize: 8
						}
					}
				}
			},
	    }]
	};
	myChart.setOption(option);
}




function getWTSUXFQZB(myChart){
	var option;
	option = {
			title:{
				text:'2021年x+1月问题溯源新发起占比',
				left:'center',
				textStyle: {
				      fontSize: 12
				    },
				    top: 10,
			},
			grid: {
		        top: 40,
		        bottom: 30,
		    },
		    color: [ '#ffdc73', '#deebf7', '#5b9bd5','#bfbfbf'],
	    tooltip: {
	        trigger: 'item'
	    },
	    series: [
	        {
	            name: '访问来源',
	            center: ['50%','60%'],
	            type: 'pie',
	            radius: '70%',
	            itemStyle: {
					normal: {
						label: {
							formatter:'{b} : ({d}%)',
							textStyle: {
								fontSize: 8
							}
						}
					}
				},
	            data: [
	                
	                {value: 220, name: '市场类'},
	                {value: 310, name: '移动网络质量'},
	                {value: 10, name: '投诉处理质量'},
	                {value: 460, name: '家宽网络质量'},
	                
	            ],
	            emphasis: {
	                itemStyle: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        },
	        
	        
	    ]
	};
	myChart.setOption(option);
}
function getGSSYWTLXFQQK(myChart){
	var option;
	option = {
			title:{
				text:'2021年x+1月各市溯源问题量新发起情况',
				left:'center',
				textStyle: {
				      fontSize: 12
				    },
				    top: 10,
			},
			grid: {
		        top: 40,
		        bottom: 30,
		    },
		    color: [ '#5b9bd5', '#7bb355'],
	    tooltip: {},
	    xAxis: {
	        data: ["沈阳","大连","鞍山","辽阳","丹东","营口","本溪","广州"],
	        axisLabel: {
	        	margin: 2,
	        	fontSize: 8
	        },
	        axisTick: {
	            show: false
	        }
	    },
	    yAxis: [
	        {
		           show:false
		        },
		        {
		            type: 'value',
		            name: '占比',
		            min: 0,
		            max: 100,
		            interval: 10,
		            show:false
		        }
		    ],
	    series: [{
	        name: '2021年1-5月溯源回头看问题量',
	        type: 'bar',
	        data: [5, 20, 36, 10, 30, 50, 20, 10],
	        itemStyle: {
				normal: {
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
							color: 'black',
							fontSize: 8
						}
					}
				}
			},
	    	
	    },
	    {
	        name: '占比',
	        type: 'line',
	        data: [40, 28, 27, 23, 27, 25, 20, 15],
	        itemStyle: {
                normal: {  
                    label: {  
                        show: true,  
                        position: 'top',  
                        formatter: '{c}%',
                        fontSize: 8
                    }
                }  
            },
	    }]
	};
	myChart.setOption(option);
}
function getWTSUHTKXFQQK(myChart){	
	var option;
	option = {
			title:{
				text:'2021年x+1月问题溯源回头看新发起占比',
				left:'center',
				textStyle: {
				      fontSize: 12
				    },
				    top: 10,
			},
			grid: {
		        top: 40,
		        bottom: 30,
		    },
		    color: [ '#4f81bd'],
		tooltip: {},
	    xAxis: {
	        type: 'category',
	        data: ['市场类', '移动网络质量','家宽网络质量'],
	        axisLabel: {
	        	margin: 2,
	        	fontSize: 8
	        },
	        axisTick: {
	            show: false
	        }
	    },
	    yAxis: {
	        show:false
	    },
	    series: [{
	        data: [3, 39, 144],
	        barWidth: "40%",
	        type: 'bar',
	        itemStyle: {
				normal: {
					label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
							color: 'black',
							fontSize: 8
						}
					}
				}
			},
	    }]
	};
	myChart.setOption(option);
}
function getMap(myChart){
    var geoJson = 自己找对应的Json,下面有例子+网址
	echarts.registerMap('辽宁省', geoJson);
	 option = {
	     series: [{
	         label: {
	             normal: {
	                 show: true,
	             },
	             emphasis: {
	                 show: true
	             }
	         },
	         itemStyle: {
	             color: '#ddb926'
	         },
	         type: 'map',
	         map: '辽宁省',
	         emphasis: {
	             label: {
	                 show: true
	             }
	         },
	         top:0,
	         bottom:0,
	         left:0,
	         right:0,
	         data: [{
	                 name: '沈阳市',
	                 value: 4822023,
	             },
	             {
	                 name: '大连市',
	                 value: 731449
	             },
	             {
	                 name: '鞍山市',
	                 value: 6553255
	             },
	             {
	                 name: '抚顺市',
	                 value: 949131
	             },
	             {
	                 name: '本溪市',
	                 value: 8041430
	             },
	             {
	                 name: '丹东市',
	                 value: 5187582
	             },
	             {
	                 name: '锦州市',
	                 value: 3590347
	             },
	             {
	                 name: '营口市',
	                 value: 917092
	             },
	             {
	                 name: '阜新市',
	                 value: 632323
	             },
	             {
	                 name: '辽阳市',
	                 value: 9317568
	             },
	             {
	                 name: '盘锦市',
	                 value: 9919945
	             },
	             {
	                 name: '铁岭市',
	                 value: 1392313
	             },
	             {
	                 name: '朝阳市',
	                 value: 1595728
	             },
	             {
	                 name: '葫芦岛市',
	                 value: 12875255
	             }
	         ]
	     }],
	 };
	 myChart.setOption(option);
}

事件

myChart.on('click', function (params) {
    alert(params.name);
});

效果图

注:地图那块的Json自己下载

geoJson

网址:http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

 

收录于
echars

当前文章被收录于：

echars
2 篇文章 0 人学习
订阅专栏 查看详情
标签
#echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
visio安装包 Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表，创建专业级图表以简化复杂的信息。 立即下载

相关推荐

使用DeepSeek、MCP和AKShare实现智能金融问答系统技术方案

DeepSeek是由深度求索公司开发的大规模语言模型，最新版本DeepSeek-V3采用混合专家(MoE)架构，拥有671B参数，激活37B参数，在多项基准测试中表现优异3。要使用DeepSeek的API服务：访问DeepSeek平台注册账号获取API Key(形如AKShare是基于Python的金融数据接口库，提供股票、基金、期货、宏观经济等领域的海量数据。主要特点包括：免费开源，数据源丰富支持多种数据格式(DataFrame/JSON)持续更新维护安装命令。

Kin 3174

java——插件echarts数据可视化图表库

插件echarts数据可视化图表库一、使用idea创建javaWeb工程二、下载echarts导入js文件三、使用echarts。————————创作不易，如觉不错，随手三连点赞，收藏，关注，谢谢~~ 一、使用idea创建javaWeb工程 创建工程，因为我这里已经配置好JDK跟Tomcat服务器了，就直接选择了。 下一步 下一步 项目创建完成了只后，我们创建两个文件夹，分别用来存放编译后的文件，跟jar包 接着，我们对着两个包进行配置，首先配置classes，选择classes的位置 下一步，接

weixin_42858422的博客 1万+

Elsevier投稿避坑指南：Ocean Engineering论文格式要求详解（附Checklist模板）

本文详细解析Elsevier旗下期刊Ocean Engineering的投稿格式要求与常见陷阱，提供实用的Checklist模板。涵盖文章类型确认、作者贡献声明、图表规范、数据声明等关键环节，帮助研究者高效通过格式审查。特别强调LaTeX排版细节、图表分辨率要求及现代伦理声明规范，助力海洋工程领域学者顺利投稿。

weixin_33734785的博客 1502

一款基于JAVA开发的Echarts后台生成框架

本文分享一款基于Java开发的Echarts后台生成框架，支持自动生成Echarts的参数，通过生成Echarts饼图和折线图的实例化生成，让大家熟悉常见的开发方式，同时分析了官网示例存在的问题以及解决方案，希望对使用的朋友有所帮助。

夜郎King的博客 1万+

VS2022+Qt6保姆级配置指南：从插件安装到项目互通全流程（附常见错误解决）

本文提供了一份详细的Visual Studio 2022与Qt6集成开发环境配置指南。从插件安装、环境搭建到项目创建与互通，涵盖了全流程操作步骤，并针对常见的配置错误和调试问题提供了实用的解决方案，帮助开发者高效构建企业级桌面应用。

nginx7reverse的博客 1208

ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: NO)解决办法

问题：ERROR 1045 (28000): Access denied for user ‘root’@‘localhost’ (using password: NO) 很久没用这台电脑的mysql了，今天需要连接数据库，启动数据库报错： ERROR 1045 (28000): Access denied for user ‘root’@‘localhost’ (using password: NO) 解决方法： 查阅资料后知道了，应该使用已知的用户名和密码登陆 mysql -u root -p 然而密

一个超会写Bug的程序猿的博客 43万+

Java生成Echarts表图的两种方案

Java生成Echarts图表

可乐的博客 8772

C#实现不占用串口的串口监听与侦听技术：高效监控串口数据的最佳实践

本文详细介绍了如何实现不占用串口的串口监听与侦听技术，解决了传统串口监听可能带来的串口占用问题。通过使用虚拟串口、外部监听工具或第三方库，我们可以高效地实现串口数据的捕获与处理，适用于各种工业控制、物联网和嵌入式开发的应用场景。

这里只有干货：从 Modbus 通信到 MES 对接，从 YOLO 训练到工控机部署，带你搞定工业软件开发全流程。 1677

java Echarts的实战（Echarts图表数据封装）

java Echarts的实战，对Echarts图表数据进行封装返回，建议先看看官网： echarts官网 一 导包 <!-- https://mvnrepository.com/artifact/com.github.abel533/ECharts --> <dependency> <groupId>com.github.abel533</groupId> <artifactId>ECharts</artifac

weixin_42444325的博客 5516

2022李宏毅作业hw1—新冠阳性人员数量预测。

从非常基础的内容开始，主要是我的水平也很基础。

YI_SHU_JIA的博客 1万+

DevExpress中使用BandGridView实现复合（多行）表头、设置多行表头背景颜色、表格边框颜色

一、实现效果 二、 实现方法 2.1、创建复合表头 ①将创建的GridControl下的GirdView1转化为BandGridView类型； ②创建需要展示的列（指定列的名称【Name】、描述【caption】、数据字段名称【FieldName】） ③绑定列实现复合表头。 注意：如果复合表头有多行，则需要设置新增Band的Row Count，然后设置【Band properties下的AutoFillDown=false】 详细操作如下： 注意：如果要隐藏表格的设计字段内容，则需.

提供C#相关开发 、云计算、运维测试、网络安全相关技术分享与服务，有意向可联系。 2895

echarts入门教程（超级详细带案例）

1.echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。 2.学习一项技术的关键，还是需要多读官方文档，官网链接Apache ECharts,与之类似的图表库还有D3，HeightCharts。 3.echarts的下载 （1）从 npm 获取 （2）从 CDN 获取 （3）从 GitHub 获取 （2）color调色盘 在 option 中设

m0_55734030的博客 12万+

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。，新界面，新视觉，

echars学习

var option = { dataset: { source: [ ['score', 'amount', 'product'], [89.3, 58212, 'Matcha Latte'], [57.1, 78254, 'Milk Tea'], [74.4, 41032, ...

qq_28353055的博客 201

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

VC中sqlite的使用

在VC中对sqlite的使用，实现数据库大批数据的快速插入，读取数据库中的数据在ListCtrl中显示

Echars横向柱状图，xAxis名称过长的情况下可以使用

Echars横向柱状图，xAxis过长导致图形挤压变形,由于有时候一些莫名其妙的情况导致echars02的那个xAxis显示不出来的情况，所以准备了echars01，是由官网案例直接改造的，以下内容，仅供参考~ 效果图一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Echars横向柱状图</title> <style type="text/

一念执着 817

echars、象棋、飞机大战、五子棋

echars的基础引入以及使用 <template> <div> <div id="main" style="width:500px; height:500px"></div> </div> </template> <script> import * as echarts from 'echarts' export default { mounted(){ //

weixin_45608302的博客 379

Echars oracle PL/SQL查询练习

--echars饼图查询 Select  * from defect_genetic_analysis Where  s.orgNo like decode( &amp;orgNo,’41101’,’41’,&amp;orgNo) || ‘%’ And s.naturetime between to_date(&amp;starttime, ‘yyyy-mm-dd  hh24:mi:ss’)...

godflowers的博客 319

vue常用图标框架echars

专注于图表的框架 链接地址：echars

weixin_45669184的博客 441

eChars实现哈尔滨市区县地图展示

eChars实现哈尔滨市区县地图展示 本次写的内容是关于eChars实现自定义地图的有关话题，虽然很多人都对eChars如何实现自定义地图进行过技术问答，但由于eChars官网对ECharts 之前提供下载的矢量地图数据来自第三方在线生成GeoJSon数据的关闭，使的我们生成GeoJSon数据变得困难，我尝试过使用工具自定义生成geoJSon geoJSon地图数据包地址：http://

u011688281的博客 2793

vue3 封装echars

【代码】vue3 封装echars。

qq_28443927的博客 157

数据可视化-Echars

之前数据可视化工具用的是zepplin，功能强大但也伴随着各种问题 内存溢出；每个notebook都会启动一个后台进程，内存消耗巨大，用户多了，时不时就会卡死，导致需要重启服务端 改造升级困难，很多功能用不上且冗余，而且工具略显笨重 数据可视化功能有限 虽然有很多问题，但zepplin不失为一个优秀的可视化工具；在项目早期，简单便捷的部署，给我们减少了不少的工作量；但如果只是为了数据可视化，没...

帆了个帆的专栏 4146

Echars基本使用方法

Echars使用方法（部分）

~Up~ 1435

echars

m0_46069861的博客 142

帆软report结合echars 制作引力关系图

项目的核心展现工具是帆软report 10，但是帆软的关系图，比较粗糙，所以想把echars 中的引力关系图和帆软报表结合。

huang851124gz的博客 789

echars-大数据展示框架-个人理解

echars个人理解，类似js+jquery+json+html，已经做好的框架，用来展现大数据 官网中，操作简单，实例多 echars官网：https://echarts.baidu.com/

ddbbff2005的博客 2019

echars的使用

echars的简单使用

wyzdeng的博客 1397

echars刻度线和标签对齐

类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐。如下图： xAxis: { type: 'category', axisTick:{ //在设置boundaryGap 为 true的前提下，设置alignWithLabel使刻度线和标签对齐 alignWithLabel:true }, data: ['19-06-05', '19-06-06', '19-06-07',

honeymoon_的博客 5201

vue中使用echars

（1）下载echarts 你可以通过以下几种方式获取 ECharts。 从官网下载界面选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载完整版本。开发环境建议下载源代码版本，包含了常见的错误提示和警告。 在 ECharts 的 GitHub 上下载最新的 release 版本，解压出来的文件夹里的 dist 目录里可...

qq_37055675的博客 387
上一篇： 狂神说linux
下一篇： Bootstraptable之事件 “坑“
点赞 0
评论 0
书签 书签 1
Java_小小白
Java_小小白
博客等级 码龄9年 10粉丝 22原创
+ 关注 专栏目录 订阅专栏
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值