使用的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有异曲同工之妙啊