153 lines
3.6 KiB
Vue
153 lines
3.6 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
ref="chart"
|
||
|
|
style="width: 100%"
|
||
|
|
:style="{ height: vHeight + 'vh' }"
|
||
|
|
></div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import chartMixin from "@/mixins/chart.js";
|
||
|
|
export default {
|
||
|
|
name: "Store",
|
||
|
|
mixins: [chartMixin],
|
||
|
|
props: {
|
||
|
|
vHeight: {
|
||
|
|
type: Number,
|
||
|
|
default: 34,
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
series: {
|
||
|
|
type: Array,
|
||
|
|
required: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isFullscreen: false,
|
||
|
|
actualOptions: null,
|
||
|
|
options: {
|
||
|
|
grid: {
|
||
|
|
left: "3%",
|
||
|
|
right: "1%",
|
||
|
|
bottom: "0",
|
||
|
|
top: "10%",
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
tooltip: {},
|
||
|
|
xAxis: {
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: "#4561AE",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: "rgba(255, 255, 255, 0.7)",
|
||
|
|
fontSize: 12,
|
||
|
|
},
|
||
|
|
data: this.xAxis,
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
name: "单位/片",
|
||
|
|
nameTextStyle: {
|
||
|
|
color: "rgba(255, 255, 255, 0.7)",
|
||
|
|
fontSize: 12,
|
||
|
|
align: "right",
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false,
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: "rgba(255, 255, 255, 0.7)",
|
||
|
|
fontSize: 12,
|
||
|
|
},
|
||
|
|
axisLine: {
|
||
|
|
show: true,
|
||
|
|
lineStyle: {
|
||
|
|
color: "#4561AE",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: "#4561AE",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: "", // this.series[0].name,
|
||
|
|
type: "bar",
|
||
|
|
barWidth: 12,
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: [10, 10, 0, 0],
|
||
|
|
color: {
|
||
|
|
type: "linear",
|
||
|
|
x: 0,
|
||
|
|
y: 0,
|
||
|
|
x2: 0,
|
||
|
|
y2: 1,
|
||
|
|
colorStops: [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: "#12f7f1", // 0% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 0.35,
|
||
|
|
color: "#12f7f177", // 100% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 0.75,
|
||
|
|
color: "#12f7f133", // 100% 处的颜色
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: "transparent", // 100% 处的颜色
|
||
|
|
},
|
||
|
|
],
|
||
|
|
global: false, // 缺省为 false
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data: [], // this.series[0].data,
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
series(val) {
|
||
|
|
if (!val) {
|
||
|
|
this.initOptions(this.options);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||
|
|
actualOptions.series[0].data = val[0].data;
|
||
|
|
actualOptions.series[0].name = val[0].name;
|
||
|
|
actualOptions.series[1].data = val[1].data;
|
||
|
|
actualOptions.series[1].name = val[1].name;
|
||
|
|
this.actualOptions = actualOptions;
|
||
|
|
this.initOptions(actualOptions);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
console.log("store");
|
||
|
|
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||
|
|
actualOptions.series[0].data = this.series[0].data;
|
||
|
|
actualOptions.series[0].name = this.series[0].name;
|
||
|
|
this.actualOptions = actualOptions;
|
||
|
|
this.initOptions(actualOptions);
|
||
|
|
|
||
|
|
// if (screenfull.isEnabled) {
|
||
|
|
// screenfull.on("change", () => {
|
||
|
|
// this.isFullscreen = screenfull.isFullscreen;
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style></style>
|