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

相关文章

前端 CSS 动态设置样式::class、:style 等技巧(推荐)

《前端CSS动态设置样式::class、:style等技巧(推荐)》:本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法:对象语法和数组语法,通过对象语法,可以根据条件动态切换类名或样式;通过数组语法,可以同时绑定多个类名或样式,此外,还可以结合计算属性来生成复杂的类名或样式对象,详细内容请阅读本文,希望能对你有所帮助...

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》:本文主要介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,详细内容请阅读本文,希望能对你有所帮助... 在前端开发中,禁止htm

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态

spring-boot-starter-thymeleaf加载外部html文件方式

《spring-boot-starter-thymeleaf加载外部html文件方式》本文介绍了在SpringMVC中使用Thymeleaf模板引擎加载外部HTML文件的方法,以及在SpringBoo... 目录1.Thymeleaf介绍2.springboot使用thymeleaf2.1.引入spring

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

在MySQL执行UPDATE语句时遇到的错误1175的解决方案

《在MySQL执行UPDATE语句时遇到的错误1175的解决方案》MySQL安全更新模式(SafeUpdateMode)限制了UPDATE和DELETE操作,要求使用WHERE子句时必须基于主键或索引... mysql 中遇到的 Error Code: 1175 是由于启用了 安全更新模式(Safe Upd

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

css渐变色背景|<gradient示例详解

《css渐变色背景|<gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变,本文介绍css渐变色背景|<gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景,可以看做是一种特殊的背景图片。(是作为背