echarts各种问题汇总
禁止地图缩放
geo 属性:roam: false
地图重叠
series属性：geoIndex: 0
地图案例
<script>
export default {
render: function(createElement) {
return createElement("div", {
attrs: {
id: "main",
},
style: {
height: "450px",
width:'600px',
margin: 'auto'
},
});
},
data() {
return {
dataList: [
{ name: "南海诸岛" },
{ ename: "beijing", name: "北京"},
{ ename: "tianjin", name: "天津" },
{ ename: "shanghai", name: "上海" },
{ ename: "chongqing", name: "重庆" },
{ ename: "hebei", name: "河北" },
{ ename: "henan", name: "河南"},
{ ename: "yunnan", name: "云南" },
{ ename: "liaoning", name: "辽宁" },
{ ename: "heilongjiang", name: "黑龙江" },
{ ename: "hunan", name: "湖南"},
{ ename: "anhui", name: "安徽" },
{ ename: "shandong", name: "山东" },
{ ename: "xinjiang", name: "新疆" },
{ ename: "jiangsu", name: "江苏" },
{ ename: "zhejiang", name: "浙江" },
{ ename: "jiangxi", name: "江西" },
{ ename: "hubei", name: "湖北" },
{ ename: "guangxi", name: "广西"},
{ ename: "gansu", name: "甘肃" },
{ ename: "shanxi", name: "山西" },
{ ename: "neimenggu", name: "内蒙古" },
{ ename: "shanxi1", name: "陕西" },
{ ename: "jilin", name: "吉林" },
{ ename: "fujian", name: "福建" },
{ ename: "guizhou", name: "贵州" },
{ ename: "guangdong", name: "广东" },
{ ename: "qinghai", name: "青海" },
{ ename: "xizang", name: "西藏" },
{ ename: "sichuan", name: "四川" },
{ ename: "ningxia", name: "宁夏" },
{ ename: "hainan", name: "海南" },
{ name: "台湾"},
{ ename: "xianggang", name: "香港" },
{ ename: "aomen", name: "澳门" },
],
};
},
methods: {
initEchart() {
let dataList = this.dataList;
for(let i = 0; i < dataList.length; i++){
dataList[i].value = Math.ceil(Math.random() * 1000 - 1);
}
const _this = this;
var myChart = echarts.init(document.getElementById("main"));
var option = {
tooltip: {
//数据格式化
formatter: function(params, callback) {
return (
params.seriesName + "<br />" + params.name + "：" + params.value
);
},
},
visualMap: {
min: 0,
max: 1000,
left: "left",
top: "bottom",
text: ["高", "低"], //取值范围的文字
inRange: {
color: ["#e0ffff", "blue"], //取值范围的颜色
},
show: true, //图注
},
geo: {
map: "china", //引入地图数据
roam: false, //不开启缩放和平移
zoom: 1, //视角缩放比例
label: {
normal: {
show: true,
fontSize: "10",
color: "rgba(0,0,0,0.7)",
},
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: { //高亮的显示设置
areaColor: "skyblue", //鼠标选择区域颜色
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
// 鼠标悬浮提示框
series: [
{
name: "省份",
type: "map",
geoIndex: 0,
data: this.dataList,
},
],
};
myChart.setOption(option);
myChart.on("click", function(params) {
if(!params.data.ename){
alert('暂无' + params.name + '地图数据');
return;
}
_this.$router.push({
path: "/province",
query: { provinceName: params.data.ename, province: params.name },
});
});
},
},
mounted() {
this.initEchart();
},
};
</script>一、作品简介
作品以一级保护动物为例，介绍了其一级物种的个数及名称，并将一些濒危保护动物的境内分布列举了出来，以及与历年数量变化进行了对比，以此来说明保护动物刻不容缓。
二、技术使用
使用前端三组件以及echarts开源项目，结合高德地图api及数据库整理。
三、最终奖项
2023年计算机设计大赛信息可视化设计-数据可视化省二等级
四、项目背景
由于人类的破坏，与栖息地的丧失等因素，地球上濒临灭绝生物的比例正在以惊人的速度增长。在工业社会以前，鸟类平均每300年灭绝一种，兽类平均每8000年灭绝一种；但是自从工业社会以来，地球物种灭绝的速度已经超出自然灭绝率的1000倍。全世界1/8的植物，1/4的哺乳动物，1/9的鸟类，1/5的爬行动物，1/4的两栖动物，1/3的鱼类，都濒临灭绝。所以保护动物刻不容缓，全世界都在号召保护动物。动物保护的核心内容是禁止虐待、残害任何动物，禁止猎杀和捕食野生动物
五、项目结构
六、作品展示
主页
物种树图
珍惜动物分布
各项数据
云词政策
七、未来改进
- 对于内容：我们只添加了一级保护动物的种类统计了其个别数量，在次基础上可以我们继续制作二级保护动物的种类以及数量，结合一级保护动物数据，制作出丰富的内容。
- 对于技术，爬虫技术利用较少，今后将会利用爬虫数据进行数据收集，丰富我们的云图版块，获取更多的动物保护相关的数据，利用更多JavaScript技术，添加更多的动态效果，使得界面更加整洁美观。
- 未采用数据库：对于庞大数据量以及不一致性要在后续进行核实，对数据进行筛选，所以在后续可能会添加。
八、作品答辩
答辩视频
答辩台词
各位老师，大家好，下面由我来介绍我们的作品，动物保护数据可视化。作品分为四个部分，作品简介，作品设计，作品展示以及未来的改进。
首先是我们的作品简介，我们作品的背景是由于人类的破坏以及栖息地的丧失等因素，导致了地球灭绝速度已经超过自然灭绝速度的1000倍，所以保护动物刻不容缓，全世界都在号召保护动物。
然后呢我们的作品是以一级保护动为例，介绍了一级物种的个数及名称并将一些濒危保护动物的境内分布列举了出来以及与历年数量变化进行的对比以此来说明保护动物刻不容缓。
然后是我们的作品设计。这是我们的作品的结构，各位老师可以看一下。我们主要使用了前端的原生的三组件，然后在物种的分布上调用了高德地图的API。
下面是我们作品的展示。
我们的首页使用了两个野生动物的视频作为背景，介绍了项目简介以及数据来源。
然后第二页使用了一个树形图，并统计出了脊索动物门下的所有纲类，纲类下的目类，以及目类下的所有的物种及其数量。
第三页我们选取了十个具有代表性的动物，对他们的分布以及简介进行了汇总，比如川金丝猴，丹顶鹤的以及麋鹿的数据。
第四页是我们统计的全国信息，首先对一级保护动物，二级保护动物的种类进行了统计。其次，汇总了各省自然保护区数量，从而得出了如下的自然保护区数量分布图，比如说广东的有384个自然保护区。然后又统计了1956年第一个自然保护区建立开始的60年间，中国保护区数量的变化，从中选取了五个典型的自然保护区，对里面的物种进行了统计，又从中选取了的五个珍惜物种进行了数量统计，其中我国扬子鳄人工繁殖技术取得了重大突破，所以我们又统计了二十多年来，人工扬子鳄与野生扬子鳄的数量变化。根据野生保护名录中的二级法，划分为的一级保护动物，二级保护动物，三有动物，进而统计了部分年份的数量，并做成了一个环图进行对比。然后又根据野生动物保护名录中的等级法，将物种划分成了近危，易危，濒危，极危和已灭绝，对他们的数量进行了统计，并做出了环形柱状图。
又以物种较为丰富的是四川省为例，统计了四川省各类野生动物的数量，并根据物种种类进行划分，从而得出了各类物种的占比。从中选取了三个典型的物种，以折线图的形式展现了20年间物种数量的变化趋势，又以柱状图的形式展现了三个物种间数量的对比。又根据三个物种在四川省内各个保护区的数量分布，制作成了这张物种数量分布表。是的，又选取了三个保护区，统计了其20年间野生动物种类，数量的变化，得出了折线图以及柱状图。
第五页是我们的云词政策，左边是云词组成的弹幕，右边是相关政策法规，每个政策法规都有相对应的超链接，点进去可以查看具体的政策法规。
我的演讲到此结束，谢谢各位评委老师！
效果
原理
在yAxis的axisLabel中使用formatter和rich进行设置实现
代码
<div class="chart" ref="chart" id="chart"></div>const chart =ref(null)
const initChart = () => {
const chart = echarts.init(chart4.value)
try {
const res = {
code: 200,
employmentCity: [
{ name: '广州市', value: 1245 },
{ name: '深圳市', value: 1178 },
{ name: '珠海市', value: 1012 },
{ name: '东莞市', value: 928 },
{ name: '佛山市', value: 889 },
{ name: '汕头市', value: 772 }
]
}
if (Number(res.code) == 200) {
const chartData = res.employmentCity.sort((a, b) => b.value - a.value)
chart.setOption({
title: {
text: '就业城市TOP6',
left: 'center',
textStyle: {
color: '#fff',
fontSize: 16
}
},
tooltip: {
borderWidth: 0,
trigger: 'axis',
axisPointer: { type: 'shadow' },
backgroundColor: 'rgba(0,0,0,0.5)',
border: 0,
textStyle: {
color: '#fff'
}
},
grid: {
left: '25%',
right: '15%',
bottom: '3%',
top: '15%',
containLabel: false
},
xAxis: {
type: 'value',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
yAxis: [
{
type: 'category',
inverse: true,
data: chartData.map((item) => item.name),
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
show: true,
fontSize: 11,
color: '#fff',
rich: {
a1: {
color: '#fff',
backgroundColor: '#EA2739',
width: 18,
height: 18,
align: 'center',
borderRadius: 4
},
a2: {
color: '#fff',
backgroundColor: '#FF8C40',
width: 18,
height: 18,
align: 'center',
borderRadius: 4
},
a3: {
color: '#fff',
backgroundColor: '#FFC600',
width: 18,
height: 18,
align: 'center',
borderRadius: 4
},
a4: {
color: '#fff',
backgroundColor: '#3C7DF9',
width: 18,
height: 18,
align: 'center',
borderRadius: 4
}
},
formatter: (params, index) => {
let result
if (index == 0) {
result = `{a1|${index + 1}}${' '.repeat(2)}${params}`
} else if (index == 1) {
result = `{a2|${index + 1}}${' '.repeat(2)}${params}`
} else if (index == 2) {
result = `{a3|${index + 1}}${' '.repeat(2)}${params}`
} else {
result = `{a4|${index + 1}}${' '.repeat(2)}${params}`
}
return result
}
}
},
{
type: 'category',
inverse: true,
data: chartData.map((item) => item.value),
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#fff',
fontSize: '12'
},
formatter: (value) => {
if (value) {
value = (value * 1).toLocaleString()
}
return value
}
}
}
],
series: [
{
name: '就业人数',
type: 'bar',
barWidth: '30%',
data: chartData.map((item) => ({
value: item.value,
itemStyle: {
borderRadius: [12, 12, 12, 12]
}
})),
itemStyle: {
borderRadius: [12, 12, 12, 12]
},
label: {
show: false,
position: 'right',
formatter: (params) => {
return params.value.value
},
fontSize: 11,
color: '#fff',
offset: [0, 0],
align: 'left',
width: 30
},
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)',
borderRadius: [12, 12, 12, 12]
}
}
],
emphasis: {
focus: 'series'
}
})
}
} catch (error) {
console.log('初始化失败', error)
}
}
onMounted(()={
initChart()
})#chart14 {
width: 100%;
height: 100%;
min-height: 200px; // 确保最小高度
@media (max-width: 768px) {
min-height: 250px;
}
}