mapbox 工作问题暂时记录
mapbox样式修改
1.
mapbox直接用class名无法修改样式, 可以添加 :deep 来修改样式
2.
map.value.getStyle().layers
这行代码可以获取页面中所有图层,可以判断图层id来做相应操作
3.
map.value.setLayoutProperty(layer.id, 'visibility', 'visible')//图层显示
map.value.setLayoutProperty(layer.id, 'visibility', 'none');//图层隐藏
layer.id为map.value.addlayer里的id
4.
vue3 echarts 报错 TypeError: this.dom.getContext is not a function
<div class="boxConten" v-for="item in listData" :key="item">
<ul class="point-information-box" v-if="item.ranking == '1'"></ul>
<div class="barchart-box" v-else-if="item.ranking == '2'">
<!-- 方法一: -->
<!-- <div ref="EchartsRef" :ref="pushBtnList" style="width: 150px; height: 140px"></div> -->
<!-- 方法二: -->
<div :ref="pushBtnList" style="width: 150px; height: 140px"></div>
</div>
<div class="barchart-box" v-else-if="item.ranking == '3'"></div>
<div class="barchart-box" v-else></div>
</div>
const listData = ref([
{
title: '当年统计详情',
ranking: '1',
list: [
[
{ num: 98, unit: '(%)', name: '检测点合格率' },
{ num: 100, unit: '(%)', name: '样品合格率' },
],
[
{ num: 356, unit: '(次)', name: '检测总次数' },
{ num: 486, unit: '(个)', name: '样品总量' },
],
[
{ num: 25, unit: '(次)', name: '指标异常总次数' },
{ num: 4, unit: '(个)', name: '异常指标总数量' },
],
],
},
{
title: '近12月合格率曲线',
ranking: '2',
switchoverText: [
{ name: '检测点', show: true },
{ name: '样品', show: false },
],
show: true,
},
{
title: '近12月合格率曲线',
ranking: '3',
switchoverText: [
{ name: '指标异常次数', show: true },
{ name: '异常指标数量', show: false },
],
show: true,
},
{ title: '近12月异常指标占比', ranking: '4' },
]);
const EchartsRef = ref();
const pushBtnList = (el) => {
EchartsRef.value = el;
};
onMounted(() => {
initChart();
});
const initChart = () => {
// 初始化图表
let timeArr = ['2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02'];
let valueArr = ['2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02', '2024-01-02'];
initecharts(timeArr, valueArr);
};
//加载echarts图
const initecharts = (timeArr: any[], valueArr: any[]) => {
//方法一
//let myEcharts = echarts.init(EchartsRef.value[0] as unknown as HTMLElement);
//方法二
let myEcharts = echarts.init(EchartsRef.value as unknown as HTMLElement);
let option = {
tooltip: {
trigger: 'axis',
},
grid: {
right: '3%',
left: '5%',
},
xAxis: {
type: 'category',
data: timeArr,
// gridIndex: index,
axisLabel: {
fontFamily: 'OPPOSans',
fontWeight: 500,
fontSize: 10,
color: '#3D3D3D',
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#EBF0F5',
},
},
},
yAxis: {
type: 'value',
name: '',
nameTextStyle: {
fontFamily: 'OPPOSans',
fontWeight: 500,
fontSize: 12,
color: '#3D3D3D',
},
axisLabel: {
fontFamily: 'OPPOSans',
fontWeight: 500,
fontSize: 10,
color: '#3D3D3D',
},
splitLine: {
show: true,
lineStyle: {
color: '#EBF0F5',
},
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
},
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 0,
end: 100,
backgroundColor: 'none',
fillerColor: 'rgba(168, 177, 188, 0.14);', //选中范围的填充颜色
borderColor: '#EBF0F5',
},
{
type: 'inside',
xAxisIndex: [0],
},
],
series: [
{
data: valueArr,
type: 'line',
smooth: true,
},
],
};
myEcharts.setOption(option);
// 监听窗口变化,echarts重绘
window.addEventListener('resize', function () {
myEcharts.resize();
});
};
报错总结: v-for 循环会影响到dom的生成, for循环了 会出现多个dom,你ref参数 由原来的 一个 变成了多个
方法一: 在for循环里生成echarts 使用ref绑定, 获取时需要[0]
方法二: 在for循环里生成echarts 使用动态ref绑定, 在pushBtnList里面赋值给 echarts绑定的值,并且不需要下标取值
持续更新…