ECharts

1 安装Echarts（本文以ts为例）

yarn add echarts
yarn add --dev @types/echarts //这是为了使webstorm可以对使用echarts进行提示

2.封装echarts

此步骤可以通过使用vue-echarts实现,方法见链接，但是因为在后续的使用过程中，发现了封装后统计图的数值无法进行点击交互，所以后面自己写了组件进行封装

<template>
    <div class="wrapper" ref="wrapper"></div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
    import * as echarts from 'echarts';
    import {EChartsOption, ECharts} from 'echarts';
    @Component
    export default class Chart extends Vue {
        @Prop() options?: EChartsOption;
        chart?: ECharts;
        mounted() {
            if (this.options === undefined) {
                return console.error('options 为空');
            }
            this.chart = echarts.init(this.$refs.wrapper as HTMLDivElement);
            this.chart.setOption(this.options);
        }
        @Watch('options')
        onOptionsChange(newValue: EChartsOption) {
            this.chart!.setOption(newValue);
        }
    }
</script>

<style scoped lang="scss">
    .wrapper {
        height: 400px;
    }
</style>

其中主要是要先init，然后在setOption里面传入option，option是由父组件传入的

<chart :options="x"></chart>

3 options里面的内容可通过阅读EChart文档获得

链接

通过阅读资源里的术语速查手册可快速了解使用方法

dayjs

1.引入

yarn add dayjs

2.为什么使用dayjs

在获取时间点的时候,通过const time = new Date()获取的是零时区的时间，要想获得正规的ISO 8601在中国的时间可以通过const time = new Date().ToISOString(),但是这样的时间并不规整，通过使用dayjs的api，如const time = dayjs(new Date().ToISOString()).format('YYYY-MM-DD'),可以获得如2021-02-01这样的日期，具体的api可以通过阅读官方文档获得

lodash

在项目中为了筛选一个对象的部分属性，使用了_.pick()

var object = { 'a': 1, 'b': '2', 'c': 3 };
 
_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }

lodash可以降低使用array，对象等的难度，具体可以通过阅读官方文档了解

如何在vue项目中引入Echarts,dayjs,lodash