记录vue3+echarts搭建数据可视化页面！-Toy模板网

这篇具有很好参考价值的文章主要介绍了记录vue3+echarts搭建数据可视化页面！。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

一、页面布局

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

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

vue3可视化编辑页面,echarts,javascript,ecmascript

二、遇到的问题(主要在于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
        }
    ];