<template>
<div class="chart-container">
<div class="chart-header">
<!--标题 -->
<span class="title">{{ name }}</span>
</div>
<div class="chart-content" :style="{ 'height': height, 'width': width }">
<!-- echarts内容 -->
<MixChart
:xAxisData="xAxisData"
:seriesData="seriesData"
:yAxisData="yAxisData"
:legend="legend"
width="600px"
height="400px"
/>
</div>
</div>
</template>
<script>
import MixChart from "../../../components/echart/barChart/MixChart.vue";
export default {
name: "supplierCommon",
components: {
MixChart,
},
props: {
name: {
type: String,
default: "",
},
width: {
type: String,
default: "500px",
},
height: {
type: String,
default: "300px",
},
fetchdata: {
type: Function,
required: true,
},
},
data() {
return {
seriesData: [],
xAxisData: [],
yAxisData: [],
legend: [],
};
},
mounted() {
// this.fetchData(); // 真实数据接口，后期接口完成直接打开使用
setTimeout(() => {
// 模拟数据
this.seriesData = [
{
name: "资料预审个数",
type: "bar",
tooltip: {
valueFormatter: function (value) {
return value;
},
},
data: [10, 15, 13, 19, 22, 9, 33],
},
{
name: "预审通过率",
type: "line",
data: [1.1, 1.6, 1.3, 0.9, 0.1, 2.2, 0.4],
},
];
this.xAxisData = ["10-1", "10-2", "10-3", "10-4", "10-5", "10-6", "10-7"];
this.yAxisData = [
{
type: "value",
show: true,
axisLabel: {
formatter: "{value}",
fontSize: 12,
color: "#000",
},
axisLine: {
show: false,
},
splitLine: {
//多条横线
show: true,
},
interval: 20,
},
{
type: "value",
show: true,
axisLabel: {
formatter: "{value}%",
fontSize: 12,
color: "#000",
},
splitLine: {
//多条横线
show: true,
},
axisLine: {
show: false,
},
interval: 20,
},
];
this.legend = ["资料预审个数", "预审通过率"];
},1000);
},
watch: {
// value(newVal) {
// // 根据选择的选项获取不同的数据
// if (newVal === "12") {
// this.seriesData = [
// {
// name: "Evaporation",
// type: "bar",
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
// data: [
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
// 3.3,
// ],
// },
// {
// name: "Precipitation",
// type: "bar",
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
// data: [
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
// 2.3,
// ],
// },
// {
// name: "Temperature",
// type: "line",
// yAxisIndex: 1,
// tooltip: {
// valueFormatter: function (value) {
// return value + " °C";
// },
// },
// data: [
// 2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
// ],
// },
// ];
// } else {
// this.seriesData = [
// {
// name: "Evaporation",
// type: "bar",
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
// data: [
// 22.0, 43.9, 17.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
// 3.3,
// ],
// },
// {
// name: "Precipitation",
// type: "bar",
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
// },
// },
// data: [
// 12.6, 15.9, 29.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
// 2.3,
// ],
// },
// {
// name: "Temperature",
// type: "line",
// yAxisIndex: 1,
// tooltip: {
// valueFormatter: function (value) {
// return value + " °C";
// },
// },
// data: [
// 42.0, 2.2, 3.3, 94.5, 36.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0,
// 16.2,
// ],
// },
// ];
// }
// },
},
methods: {
fetchData() {
this.fetchdata().then((res) => {
if (this.name === "供应商资料预审统计") {
let date = [];
let passRatio = [];
let preViewCount = [];
for (var i = 0; i < res.data.length; i++) {
date.push(res.data[i].data);
passRatio.push(res.data[i].passRatio);
preViewCount.push(res.data[i].preViewCount);
}
this.seriesData = [
{
name: "资料预审个数",
type: "bar",
data: preViewCount,
barWidth:'20%'
},
{
name: "预审通过率",
type: "line",
data: passRatio,
tooltip: {
valueFormatter: function (value) {
return `{value}`;
},
},
},
];
this.xAxisData = date;
this.yAxisData = [
{
type: "value",
show: true,
axisLabel: {
formatter: "{value}",
fontSize: 12,
color: "#000",
},
axisLine: {
show: false,
},
splitLine: {
//多条横线
show: true,
},
interval: 20,
},
{
type: "value",
show: true,
axisLabel: {
formatter: "{value}",
fontSize: 12,
color: "#000",
},
axisLine: {
show: false,
},
splitLine: {
//多条横线
show: true,
},
interval: 20,
},
];
} else {
let date = [];
let passRatio = [];
let inputViewCount = [];
for (var i = 0; i < res.data.length; i++) {
date.push(res.data[i].data);
passRatio.push(res.data[i].passRatio);
inputViewCount.push(res.data[i].inputViewCount);
}
this.seriesData = [
{
name: "录库评审个数",
type: "bar",
data: inputViewCount,
barWidth:'20%'
},
{
name: "录库评审通过率",
type: "line",
data: passRatio,
},
];
this.xAxisData = date;
this.yAxisData = [
{
type: "value",
show: true,
axisLabel: {
formatter: "{value}",
fontSize: 12,
color: "#000",
},
axisLine: {
show: false,
},
splitLine: {
//多条横线
show: true,
},
interval: 20,
},
{
type: "value",
show: true,
axisLabel: {
formatter: "{value}",
fontSize: 12,
color: "#000",
},
axisLine: {
show: false,
},
splitLine: {
//多条横线
show: true,
},
interval: 20,
},
];
}
});
},
},
};
</script>
<style lang="scss" scoped>
.chart-container {
.chart-header {
width: 600px;
align-items: center;
display: flex;
justify-content: space-between;
}
.chart-content {
// width: 600px;
// height: 400px;
}
}
</style>
