done oil flow

This commit is contained in:
lb 2023-05-10 15:37:10 +08:00
parent c9c920fdb5
commit ba7118349b
2 changed files with 17 additions and 13 deletions

View File

@ -3,9 +3,9 @@
<Container usage="Charts"> <Container usage="Charts">
<SubContainer title="油流量" icon="oil" padding="17px"> <SubContainer title="油流量" icon="oil" padding="17px">
<div class="tables flex" style="height: 100%"> <div class="tables flex" style="height: 100%">
<LineChart class="flex-1" :config="chartConfig" /> <LineChart key="1" id="line-chart-1" class="flex-1" :config="chartConfig" />
<div class="vertical-line"></div> <div class="vertical-line"></div>
<LineChart class="flex-1" :config="chartConfig" /> <LineChart key="2" id="line-chart-2" class="flex-1" :config="chartConfig" />
</div> </div>
</SubContainer> </SubContainer>
</Container> </Container>

View File

@ -11,7 +11,7 @@
<li>产线5</li> <li>产线5</li>
</ul> </ul>
</div> </div>
<div id="line-chart" style="width: 100%; height: 100%"></div> <div :id="id" style="width: 100%; height: 100%"></div>
</div> </div>
</template> </template>
@ -42,6 +42,10 @@ echarts.use([
export default { export default {
name: "LineChart", name: "LineChart",
props: { props: {
id: {
type: String,
default: 'line-chart'
},
config: { config: {
type: Object, type: Object,
default: () => ({ default: () => ({
@ -74,7 +78,7 @@ export default {
methods: { methods: {
init() { init() {
if (!this.chart) if (!this.chart)
this.chart = echarts.init(document.getElementById("line-chart")); this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({ this.chart.setOption({
// title: { // title: {
// text: "ECharts ", // text: "ECharts ",
@ -85,14 +89,14 @@ export default {
bottom: 24, bottom: 24,
right: 12, right: 12,
}, },
tooltip: { // tooltip: {
trigger: "axis", // trigger: "axis",
axisPointer: { // axisPointer: {
lineStyle: { // lineStyle: {
color: "#eee3", // color: "#eee3",
}, // },
}, // },
}, // },
xAxis: { xAxis: {
data: Array(31) data: Array(31)
.fill(1) .fill(1)
@ -175,7 +179,7 @@ export default {
// ], // ],
// }, // },
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.colors[index] + "44" }, { offset: 0, color: this.colors[index] + "33" },
{ offset: 1, color: "transparent" }, { offset: 1, color: "transparent" },
]), ]),
}, },