|
|
@@ -1,19 +1,64 @@
|
|
|
<template>
|
|
|
<!-- 采购: 历史敞口-->
|
|
|
<div class="purchase-history">
|
|
|
- 采购:历史敞口
|
|
|
+ <div class="chart-main"
|
|
|
+ id="main"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
-import { defineComponent } from 'vue';
|
|
|
+import { defineComponent, onMounted } from 'vue';
|
|
|
import { initData } from '@/common/methods';
|
|
|
+import * as echarts from 'echarts/core';
|
|
|
+import {
|
|
|
+ BarChart,
|
|
|
+ // 系列类型的定义后缀都为 SeriesOption
|
|
|
+ BarSeriesOption,
|
|
|
+ LineChart,
|
|
|
+ LineSeriesOption,
|
|
|
+} from 'echarts/charts';
|
|
|
+import {
|
|
|
+ TitleComponent,
|
|
|
+ // 组件类型的定义后缀都为 ComponentOption
|
|
|
+ TitleComponentOption,
|
|
|
+ GridComponent,
|
|
|
+ GridComponentOption,
|
|
|
+} from 'echarts/components';
|
|
|
+import { CanvasRenderer } from 'echarts/renderers';
|
|
|
|
|
|
+// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
|
|
|
+type ECOption = echarts.ComposeOption<BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption>;
|
|
|
+
|
|
|
+// 注册必须的组件
|
|
|
+echarts.use([TitleComponent, GridComponent, LineChart, BarChart, CanvasRenderer]);
|
|
|
export default defineComponent({
|
|
|
name: 'purchase-history',
|
|
|
components: {},
|
|
|
setup() {
|
|
|
- initData(() => {});
|
|
|
+ const option = {
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ onMounted(() => {
|
|
|
+ const ele = document.getElementById('main') as HTMLElement;
|
|
|
+ const myChart = echarts.init(ele);
|
|
|
+ myChart.setOption(option);
|
|
|
+ });
|
|
|
+ initData(() => {
|
|
|
+ option;
|
|
|
+ });
|
|
|
return {};
|
|
|
},
|
|
|
});
|
|
|
@@ -21,6 +66,10 @@ export default defineComponent({
|
|
|
|
|
|
<style lang="less">
|
|
|
.purchase-history {
|
|
|
+ height: 100%;
|
|
|
+ .chart-main {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
</style
|
|
|
>;
|