极客观点
项目管理
HarmonyOS
——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
如上图所展示，我想把折线图放在skyblue的区域。但是我做出来的是下图的效果。小白不懂这块，纯属抄的代码，想请教下怎么做！
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
—————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
<template>
<div class="persentation-body" style="height:700px;background-color:#ffffff">
<row>
<Col span="4" style="padding-right:10px">
<Select v-model="model11" filterable>
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</Col>
<Col span="4" style="padding-right:10px">
<Select v-model="model12" filterable>
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</Col>
<Col span="4" style="padding-right:10px">
<Select v-model="model13" filterable>
<Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
</Col>
<Button type="primary">搜索</Button>
</row>
<div id="main" style="height:400px;background-color:skyblue"></div>
<div>
<Button type="primary" size="small" @click="exportData">
<Icon type="ios-download-outline"></Icon>导出Excel
</Button>
</div>
<div>
<Table size="small" border :columns="columns1" :data="data1"></Table>
</div>
<div style="padding-top:10px;float:right">
<Page :total="100" />
</div></div>
</template>
<script>
import echarts from "echarts";
export default {
data() {
return {
cityList: [
{
value: "New York",
label: "2019"
},
{
value: "London",
label: "2018"
},
{
value: "Sydney",
label: "2017"
}
],
model11: "",
model12: [],
model13: "",
columns1: [
{
title: "日期",
key: "datatime",
width: 100,
fixed: 'left'
},
{
title: "1",
key: "one",
width: 55
},
{
title: "2",
key: "two",
width: 60
},
{
title: "3",
key: "three",
width: 60
},
{
title: "4",
key: "four",
width: 60
},
{
title: "5",
key: "five",
width: 60
},
{
title: "6",
key: "six",
width: 60
},
{
title: "7",
key: "seven",
width: 60
},
{
title: "8",
key: "eight",
width: 60
},
{
title: "9",
key: "nine",
width: 60
},
{
title: "10",
key: "ten",
width: 60
},
{
title: "11",
key: "eleven",
width: 60
},
{
title: "12",
key: "twelve",
width: 60
},
{
title: "13",
key: "thirteen",
width: 60
},
{
title: "14",
key: "fourteen",
width: 60
},
{
title: "15",
key: "fiveteen",
width: 60
},
{
title: "16",
key: "sixteen",
width: 60
},
{
title: "17",
key: "seventeen",
width: 60
},
{
title: "18",
key: "eighteen",
width: 60
},
{
title: "19",
key: "nineteen",
width: 60
},
{
title: "20",
key: "twenty",
width: 60
},
{
title: "21",
key: "twentyone",
width: 60
},
{
title: "22",
key: "twentytwo",
width: 60
},
{
title: "23",
key: "twentythree",
width: 60
},
{
title: "24",
key: "twentyfour",
width: 60
}
],
data1: [
{
datatime: 20190929,
one: 18,
two: 3,
three: 8,
four: 32,
five: 33,
six: 45,
seven: 56,
eight: 92,
nine: 2,
ten: 2,
eleven: 34,
twelve: 34,
thirteen: 90,
fourteen: 65,
fiveteen: 34,
sixteen: 45,
seventeen: 34,
eighteen: 23,
nineteen: 23,
twenty: 45,
twentyone: 34,
twentytwo: 89,
twentythree: 56,
twentyfour: 342
},
{
datatime: 20190929,
one: 18,
two: 3,
three: 8,
four: 32,
five: 33,
six: 45,
seven: 56,
eight: 92,
nine: 2,
ten: 2,
eleven: 34,
twelve: 34,
thirteen: 90,
fourteen: 65,
fiveteen: 34,
sixteen: 45,
seventeen: 34,
eighteen: 23,
nineteen: 23,
twenty: 45,
twentyone: 34,
twentytwo: 89,
twentythree: 56,
twentyfour: 342
},
{
datatime: 20190929,
one: 18,
two: 3,
three: 8,
four: 32,
five: 33,
six: 45,
seven: 56,
eight: 92,
nine: 2,
ten: 2,
eleven: 34,
twelve: 34,
thirteen: 90,
fourteen: 65,
fiveteen: 34,
sixteen: 45,
seventeen: 34,
eighteen: 23,
nineteen: 23,
twenty: 45,
twentyone: 34,
twentytwo: 89,
twentythree: 56,
twentyfour: 342
}
]
};},
methods: {
exportData() {
alert("恭喜发财");
}},
mounted() {
this.chartLine = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
tooltip: {
//设置tip提示
trigger: "axis"
},
legend: {
//设置区分（哪条线属于什么）
data: ["预报名", "浏览量"]
},
color: ["#8AE09F", "#FA6F53"], //设置区分（每条线是什么颜色，和 legend 一一对应）
xAxis: {
//设置x轴
type: "category",
boundaryGap: false, //坐标轴两边不留白
data: [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24"
],
name: "时间", //X轴 name
nameTextStyle: {
//坐标轴名称的文字样式
color: "#FA6F53",
fontSize: 16,
padding: [0, 0, 0, 20]
},
axisLine: {
//坐标轴轴线相关设置。
lineStyle: {
color: "#FA6F53"
}
}
},
yAxis: {
//设置Y轴
name: "人数",
nameTextStyle: {
//坐标轴名称的文字样式
color: "skyblue",
fontSize: 16,
padding: [0, 0, 10, 0]
},
axisLine: {
//坐标轴轴线相关设置
lineStyle: {
color: "#FA6F53"
}
},
type: "value"
},
series: [
{
name: "预报名",
data: [
23,
34,
45,
56,
67,
78,
89,
21,
67,
89,
90,
123,
13,
22,
25,
56,
14,
230,
351,
309,
23,
35,
230,
240
],
type: "line", // 类型为折线图
lineStyle: {
// 线条样式 => 必须使用normal属性
normal: {
color: "#8AE09F"
}
}
},
{
name: "浏览量",
data: [
120,
200,
150,
321,
380,
370,
389,
210,
367,
431,
276,
422,
90,
132,
133,
212,
101,
190,
121,
310,
210,
290,
310,
333
],
type: "line",
lineStyle: {
normal: {
color: "#FA6F53"
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
this.chartLine.setOption(option);}
};
</script>### 问题描述
问题出现的环境背景及自己尝试过哪些方法
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
html5
用refs拿dom节点试试