Enhanced style compatibility.

This commit is contained in:
jiaming743 2019-07-04 17:11:54 +08:00
parent 6f784a3e36
commit 658537f155
2 changed files with 14 additions and 13 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="dv-charts-container" :ref="ref"> <div class="dv-charts-container" :ref="ref">
<div class="charts" :ref="chartRef" /> <div class="charts-canvas-container" :ref="chartRef" />
</div> </div>
</template> </template>
@ -30,6 +30,8 @@ export default {
option () { option () {
let { chart, option } = this let { chart, option } = this
if (!chart) return
if (!option) option = {} if (!option) option = {}
chart.setOption(option) chart.setOption(option)
@ -67,7 +69,7 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
.charts { .charts-canvas-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

View File

@ -1,12 +1,11 @@
<template> <template>
<div class="dv-scroll-board" :ref="ref"> <div class="dv-scroll-board" :ref="ref">
<div class="header" v-if="header.length && mergedConfig"> <div class="header" v-if="header.length && mergedConfig" :style="`background-color: ${mergedConfig.headerBGC};`">
<div <div
class="header-item" class="header-item"
v-for="(headerItem, i) in header" v-for="(headerItem, i) in header"
:key="headerItem + i" :key="headerItem + i"
:style="` :style="`
background-color: ${mergedConfig.headerBGC};
height: ${mergedConfig.headerHeight}px; height: ${mergedConfig.headerHeight}px;
line-height: ${mergedConfig.headerHeight}px; line-height: ${mergedConfig.headerHeight}px;
width: ${widths[i]}px; width: ${widths[i]}px;
@ -19,7 +18,7 @@
<div <div
v-if="mergedConfig" v-if="mergedConfig"
class="rows" class="rows"
:style="`height: calc(100% - ${header.length ? mergedConfig.headerHeight : 0}px);`" :style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)}px;`"
> >
<div <div
class="row-item" class="row-item"
@ -357,20 +356,20 @@ export default {
</script> </script>
<style lang="less"> <style lang="less">
.text {
padding: 0 10px;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dv-scroll-board { .dv-scroll-board {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #fff; color: #fff;
.text {
padding: 0 10px;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.header { .header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;