在后台管理的项目中，一般用到echarts的地方都是相似的，极少出现颜色相差特别大，样式相差特别大的情况。
这个时候，写一个组件，传极少的值，就可以做到让整个项目的echart保持一致，非常方便。
首先，写好组件内的options。我们项目风格比较简洁，所以就。。很简洁哈哈哈哈哈哈哈哈哈哈想要别的样式自己配置option就可以~
自适应图表.png
一般情况下echarts在加载完毕后就不会再变化了。
比如用户拖动窗口，虽然我们给图表的容器设置了width为100%啥的但echarts就是死的。
今天的内容就是让echarts随着用户窗口的变化，重新加载。
（我感觉我说的非常之不专业。。。。但。。应该是说清楚了吧？）
首先，组件的内容 ↓
<template>
<div class="chart" style="height: 100%">
<!-- 装图表的容器。宽度默认100%，给个高度就行啦 -->
<div ref="chart" style="height: 100%"></div>
</div>
</template>
<script>
// 防抖的方法，上篇自适应表格有具体内容
import { debounce } from "@/utils/utils";
export default {
data() {
return {
chart: null,
};
},
props: {
chartTitle: {
type: String,
default: "",
},
chartSubTitle: {
type: String,
default: "",
},
catagoryList: {
type: Array,
default: () => {},
},
valueList: {
type: Array,
default: () => {},
},
init: {
type: Boolean,
default: true,
},
},
methods: {
screenDynamic() {
// 这个方法和上篇里的resize是一个意思，就不写注释了~
// 如果父组件内有用到resize,子组件中就不建议使用了。好像会互相影响。。。。
let resize = debounce(() => {
this.chart.resize();
}, 100);
window.addEventListener("resize", resize, true);
this.$once("hook: beforeDestroy", () => {
window.removeEventListener("resize", resize, true);
});
},
initChart() {
// 为了避免两页中的图表互相影响，每次打开之前，先将chart移除
if (this.chart) {
this.chart.dispose();
}
this.chart = this.$echarts.init(this.$refs.chart, "light");
// option的设置参考官网就可以啦~
this.chart.setOption({
title: {
text: this.chartTitle,
subtext: this.chartSubTitle,
left: "center",
},
tooltip: {
trigger: "axis",
axiosPointer: {
type: "shadow",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "10%",
containLabel: true,
},
xAxis: {
type: "category",
data: this.catagoryList,
axisLabel: {
interval: 0,
rotate: 40,
show: true,
textStyle: {
fontSize: "8",
},
},
},
yAxis: {
type: "value",
},
series: [
{
type: "bar",
data: this.valueList,
label: {
show: true,
position: "inside",
},
},
],
});
},
},
mounted() {
this.screenDynamic();
},
watch: {
// 在父组件中会监听页面的resize事件，传值过来，就重新加载echarts
init(n, o) {
if (n != o) {
this.initChart();
}
},
},
};
</script>
父组件中使用时 ↓
<!-- 将图表外面的容器高度设置成动态的 -->
<div
class="bar-chart"
:style="{height: `${chartHeight}px` }"
>
<bar-chart
:chartTitle="'乡镇有效转诊人次'"
:chartSubTitle="subTitle"
:catagoryList="catagory"
:valueList="number"
:startTime="beginTime"
:endTime="endTime"
:init="initChart"
/>
</div>
data中定义 ↓
data() {
return {
chartHeight: 0,
// initChart是监听到页面变化后，给子组件传个值，该值发生变化，随即在子组件中initChart
initChart: false,
subTitle: ''
};
},
methods中 ↓ （这里与上篇中的内容差不多~~）
screenResize() {
window.addEventListener("resize", this.getHeight, true);
this.$once("hook:beforeDestroy", () => {
window.removeEventListener("resize", this.getHeight, true);
});
},
getHeight() {
// 这里的方法与上篇一样，都是在utils中写好的获取屏幕高度，然后减去固定元素高度的方法
setTimeout(() => {
this.chartHeight =
getDynamicHeight(this.$refs.searchContainer).height - 30;
}, 100);
},
getBar() {
let catagory = [];
let number = [];
// 获取图表所需的数据
let params = {
pageNum: 1,
pageSize: 30,
beginTime: this.beginTime,
endTime: this.endTime,
};
this.subTitle = `统计数据日期${this.beginTime}至${this.endTime}`;
selectSumByReferral(params).then((response) => {
if (
response.code == 200 &&
response.success &&
response.totalCount > 0
) {
response.content.forEach((item) => {
catagory.push(item.regionName);
number.push(item.zzl);
});
this.catagory = catagory;
this.number = number;
this.initChart = !this.initChart;
} else {
this.tableData = [];
this.catagory = [];
this.number = [];
this.initChart = !this.initChart;
return;
}
});
},
网友评论