记录vue3 echarts搭建数据可视化页面！

提示：记录一下写页面的时候遇到过的一些小问题！

一、页面布局

页面布局就是简单的用了个三栏式布局，在写页面的过程中对于多个页面共同使用的部分要注意善用组件复用，避免写冗余重复的代码！
比如说对于需要重复使用的图表容器，可以将其注册为全局组件V3Echarts.vue，当需要表示图表时，可直接引入，然后利用props传值，将Echarts图表需要的options传给V3Echarts组件即可；
以及对于图表options，可以将其封装到一个ts文件中，将其暴露出去，当需要的时候引入即可；

整体使用vite搭建的vue3-ts项目，页面大抵如下！(就不放多个页面了，都差不多，我也知道没有多好看，会继续优化的！）

二、遇到的问题(主要在于Echarts图表版本过高使用的配置项该版本已经淘汰而导致的控制台警告)

1.[ECharts] DEPRECATED:[radar.indicator]text is deprecated, use name instead.

其实中文翻译过来就能知道是说radar.indicator这个配置项中的数据中的text键值需要替换为name；

//错误写法！
const indicator = [
        {
            text: '信访',
            max: 6000,
        },
        {
            text: '网访',
            max: 5000
        },
        {
            text: '电访',
            max: 5000
        },
        {
            text: '邮访',
            max: 5000,
        },
        {
            text: '来访',
            max: 5000
        }
    ];
radar: {
            indicator: indicator,
            // shape: 'circle',
            axisName: {
                color: '#fff',
                fontSize: 14
            },
}

Echarts最新版本写法！

//在radar中使用indicator的时候，数据需要将键名text改为name就不会报错啦！
const indicator = [
        {
            name: '信访',
            max: 6000,
        },
        {
            name: '网访',
            max: 5000
        },
        {
            name: '电访',
            max: 5000
        },
        {
            name: '邮访',
            max: 5000,
        },
        {
            name: '来访',
            max: 5000
        }
    ];

2.[ECharts] DEPRECATED: textStyle hierarchy in lable has been removed since 4.0 All textStyle properties…

其实这个问题也是一样的，最新版本的Echarts5弃用了在lable配置项中再写一个textStyle配置项的操作，直接将原本在textStyle中写的配置，放到lable配置下即可！

总结

写页面的过程中也没有遇到什么比较难的问题，编写页面的过程中，也是自己复习温习锻炼的一个过程，要再继续加油！