108 lines
2.5 KiB
Vue
108 lines
2.5 KiB
Vue
<!--
|
|
* @Author: Kane
|
|
* @Date: 2023-03-04 16:09:31
|
|
* @LastEditors: Kane
|
|
* @FilePath: /task_schedule/src/components/ArchievementChartComponent.vue
|
|
* @Description: 业绩图表组件
|
|
*
|
|
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
|
-->
|
|
<template>
|
|
<div class="archievement-wrapper">
|
|
<div id="chartWrapper"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { reactive, computed, onMounted } from "vue";
|
|
import * as echarts from "echarts";
|
|
|
|
export default {
|
|
name: "ArchievementChartComponent",
|
|
props: {
|
|
chart_data: {
|
|
type: Array,
|
|
require: true,
|
|
},
|
|
},
|
|
setup(props)
|
|
{
|
|
const ui = reactive({
|
|
chart_data: props.chart_data,
|
|
});
|
|
|
|
//设置图表
|
|
const initCharts = () =>
|
|
{
|
|
const chartDom = document.getElementById("chartWrapper");
|
|
//@ts-ignore
|
|
const myChart = echarts.init((chartDom));
|
|
const option = {
|
|
xAxis: {
|
|
type: "category",
|
|
data: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二",],
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
data: [200, 400, 600, 800, 1000,],
|
|
},
|
|
series: [
|
|
{
|
|
data: props.chart_data,
|
|
type: "line",
|
|
},
|
|
],
|
|
};
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
window.onresize = function ()
|
|
{
|
|
//自适应大小
|
|
myChart.resize();
|
|
};
|
|
};
|
|
|
|
onMounted(() =>
|
|
{
|
|
initCharts();
|
|
});
|
|
|
|
return { ui, initCharts, };
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.archievement-wrapper {
|
|
height: 100%;
|
|
width: 100%;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// justify-content: center;
|
|
// align-items: stretch;
|
|
|
|
// span {
|
|
// display: block;
|
|
// width: 100%;
|
|
// color: #25e6e6;
|
|
// text-align: center;
|
|
|
|
// font: {
|
|
// size: 35px;
|
|
// family: "FZ-ZHUOHEI";
|
|
// }
|
|
|
|
// flex-grow: 0;
|
|
// }
|
|
|
|
#chartWrapper {
|
|
min-height: 200px;
|
|
width: 100%;
|
|
background-color: $color-charts-bg;
|
|
backdrop-filter: blur(10px);
|
|
flex-grow: 1;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
</style> |