[英]what is echart type in typescript Vue3
I am using Vu3 typescript.我正在使用 Vu3 typescript。 I wanted to inject echarts into the component.
我想将 echarts 注入到组件中。 but typescript keeps asking me what is a type of echarts that i injected.
但是 typescript 一直问我注入的 echarts 是什么类型。 that is why I used any type as a solution.
这就是为什么我使用任何类型作为解决方案的原因。 but I think It is not a good way.
但我认为这不是一个好方法。 can u guys tell me what is type of echarts.
你们能告诉我什么是 echarts 类型吗?
plugin file (where echarts was provided):插件文件(提供 echarts 的地方):
import * as echarts from "echarts";
import { App } from "vue";
export default {
install: (app: App) => {
app.provide("echarts", echarts);
},
};
component file:组件文件:
<template>
<div ref="theChart" :style="{ height: '500px' }"></div>
</template>
<script lang="ts">
import { defineComponent, inject } from "vue";
export default defineComponent({
name: "login",
components: {},
setup() {
const echarts: any = inject("echarts");
return {
echarts,
};
},
mounted() {
this.drawChart();
},
methods: {
drawChart() {
//Initialize the echarts instance based on the prepared dom
let myChart = this.echarts.init(this.$refs.theChart, null, { renderer: 'svg' });
//Specify configuration items and data for the chart
let option = {
title: {
text: "ECharts Introductory example",
},
tooltip: {},
legend: {
data: ["Sales volume"],
},
xAxis: {
data: [
"shirt",
"Cardigan",
"Chiffon shirt",
"trousers",
"High-heeled shoes",
"Socks",
],
},
yAxis: {},
series: [
{
name: "Sales volume",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
//Use the configuration items and data just specified to display the chart.
myChart.setOption(option, true);
},
},
});
</script>
when I write当我写
const echarts = inject("echarts");
it shows error TS2571: Object is of type 'unknown' for the following code它显示错误 TS2571: Object is of type 'unknown' for the following code
let myChart = this.echarts.init(this.$refs.theChart, null, { renderer: 'svg' });
there are two ways to resolve,You can choose a way that is convenient for you有两种解决方式,你可以选择一个方便你的方式
1、if you are using npm, the default ts type of echarts is in a separate npm package, you can try to introduce it instead of any 1、如果你使用的是npm,默认ts类型的echarts在单独的npm package中,你可以尝试引入它而不是any
npm install --save-dev @types/echarts
2、you can define adts file, define the types yourself 2、可以定义adts文件,自己定义类型
declare module "echarts" {
//the function or properties you may need to use
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.