最近在搞首页,会用到echarts做数据可视化,因为之前一直在写react,所以在vue这块经验略显不足,故记录一下。

一、安装echarts

1.script标签引入

在 www.jsdelivr.com/package/npm… 选择 dist/echarts.js，点击并保存为 echarts.js 文件。

2.从 npm 获取

npm install echarts --save

二、封装组件

初始化echarts

    var chartDom = document.getElementById('main')!;
    myChart = echarts.init(chartDom);

设置echarts配置

    myChart.setOption({
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line'
            }
        ]
    });

这样简单的设置后就可以看到效果了
如果写到这里就写完了,你们肯定会说垃圾就这我也会,你这不是标题党水文章吗,所以我打算继续水点东西....
直接上组件,我会在组件内写一些注释

1. 我封装的组件

下面这个组件是我封装的柱状图和折线图,因为只需要传一个type来区别,可以渲染成两个不同的图表,其他配置也大差不差,所以我将柱状图和折现图这两个图表放在同一个组件里

<!--
 * @Description: bar & line chart Component
 * @Author: YushengSenior
 * @Date: 2021-12-14 11:28:47
 * @LastEditTime: 2021-12-16 09:40:58
 * @LastEditors: YushengSenior
-->
<script setup lang='ts'>
import { defineProps, onMounted, watch, ref } from 'vue';
import { getUuid } from '@/utils'
import * as echarts from 'echarts';

const props = defineProps({
    smooth: {
        type: Boolean,
        default: () => false
    },
    chatrsType: {
        type: String,
        default: () => "bar"
    },
    color: {
        type: String,
        default: () => "#3E80BD"
    },
    data: {
        type: Object,
        default: () => {}
    },
    xConfig: {
        type: Object,
        default: () => {}
    },
})

const uuid = ref(getUuid())

// 声明一个chart实例
let myChart: any

const initEcharts = (): void => {
    /**
     * 如果这里用同一个id,会造成覆盖渲染,所以这里用了一个uuid
     */
    var chartDom = document.getElementById(`echarts-comp-${uuid.value}`)!;
    // 将初始化的图表实例挂载到外部实例
    myChart = echarts.init(chartDom);
}

/**
 * 为什么要在声明周期里调用初始化的方法,
 * 在外面setup直接初始化会报错,因为这个时候dom还没有创建
 */
onMounted(() => {
    initEcharts()
})

const setEchartsData = () => {
    myChart.setOption({
        xAxis: {
            type: 'category',
            data: props.data.xData,
            ...props.xConfig
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: props.data.yData,
                type: props.chatrsType,
                smooth: props.smooth
            }
        ],
        color: [
            props.color
        ]
    });
}

// 监听data变化,重新渲染echarts
watch(() => props.data, () => {
    setEchartsData()
})

</script>
<template>
    <div :id="`echarts-comp-${uuid}`" :style="{ width: '100%', height: '15rem' }"></div>
</template>

生成uuid的方法

export const getUuid = (): string => {
    var s = [];
    var hexDigits = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
    for (var i = 0; i < 36; i++) {
      s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
    }
    s[14] = "4"
    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)
    s[8] = s[13] = s[18] = s[23] = "-"
    let uuid = s.join("")
    return uuid
  }

父组件使用


const state = reactive({
    barData: {
        xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        yData: [150, 230, 224, 218, 135, 147, 260]
    },
})

<!-- axisLabel 设置interval属性为0是为了解决x轴宽度不够省略显示的问题 -->
<Charts
    :data="state.lineData"
    chatrsType="line"
    :smooth="true"
    :xConfig="{
        axisLabel: {
            interval: 0
        }
    }"
/>

页面效果(后端没数据,但绝对好用)

参考地址:

echarts官网
 js动态生成唯一id

vue3封装echarts柱状图和折线图