<template>
<div>
<!-- 分割线 -->
<div class="p-sm">
<!-- 查询 -->
<el-form :inline="true" :model="search" ref="formSearch" class>
<el-form-item label="时间：">
<el-radio-group v-model="search.date" @change="changeDate(search.date)">
<el-radio-button label="7">7天</el-radio-button>
<el-radio-button label="14">14天</el-radio-button>
<el-radio-button label="30">30天</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="选择时间：">
<el-date-picker
v-model="ctime"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
value-format="timestamp"
@change="search.date=''"
clearable
style="width:260px;padding-right:0px"
:picker-options="pickeroptions"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleSelect">查询</el-button>
</el-form-item>
</el-form>
</div>
<el-row :gutter="20">
<el-col :span="11">
<h4>图1</h4>
<div id="myChart1" style="width:98%;height:450px"></div>
</el-col>
<el-col :span="11">
<h4>图2</h4>
<div id="myChart2" style="width:98%;height:450px"></div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="11">
<h4>图3</h4>
<div id="myChart3" style="width:98%;height:450px"></div>
</el-col>
<el-col :span="11">
<h4>图4 Weather Statistics</h4>
<div id="myChart4" :style="{'width':'98%','height':'450px',}"></div>
</el-col>
</el-row>
</div>
</template>
<script>
import { getCurrentMonthLast } from "@/libs/tools";
import { getDate } from "@/libs/util";
import echarts from "echarts";
import { getStore } from "@/libs/util";
export default {
name: "home",
components: {},
data() {
return {
eChart1: "",
eChart2: "",
eChart3: "",
eChart4: "",
echart_data1: [],
echart_data2: [],
echart_data3: [],
echart_data4: [],
colorList: [
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc"
], //图形颜色
info: [],
pickeroptions: {
// disabledDate: this.disabledDate
disabledDate:false
},
ctime: getCurrentMonthLast(7), //选择日期
search: {
date: "7" // 时间周期
},
legend: {
// 配置分类
data1: [
"其他",],
data2: [],
data3: [],
data4: []
}
};
},
computed: {},
mounted() {
this.getListData();
},
// watch: {
// echart_data1: {
// handler(newValue, oldValue) {
// // this.echart_data1.length = 0;
// if(newValue){
// this.eChart1.setOption(newValue);
// }else{
// this.eChart1.setOption(oldValue);
// }
// // this.initData();
// // this.drawPie1();
// },
// deep: true
// }
// },
methods: {
// initData() {
// this.echart_data1.map((item) => {
// return {
// name: item.name,
// value: item.value
// }
// });
// },
handleSelect() {
this.getListData();
},
// 首页数据展示接口
getListData(page = 1, pageSize = 20) {
let options = [];
let ctime =
this.ctime && `${this.ctime[0] / 1000}_${this.ctime[1] / 1000}`;
options = {
ctime: ctime
};
this.loading = true;
this.$get("/index", options).then(res => {
if (res.code != 0) return;
this.loading = false;
this.info = res.data.index;
this.echart_data1 = res.data.list.instudry_info;
this.echart_data2 = res.data.list.case_info;
this.echart_data3 = res.data.list.level_info;
this.echart_data4 = res.data.list.coo_info;
this.$nextTick(() => {
window.scrollTo(0, 200);
});
this.drawPie1();
this.drawPie2();
this.drawPie3();
this.drawPie4();
});
},
drawPie1() {
this.eChart1 = echarts.init(document.getElementById("myChart1"));
let option = {
title: {},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
show: false
// top: 20,
// left: "center",
// textStyle: {
// fontSize: 16
// },
// data: this.legend.data1
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
textStyle: {
fontSize: 16,
fontWeight: 400
},
series: [
{
name: "南丁图",
type: "pie",
selectedMode: "single",
radius: "70%",
// radius: [20, 140],
center: ["50%", "50%"],
// roseType: "angle",
itemStyle: {
borderRadius: 15,
normal: {
color: params => {
return this.colorList[params.dataIndex];
}
}
},
emphasis: {
//高亮的图形样式(着重显示)
label: {
show: true
}
},
data: this.echart_data1
}
]
};
if (this.echart_data1.length != 0) {
this.eChart1.setOption(option, true);
} else {
this.eChart1.setOption(
(option = {
tooltip: {
trigger: "item"
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2
},
label: {
show: true,
position: "center",
fontSize: "40",
fontWeight: "bold"
},
emphasis: {
label: {
show: true,
fontSize: "40",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [{ value: 0, name: "暂无数据" }]
}
]
}),
true
);
}
this.eChart1.on("legendselectchanged", function(params) {
// 获取点击图例的选中状态
var isSelected = params.selected[params.name];
// 在控制台中打印
console.log(
(isSelected ? "选中了" : "取消选中了") + "图例" + params.name
);
// 打印所有图例的状态
// console.log(params.selected);
});
},
drawPie2() {
this.eChart2 = echarts.init(document.getElementById("myChart2"));
let option = {
title: {},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
top: 20,
left: "center",
textStyle: {
fontSize: 16
},
data: []
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
textStyle: {
fontSize: 16,
fontWeight: 400
},
series: [
{
name: "南丁",
type: "pie",
radius: [20, 140],
center: ["50%", "50%"],
roseType: "angle",
itemStyle: {
borderRadius: 15,
normal: {
color: params => {
return this.colorList[params.dataIndex];
}
}
},
emphasis: {
//高亮的图形样式(着重显示)
label: {
show: true
}
},
data: this.echart_data2
}
]
};
if (this.echart_data2.length != 0) {
this.eChart2.setOption(option, true);
} else {
this.eChart2.setOption(
(option = {
tooltip: {
trigger: "item"
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2
},
label: {
show: true,
position: "center",
fontSize: "40",
fontWeight: "bold"
},
emphasis: {
label: {
show: true,
fontSize: "40",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [{ value: 0, name: "暂无数据" }]
}
]
}),
true
);
}
this.eChart2.on("legendselectchanged", function(params) {
// 获取点击图例的选中状态
var isSelected = params.selected[params.name];
// 在控制台中打印
console.log(
(isSelected ? "选中了" : "取消选中了") + "图例" + params.name
);
// 打印所有图例的状态
// console.log(params.selected);
});
},
drawPie3() {
this.eChart3 = echarts.init(document.getElementById("myChart3"));
let option = {
title: {
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
type: "scroll",
orient: "vertical",
left: 10,
top: 20,
bottom: 20,
data: this.legend.data1
},
textStyle: {
fontSize: 16,
fontWeight: 400
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: "南丁",
type: "pie",
radius: [20, 140],
center: ["50%", "50%"],
roseType: "angle",
itemStyle: {
borderRadius: 15,
normal: {
color: params => {
return this.colorList[params.dataIndex];
}
}
},
emphasis: {
//高亮的图形样式(着重显示)
label: {
//
show: true
}
},
// data: this.echart_data1,
data: this.echart_data3
}
]
};
if (this.echart_data3.length != 0) {
this.eChart3.setOption(option, true);
} else {
this.eChart3.setOption(
(option = {
tooltip: {
trigger: "item"
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
center: ["50%", "50%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2
},
label: {
show: true,
position: "center",
fontSize: "40",
fontWeight: "bold"
},
emphasis: {
label: {
show: true,
fontSize: "40",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [{ value: 0, name: "暂无数据" }]
}
]
}),
true
);
};
this.eChart3.on("legendselectchanged", function(params) {
// 获取点击图例的选中状态
var isSelected = params.selected[params.name];
// 在控制台中打印
console.log(
(isSelected ? "选中了" : "取消选中了") + "图例" + params.name
);
// 打印所有图例的状态
// console.log(params.selected);
});
},
drawPie4() {
this.eChart4 = echarts.init(document.getElementById("myChart4"));
let option = {
title: {
left: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
textStyle: {
fontSize: 16,
fontWeight: 400
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
series: [
{
name: "普通饼图",
selectedMode: "single",
type: "pie",
radius: "70%",
center: ["50%", "50%"],
itemStyle: {
borderRadius: 5,
normal: {
color: params => {
return this.colorList[params.dataIndex];
}
}
},
emphasis: {
//高亮的图形样式(着重显示)
itemStyle: {
shadowBlur: 20,
shadowOffsetX: 0
}
},
data: this.echart_data4
}
]
};
if (this.echart_data4.length != 0) {
this.eChart4.setOption(option, true);
} else {
this.eChart4.setOption(
(option = {
tooltip: {
trigger: "item"
},
series: [
{
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2
},
label: {
show: true,
position: "center",
fontSize: "40",
fontWeight: "bold"
},
emphasis: {
label: {
show: true,
fontSize: "40",
fontWeight: "bold"
}
},
labelLine: {
show: false
},
data: [{ value: 0, name: "暂无数据" }]
}
]
}),
true
);
}
this.eChart4.on("legendselectchanged", function(params) {
// 获取点击图例的选中状态
var isSelected = params.selected[params.name];
// 在控制台中打印
console.log(
(isSelected ? "选中了" : "取消选中了") + "图例" + params.name
);
// 打印所有图例的状态
// console.log(params.selected);
});
},
changeDate(val) {
console.log(val);
if (val == 7) {
this.ctime = getCurrentMonthLast(7);
} else if (val == 14) {
this.ctime = getCurrentMonthLast(14);
} else if (val == 30) {
this.ctime = getCurrentMonthLast(30);
}
},
disabledDate(time) {
return time.getTime() < Date.now() - 86400 * 730 * 1000;
}
}
};
</script>
<style lang="less">
.title {
height: 40px;
line-height: 40px;
}
.home-content {
margin-bottom: 20px;
width: 100%;
margin: 30px 0;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.bg-purple-dark {
background: #99a9bf;
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius: 4px;
min-height: 36px;
padding: 50px 10px;
text-align: center;
background: #f3f7f8;
.top {
}
.bot {
margin-top: 10px;
}
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
# echarts设置不显示X轴与Y轴
同理，设置Y轴不显示，只需要在yAxis中设置这两个属性 axisLine: { show: false}, axisTick: { show: false },
xAxis: [{
type: 'category',
boundaryGap: false,
axisLine: { //关键设置，不显示X轴线条
show: false
},
axisTick: { //关键设置，坐标轴刻度也不显示
show: false
},
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#888'
},
},
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
