243 lines
5.1 KiB
Vue
243 lines
5.1 KiB
Vue
<!-- 柱状图，折线图 -->
|
||
<template>
|
||
<div style="width: 100%">
|
||
<span class="Breadcrumbs" v-if="Breadcrumbs">
|
||
<div v-for="(item, index) in breadcrumbsList" :key="index">
|
||
<span class="title">{{ item.title }}</span>
|
||
<span class="Separator" v-show="index + 1 != breadcrumbsList.length"
|
||
>/</span
|
||
>
|
||
</div>
|
||
</span>
|
||
<div :style="proportion" ref="echarts" id="echarts"></div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import echarts from 'echarts'
|
||
export default {
|
||
data() {
|
||
return {
|
||
myEcharts: null,
|
||
option: {},
|
||
sidebarRetract: null,
|
||
breadcrumbsList: [
|
||
{
|
||
title: "首页",
|
||
},
|
||
{
|
||
title: "活动管理",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
|
||
components: {},
|
||
|
||
computed: {},
|
||
|
||
mounted() {
|
||
this.myEcharts = echarts.init(this.$refs.echarts);
|
||
this.getEcharts();
|
||
window.addEventListener("resize", this.change);
|
||
},
|
||
|
||
watch: {
|
||
"$store.getters.sidebarRetract": {
|
||
deep: true,
|
||
handler(val) {
|
||
this.change();
|
||
},
|
||
},
|
||
DataCollection: {
|
||
deep: true,
|
||
handler(newVal, oldVal) {
|
||
this.getEcharts();
|
||
},
|
||
},
|
||
},
|
||
|
||
props: {
|
||
// 面包屑的显示与隐藏
|
||
Breadcrumbs: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
// 尺寸
|
||
proportion: {
|
||
type: Object,
|
||
default: () => {
|
||
return {
|
||
width: "700px",
|
||
height: "700px",
|
||
};
|
||
},
|
||
},
|
||
// 标题
|
||
title: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
// 数据集合
|
||
DataCollection: {
|
||
type: Object,
|
||
require: true,
|
||
default: () => {
|
||
return {};
|
||
},
|
||
},
|
||
// // 列标题 ['蒸发量', '渲染']
|
||
// columnHeader: {
|
||
// type: Array,
|
||
// required: true,
|
||
// default: () => {
|
||
// return []
|
||
// }
|
||
// },
|
||
// // 维度 ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||
// Dimension: {
|
||
// type: Array,
|
||
// required: true,
|
||
// default: () => {
|
||
// return []
|
||
// }
|
||
// },
|
||
// series: {
|
||
// type: Array,
|
||
// required: true,
|
||
// default: () => {
|
||
// return []
|
||
// }
|
||
// }
|
||
},
|
||
|
||
methods: {
|
||
change() {
|
||
this.myEcharts.resize();
|
||
},
|
||
getEcharts() {
|
||
let _this = this;
|
||
const colors = [
|
||
"#224ef5",
|
||
"#e33722",
|
||
"#ffcc2c",
|
||
"#C1232B",
|
||
"#B5C334",
|
||
"#FCCE10",
|
||
"#E87C25",
|
||
"#27727B",
|
||
"#FE8463",
|
||
"#9BCA63",
|
||
"#FAD860",
|
||
"#F3A43B",
|
||
"#60C0DD",
|
||
"#D7504B",
|
||
"#C6E579",
|
||
"#F4E001",
|
||
"#F0805A",
|
||
"#26C0C0",
|
||
"#FAD860",
|
||
"#F3A43B",
|
||
"#60C0DD",
|
||
"#D7504B",
|
||
"#C6E579",
|
||
"#F4E001",
|
||
"#F0805A",
|
||
"#26C0C0",
|
||
];
|
||
this.option = {
|
||
color: colors,
|
||
title: {
|
||
text: "", //标题
|
||
subtext: "",
|
||
},
|
||
tooltip: {
|
||
trigger: "axis",
|
||
},
|
||
grid: {
|
||
left: "2%",
|
||
right: "2%",
|
||
bottom: "10%",
|
||
top: "2%",
|
||
containLabel: true,
|
||
},
|
||
legend: {
|
||
data: this.DataCollection.title,
|
||
align: "right",
|
||
right: 5,
|
||
textStyle: {
|
||
color: "#000",
|
||
},
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
itemGap: 35,
|
||
x: "center",
|
||
y: "bottom",
|
||
padding: [20, 0, 0, 0],
|
||
},
|
||
toolbox: {
|
||
show: false,
|
||
feature: {
|
||
mark: { show: true }, //数据视图
|
||
dataView: { show: true, readOnly: false }, //折线视图
|
||
magicType: { show: true, type: ["line", "bar"] }, //柱状视图
|
||
restore: { show: true }, //刷新
|
||
saveAsImage: { show: true }, //保存为图片
|
||
},
|
||
},
|
||
calculable: true,
|
||
xAxis: [
|
||
{
|
||
type: "category",
|
||
axisLabel: { interval: 0, rotate: 60 },
|
||
data: this.DataCollection.parameter,
|
||
},
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: "value",
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#000",
|
||
},
|
||
},
|
||
"splitLine": {
|
||
"lineStyle": {
|
||
"type": "dashed", // 设置为虚线
|
||
"color": "#ccc", // 设置分隔线颜色
|
||
"length": 10, // 虚线的长度
|
||
"interval": 5 // 虚线的间隔
|
||
}
|
||
}
|
||
},
|
||
],
|
||
series: this.DataCollection.series,
|
||
};
|
||
this.myEcharts.setOption(this.option);
|
||
this.myEcharts.on("click", function (params) {
|
||
_this.echartsClick(params);
|
||
});
|
||
},
|
||
echartsClick(e) {
|
||
console.log("点击", e);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.Breadcrumbs {
|
||
margin: 10px 0 10px 10px;
|
||
display: flex;
|
||
font-size: 13px;
|
||
.title {
|
||
cursor: pointer;
|
||
}
|
||
.Separator {
|
||
display: inline-block;
|
||
margin: 0 9px;
|
||
color: #c0c4cc;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
</style>
|