多个echart的封装
<template>
<div>
<!-- 分割线 -->
<el-row :gutter="20">
<el-col :span="4">
<div class="title">数据图表</div>
</el-col>
</el-row>
<h4>数据图表-4个图</h4>
<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="12">
<div id="myChart1" style="width:98%;height:480px;"></div>
</el-col>
<el-col :span="12">
<div id="myChart2" style="width:98%;height:480px;"></div>
</el-col>
</el-row>
<el-row :gutter="20" :style="{marginTop: '20px'}">
<el-col :span="12">
<div id="myChart3" style="width:98%;height:480px;"></div>
</el-col>
<el-col :span="12">
<div id="myChart4" style="width:98%;height:480px;"></div>
</el-col>
</el-row>
</div>
</template>
<script>
import { getCurrentMonthLast } from "@/libs/tools";
import echarts from "echarts";
export default {
name: "home",
components: {},
data() {
return {
info:'',
pickeroptions: {
// disabledDate: this.disabledDate 截止到什么时间不能选
disabledDate: false
},
ctime: getCurrentMonthLast(7), //选择日期-封装的时间处理
search: {
date: "7" // 时间周期
},//查询条件
};
},
mounted() {
this.getListData();
},
methods: {
handleSelect() {
this.getListData();
},
// 首页数据展示接口
getListData() {
let options = [];
//数组时间转为 aaa_bbb模式
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;
let list = [
{
el: 'myChart1',
title: '图1',
series_name: '默认名',
radius: '60%',
data: (res.data.list.instudry_info && res.data.list.instudry_info.length != 0) ? res.data.list.instudry_info : [{ value: 0, name: '暂无数据' }]
},
{
el: 'myChart2',
title: '图2',
series_name: '移入图表展示标题',
radius: ['30%', '60%'],
data: (res.data.list.case_info && res.data.list.case_info.length != 0) ? res.data.list.case_info : [{ value: 0, name: '暂无数据' }]
},
{
el: 'myChart3',
title: '图3',
series_name: '移入图表展示标题',
radius: ['30%', '60%'],
data: (res.data.list.level_info && res.data.list.level_info.length != 0) ? res.data.list.level_info : [{ value: 0, name: '暂无数据' }]
},
{
el: 'myChart4',
title: '图4',
series_name: '移入图表展示标题',
radius: '60%',
data: (res.data.list.coo_info && res.data.list.coo_info.length != 0) ? res.data.list.coo_info : [{ value: 0, name: '暂无数据' }]
}
]
list.forEach(item=>{
this.drawPie(item.el, item.title, item.series_name, item.radius, item.data)
})
});
},
drawPie(el, title, series_name, radius, data, roseType=false) {
let eChart = echarts.init(document.getElementById(el));
let option = {
title: {
text: title,
left: 'left',
textStyle: {
fontSize: 16
}
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
grid: {
top: '15%',
left: '3%',
right: '3%',
containLabel: true
},
textStyle: {
fontSize: 14,
fontWeight: 400
},
color: ["#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"],
series: [
{
name: series_name,
type: "pie",
[roseType? 'roseType' : '']: 'area',
radius: radius,
emphasis: {
label: {
show: true
}
},
data: data
}
]
};
eChart.setOption(option, true);
},
changeDate(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>
