大屏数据展示
中间地图背景酷炫效果实现
样式文件 main.css：通过无限反向循环旋转两个背景图，达到如下酷炫效果
.centerImg{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.img1{
animation:img1 20s linear infinite;
}
@keyframes img1{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
.img2{
animation:img2 5s linear infinite;
opacity: 0.5;
}
@keyframes img2{
0%{transform:rotate(360deg);}
100%{transform:rotate(0deg);}
}
html文件
<div class="center-cont">
<!--背景图-->
<div class="centerImg">
<!--网格点-->
<img class="img1" src="./images/lbx.png" alt="">
</div>
<div class="centerImg">
<!--流光-->
<img class="img2" src="./images/jt.png" alt="">
</div>
<!--地图容器-->
<div id="chartC"></div>
</div>
中间地图点位的移动
- 首屏直接渲染已经默认配置好的图表 ——> chart.setOption(option)
- 模拟获取后台数据，获得数据后再次 ——> chart.setOption(option)，添加新的配置
- 数据动画效果，设置定时器，索引加一后在视图中依次高亮
<script>
/*chartC - echarts地图*/
{
const chart = echarts.init(document.getElementById('chartC'), 'chalk');
/*配置项*/
const option = {
/*
* title 标题
* text 主标题，如'西虹市不同地区的平均收入'
* textStyle 主题样式
* left 左对齐方式
* top 上边距，如12
* */
title: {
text: '西虹市不同地区的平均收入',
textStyle: {
fontSize: 24
},
left: 'center',
top: 32,
},
/*
* tooltip 提示
* backgroundColor 背景色，如'rgba(2,177,236,0.6)'
* */
tooltip: {},
/*
*地理坐标系组件 geo
* map 地图名称，如'china'
* zoom 缩放比例，如1
* roam 是否开启鼠标缩放和平移漫游
* scale 缩放
* move 平移
* true 都开启
* itemStyle 地图区样式
* areaColor 地图区域的颜色，如 rgba(0,29,132,0.8)
* borderColor 图形的描边颜色，如 #02c0ff
* emphasis 高亮状态下的多边形和标签样式
* itemStyle {} 项目样式
* shadowColor 投影颜色
*
* */
geo: {
map: 'china',
itemStyle: {
areaColor: 'rgba(0,29,132,0.8)',
borderColor: '#02c0ff'
},
emphasis: {
itemStyle: {
shadowColor: '#000',
shadowOffsetY: 20,
shadowBlur: 20
}
}
},
/*
* series系列集合
* name 名称，如'旅游人数'
* type 图表类型
* scatter 散点图
* coordinateSystem 坐标类型，如'geo'
* data 数据
* symbolSize 散点大小,可为函数(p)=>{return p[2]}
* encode 编码映射
* x x坐标系的维度映射，如'收入'
* y y坐标系的维度映射，如'年龄'
* tooltip 提示映射，如[0, 1, 2, 3, 4]
* itemStyle 项目样式
* color 项目颜色，如'rgba(255,255,255,0.6)'
* emphasis 高亮状态
* itemStyle 项目样式
* color 颜色，如'yellow'
* */
series: {
id: 'scatter',
type: 'scatter',
coordinateSystem: 'geo',
symbolSize: (param) => {
return param[2] / 15
},
emphasis: {
itemStyle: {
color: 'yellow'
},
}
}
};
chart.setOption(option);
fetch('./lib/income.json')
.then((res) => res.json())
.then(data => {
dataLen = data.length
chart.setOption({
series: [{
id: 'scatter',
data
}]
})
setInterval(anim, 1000);
});
let curInd = 0;
let dataLen = null;
function anim() {
/*取消之前高亮的图形
* type 触发的行为类型，见action
* seriesIndex 系列索引，用于寻找系列列表中的某个系列
* dataIndex 数据所有，用于寻找系列中的某个元素
* */
chart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: curInd
});
/*当前索引递增，不能超过系列元素的总数*/
curInd = (curInd + 1) % dataLen;
/*高亮当前图形*/
chart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: curInd
});
/*显示 tooltip*/
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: curInd
});
}
}
</script>
右侧最后一栏的地图添加可控组件
通过代码获取百度地图的实例，得到可操控的地图
chart.getModel().getComponent('bmap').getBMap()
<script>
{
const chart = echarts.init(document.getElementById('chartR3'), 'chalk');
const center = [121.48, 31.22]
const option = {
/*
* title 标题
* text 主标题，如'西虹市在哪里'
* left 左对齐方式
* top 上边距，如12
* */
title: {
text: '西虹市的空气质量',
left: 'center',
top: 12,
},
/*
* bmap 百度地图
* center[经度,纬度] 地图中心点位，如[121.48, 31.22]
* zoom 缩放级别，如6
* roam 是否可以拖拽缩放
* mapStyleV2 地图样式
* styleId 样式id
* */
bmap: {
center,
zoom: 6,
roam: true,
mapStyleV2: {
styleId: '5453dc64d711215271444d4abeaf6b44'
}
},
/*系列列表
* type 系列类型
* scatter 散点图
* effectScatter 特效散点图
* coordinateSystem 坐标类型，bmap
* data 数据
* symbolSize 尺寸
* */
series: [{
id: 's1',
type: 'scatter',
coordinateSystem: 'bmap',
symbolSize: (param) => {
return param[2] / 15
}
},
{
id: 's2',
type: 'effectScatter',
coordinateSystem: 'bmap',
symbolSize: (param) => {
return param[2] / 15
}
}
]
};
chart.setOption(option);
/*获取空气质量质量数据*/
fetch('./lib/pm.json')
.then((res) => res.json())
.then(data => {
const len = data.length;
const data2 = data.splice(len - 5, len)
//绘图
chart.setOption({
series: [{
id: 's1',
data
},
{
id: 's2',
data: data2
},
]
})
});
/*获取百度地图的实例 chart.getModel().getComponent('bmap').getBMap()*/
const map = chart.getModel().getComponent('bmap').getBMap();
var point = new BMap.Point(...center);
// map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
map.addControl(new BMap.NavigationControl());
}
</script>
柱状图数据背景设为数据对应的图片
例如本例中的数据是 ['小麦','玉米','高粱']
<script>
{
/*图像源*/
//小麦
const imgXm = new Image();
imgXm.src = './images/xm.jpg';
//玉米
const imgYm = new Image();
imgYm.src = './images/ym.jpg';
//高粱
const imgGl = new Image();
imgGl.src = './images/gl.jpg';
//当所有图片都加载成功后再绘图
Promise.all([imgPro(imgXm), imgPro(imgYm), imgPro(imgGl), ]).then(() => {
//绘图
chart.setOption({
series: [{
id: 'xm',
color: {
image: imgXm
}
},
{
id: 'ym',
color: {
image: imgYm
}
},
{
id: 'gl',
color: {
image: imgGl
}
},
]
})
});
//建立Promise 对象，指定img 加载成功后，执行resolve
function imgPro(img) {
return new Promise((resolve) => {
img.onload = function () {
resolve(img);
}
});
}
}
</script>
主题更换
一般直接复制为 js 文件格式，操作起来方便
更换主题后
<!-- 引入主题 -->
<script src="./js/China.js"></script>
<script>
{
// 使用主题
const chart = echarts.init(document.getElementById('chartR3'), 'China');
}
</script>
