免注册个人网站制作,商务网站建设综合实训报告,wordpress秀,专业创业服务平台网站建设需求mapbox 工作问题暂时记录 mapbox样式修改1.2.3.4. mapbox样式修改
1.
mapbox直接用class名无法修改样式, 可以添加 :deep 来修改样式
2. map.value.getStyle().layers这行代码可以获取页面中所有图层,可以判断图层id来做相应操作
3.
map.value.setLayoutProperty(layer.id… mapbox 工作问题暂时记录 mapbox样式修改1.2.3.4. 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 classboxConten v-foritem in listData :keyitemul classpoint-information-box v-ifitem.ranking 1/uldiv classbarchart-box v-else-ifitem.ranking 2!-- 方法一: --!-- div refEchartsRef :refpushBtnList stylewidth: 150px; height: 140px/div --!-- 方法二: --div :refpushBtnList stylewidth: 150px; height: 140px/div/divdiv classbarchart-box v-else-ifitem.ranking 3/divdiv classbarchart-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绑定的值,并且不需要下标取值
持续更新…
