由于我们在做项目的时候相同的echarts可能会复用多次，并且可能会在一个页面展示多个echarts。话不多说，了解一下我的需求场景，直接上图
需求：根据开始日期，结束日期(日期选择范围限制在一周内)进行查询不同类型的数据
解决思路：
把每一个echarts封装成一个单独的组件，通过查询的数据直接渲染多个echarts不就完了吗------------------理想很丰满，显示很骨感 哈哈哈
第一步：echarts作为子组件
子组件的代码没什么要说的,这里把重要代码截图放在下面，其中sourceData就是父组件传递过来的数据
<!-- 封装echarts组件 -->
<template>
<div>
<div id="echart" ref="main" style="width:400px;height:270px"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default{
props:{
//传进来需要显示的数据
data:{
type:Object,
default:{}
}
},
data(){
return{
}
},
watch:{
data:{
deep:true,
handler(newVal,oldVal){
console.log(newVal,oldVal,"+++++");
this.$nextTick(()=>{
this.resetEchart()
})
}
}
},
mounted(){
this.$nextTick(()=>{
this.resetEchart()
})
},
created(){
this.$nextTick(()=>{
this.resetEchart()
})
},
methods:{
initChart(sourceData) {
//console.log(sourceData,"+++++++");
let getchart = echarts.init(this.$refs.main);
var option = {
legend: {},
tooltip: {},
dataset: sourceData,
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: [{ type: 'bar' }, { type: 'bar' }]
};
getchart.setOption(option);
//随着屏幕大小调节图表
window.addEventListener("resize", () => {
getchart.resize();
});
},
resetEchart(){
let a = document.getElementById("echart");
a.removeAttribute('_echarts_instance_');
this.initChart(this.data)
}
}
}
</script>
看过echarts官网都知道sourceData的结构是有要求的,不然echarts图表不能正确展示(这里结构自行到官网查看)
所以这里要和后端协商好，如果后端把返回的数据都处理以上结构那么前端直接渲染就可以，但是就怕后端不能处理，呜呜呜
那么前端的工作量就大了 啊啊啊
下面看后端返回给我的数据结构
第二步：处理数据
把后端返回给我的数据结构处理成echarts官网source的结构
数据处理的核心代码如下图
formateEchartData(){
const echartDataObj = {};
const obj = [];
const newArr = []
this.echartData.forEach(val=>{
obj.push([val.day,val.qnjrs,val.jrs]);
this.$set(echartDataObj,val.item,{
name:val.name,
option:{
dimensions: ['product', '2022', '2023'],
source:[]
}})
})
console.log(obj,"ooooooooooo");
for(var i=0;i<obj.length;i+=this.dateCount){
newArr.push(obj.slice(i,i+this.dateCount));
}
console.log(newArr,"aaaaaaa");
var item = 0;
for(var key in echartDataObj){
//console.log(key, "key");
echartDataObj[key].option.source = newArr[item]
item++
}
this.NewChartData = echartDataObj
console.log(this.NewChartData,"重新赋值");
}
最后附上父组件的全部代码
<!-- 门诊部数据统计 -->
<template>
<div class="app-container">
<el-row>
<el-col class="card-box">
<el-card>
<div class="block">
<div class="demonstration">*查询日期范围不能超过一周</div>
<el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="开始日期" prop="ksrq">
<el-date-picker
:picker-options="pickerOptionsStart"
clearable
size="small"
style="width: 200px"
v-model="ruleForm.ksrq"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择开始日期"
>
</el-date-picker>
</el-form-item>
<el-form-item label="结束日期" prop="jsrq">
<el-date-picker
:picker-options="pickerOptionsEnd"
clearable
size="small"
style="width: 200px"
v-model="ruleForm.jsrq"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
type="date"
placeholder="选择结束日期"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</div>
</el-card>
</el-col>
</el-row>
<el-row >
<el-col :span="8" class="card-box" v-for="item in NewChartData">
<el-card>
<div slot="header"><span>{{item.name}}</span></div>
<echart-cpn :data="item.option" ></echart-cpn>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import echartCpn from '@/views/dataChart/chartMenu/cpns/echartCpn.vue'
import {getZzbEchart} from '@/api/dataChart/chartMenu'
import { formatDate } from '../../../../utils'
export default{
components:{echartCpn},
data(){
return{
//时间限制，符合日期先后顺序的实际情况
pickerOptionsStart: {
disabledDate: (time) => {
let sevenDays = 6 * 24 * 3600 * 1000; //6天
if (this.ruleForm.jsrq) {
return (
time.getTime() > Date.now() - 8.64e6 ||
//开始日期要在选择的结束日期之前,大于结束时间的日期不能选
time.getTime() > new Date(this.ruleForm.jsrq).getTime() ||
//先选结束时间，在结束时间七天之前的不能选（因为包括自身这一天，所以是减去六天）
time.getTime() < new Date(this.ruleForm.jsrq).getTime() - sevenDays
);
}
return time.getTime() > Date.now() - 8.64e6; //今天及之前
}
},
pickerOptionsEnd: {
disabledDate: (time) => {
let sevenDays = 6 * 24 * 3600 * 1000;
if (this.ruleForm.ksrq) {
return (
time.getTime() > Date.now() - 8.64e6 ||
//结束日期要在选择的开始日期之后,小于开始时间的日期不能选
time.getTime() < new Date(this.ruleForm.ksrq).getTime() ||
//先选开始时间，在开始时间七天之后的不能选（因为包括自身这一天，所以是加上六天）
time.getTime() > new Date(this.ruleForm.ksrq).getTime() + sevenDays
);
}
return time.getTime() > Date.now() - 8.64e6; //今天及之前
}
},
ruleForm: {
ksrq:'',
jsrq:''
},
NewChartData:{}, //传递给子组件的数据
rules: {
ksrq:[{ required: true, message: '请选择开始时间', trigger: 'blur' },],
jsrq:[{ required: true, message: '请选择结束时间', trigger: 'blur' },]
}
}
},
watch:{
NewChartData:{
deep:true,
handler(newVal,oldVal){
console.log(newVal,oldVal,"----------");
}
}
},
created(){
this.setDeafaultTimeQuery()
},
mounted(){
//默认查询当前时间前一周的数据
this.loadEchartData(this.ruleForm)
},
methods:{
//默认开始时间为当前时间的前一周
setDeafaultTimeQuery() {
const currentDate = new Date()
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
const date = currentDate.getDate();
const end = (new Date(year, month, date, 0,0,0)).getTime();
const start = formatDate(end - (3600 * 1000 * 24 * 6)) // 一周前
this.ruleForm.ksrq= start
this.ruleForm.jsrq = formatDate(end)
},
//点击确定
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.loadEchartData(this.ruleForm)
} else {
console.log('error submit!!');
return false;
}
});
},
//重置
resetForm(formName) {
console.log();
this.$refs[formName].resetFields();
this.ruleForm.ksrq = ""
this.ruleForm.jsrq = ''
},
//查询事件
loadEchartData(params){
this.loading = true;
console.log('日期',params);
getZzbEchart(params).then(res=>{
this.dateCount = res.data[0].count
this.loading = false;
this.echartData = res.data
this.formateEchartData()
})
},
formateEchartData(){
const echartDataObj = {};
const obj = [];
const newArr = []
this.echartData.forEach(val=>{
obj.push([val.day,val.qnjrs,val.jrs]);
this.$set(echartDataObj,val.item,{
name:val.name,
option:{
dimensions: ['product', '2022', '2023'],
source:[]
}})
})
console.log(obj,"ooooooooooo");
for(var i=0;i<obj.length;i+=this.dateCount){
newArr.push(obj.slice(i,i+this.dateCount));
}
console.log(newArr,"aaaaaaa");
var item = 0;
for(var key in echartDataObj){
//console.log(key, "key");
echartDataObj[key].option.source = newArr[item]
item++
}
this.NewChartData = echartDataObj
console.log(this.NewChartData,"重新赋值");
}
}
}
</script>
<style scoped>
.demonstration{
margin-bottom: 10px;
font-size: 12px;
color:#606266;
}
</style>
大功告成！
