Vue3+Vite+Echarts 出现Missing semicolon错误

2024-09-05 19:12

本文主要是介绍Vue3+Vite+Echarts 出现Missing semicolon错误,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

使用的echarts代码如下:
 

import * as echarts from 'echarts';type EChartsOption = echarts.EChartsOption;var chartDom = document.getElementById('main')!;
var myChart = echarts.init(chartDom);
var option: EChartsOption;option = {series: [{type: 'gauge',center: ['50%', '60%'],startAngle: 200,endAngle: -20,min: 0,max: 60,splitNumber: 12,itemStyle: {color: '#FFAB91'},progress: {show: true,width: 30},pointer: {show: false},axisLine: {lineStyle: {width: 30}},axisTick: {distance: -45,splitNumber: 5,lineStyle: {width: 2,color: '#999'}},splitLine: {distance: -52,length: 14,lineStyle: {width: 3,color: '#999'}},axisLabel: {distance: -20,color: '#999',fontSize: 20},anchor: {show: false},title: {show: false},detail: {valueAnimation: true,width: '60%',lineHeight: 40,borderRadius: 8,offsetCenter: [0, '-15%'],fontSize: 60,fontWeight: 'bolder',formatter: '{value} °C',color: 'inherit'},data: [{value: 20}]},{type: 'gauge',center: ['50%', '60%'],startAngle: 200,endAngle: -20,min: 0,max: 60,itemStyle: {color: '#FD7347'},progress: {show: true,width: 8},pointer: {show: false},axisLine: {show: false},axisTick: {show: false},splitLine: {show: false},axisLabel: {show: false},detail: {show: false},data: [{value: 20}]}]
};setInterval(function () {const random = +(Math.random() * 60).toFixed(2);myChart.setOption<echarts.EChartsOption>({series: [{data: [{value: random}]},{data: [{value: random}]}]});
}, 2000);option && myChart.setOption(option);

 出现该报错一般是符号缺少(semicolon 分号的意思),仔细检查后并无发现符号缺失或半角全角误用,仔细观察代码发现是type XX = xx,恍然大悟,需要将其改为lang = 'ts'

<script setup lang ='ts'>

遇到该报错的提示和跨域报错404有异曲同工之妙啊 

这篇关于Vue3+Vite+Echarts 出现Missing semicolon错误的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1139826

相关文章

Nginx错误拦截转发 error_page的问题解决

《Nginx错误拦截转发error_page的问题解决》Nginx通过配置错误页面和请求处理机制,可以在请求失败时展示自定义错误页面,提升用户体验,下面就来介绍一下Nginx错误拦截转发error_... 目录1. 准备自定义错误页面2. 配置 Nginx 错误页面基础配置示例:3. 关键配置说明4. 生效

HTML5的input标签的`type`属性值详解和代码示例

《HTML5的input标签的`type`属性值详解和代码示例》HTML5的`input`标签提供了多种`type`属性值,用于创建不同类型的输入控件,满足用户输入的多样化需求,从文本输入、密码输入、... 目录一、引言二、文本类输入类型2.1 text2.2 password2.3 textarea(严格

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存,通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流

SpringBoot项目整合Netty启动失败的常见错误总结

《SpringBoot项目整合Netty启动失败的常见错误总结》本文总结了SpringBoot集成Netty时常见的8类问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录一、端口冲突问题1. Tomcat与Netty端口冲突二、主线程被阻塞问题1. Netty启动阻

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现(SpringBoot)前端实现(vue3)1. 数据类型定义2.

SpringBoot整合Kafka启动失败的常见错误问题总结(推荐)

《SpringBoot整合Kafka启动失败的常见错误问题总结(推荐)》本文总结了SpringBoot项目整合Kafka启动失败的常见错误,包括Kafka服务器连接问题、序列化配置错误、依赖配置问题、... 目录一、Kafka服务器连接问题1. Kafka服务器无法连接2. 开发环境与生产环境网络不通二、序

解决java.util.RandomAccessSubList cannot be cast to java.util.ArrayList错误的问题

《解决java.util.RandomAccessSubListcannotbecasttojava.util.ArrayList错误的问题》当你尝试将RandomAccessSubList... 目录Java.util.RandomAccessSubList cannot be cast to java.

前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

《前端VisualStudioCode安装配置教程之下载、汉化、常用组件及基本操作》VisualStudioCode是微软推出的一个强大的代码编辑器,功能强大,操作简单便捷,还有着良好的用户界面,... 目录一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2

Java编译错误java.lang.NoSuchFieldError的解决方案详析

《Java编译错误java.lang.NoSuchFieldError的解决方案详析》java.lang.NoSuchFieldError是Java中的一种运行时错误,:本文主要介绍Java编译错... 目录前言解决方案1. 统一JDK版本环境2. 优化maven-compiler-plugin配置3. 清

Navicat连接Mysql8.0.11出现1251错误的解决方案

《Navicat连接Mysql8.0.11出现1251错误的解决方案》在重装电脑并安装最新版MySQL后,Navicat和Sqlyog连接MySQL时遇到的1251和2058错误,通过将MySQL用户... 目录Navicat连接mysql8.0.11出现1251错误原因分析解决问题方法有两种总结Navic