Vue+Typescript项⽬中使⽤echarts
⽅案⼀：推荐
在typescript+Vue的项⽬中引⽤echarts，为了加强引⽤，引⼊echarts和@types/echarts两个包，⼀个是⼯程依赖，⼀个是声明依赖。
npm install echarts --save
npm install --save @types/echarts
然后在需要引⽤echarts的组件中引⼊echarts
<script lang="ts">
……
import echarts from 'echarts';
……
</script>
然后设置好option选项，将图表渲染在DOM⾥：
// HTML部分
<div ref="chart"></div>
// Script部分
option={};
const Chart = echarts.init(this.$refs.chart as HTMLCanvasElement);
Chart.setOption(this.option);
按理来说是这样的，然后我run的时候图表显⽰也是正确的，但是控制台爆出了类型不兼容的错误，如下：
Argument of type '{ color: string[]; legend: { data: { name: string; textStyle: { color: string; fontSize: number; }; }[]; right: number; top: number; itemWidth: number; itemHeight: number; padding: number; itemGap: number; }; xAxis: { ...; }; yAxis: { ..  Types of property 'xAxis' are incompatible.
Type '{ type: string; data: string[]; boundaryGap: boolean; axisLabel: { textStyle: { color: string; }; }; axisLine: { lineStyle: { type: string; color: string[]; width: string; }; }; }' is not assignable to type 'XAxis | XAxis[] | undefined'.
Type '{ type: string; data: string[]; boundaryGap: boolean; axisLabel: { textStyle: { color: string; }; }; axisLine: { lineStyle: { type: string; color: string[]; width: string; }; }; }' is not assignable to type 'XAxis'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"value" | "category" | "time" | "log" | undefined'.
124 |    draw() {
125 |        const Chart = echarts.init(this.$refs.chart as HTMLCanvasElement);
> 126 |        watchChart.setOption(this.option);
最后发现所有在@type/echarts（node_modules/@types/echarts/index.d.ts）⾥⾯声明的⼀些联合变量类型，类似于下图所⽰的这种，都会出现这种问题:
type Type = 'value' | 'category' | 'time' | 'log'; 是给"'value' | 'category' | 'time' | 'log'"给了⼀个别名Type  ，详见：
也可以说是⼀个字符串字⾯量类型，详见：
我在引⽤处代码⾥⾯option配置是：
因为声明的时候type是个联合类型，⽽不是type?:string这种类型，所以导致直接配置参数出现错误：
最后查看了⽹上的解决办法：
可以直接const ec = echarts as any; 但是这种做法很不可取。
最后在到了解决办法，可以采⽤⼀个简单的类型断⾔来告诉 TypeScript 想推断的字⾯量：
在本实例中就是：
option = {
xAxis: {
type: ('category' as 'category'),
axisLine: {
lineStyle: {
type: ('dashed' as 'dashed'),
},
},
},
}
到此，完美解决了我的问题（其实是个⼤神帮我到的解决⽅法，在此感谢所有的前辈们）。
⽅案⼆：成功但是不够严谨
script在html中的用法最后删除了 @types/echarts ，在 echarts.d.ts 中⾃定义了 echarts 的声明，declare module 'echarts' {
const echarts: any;
export default echarts;
}
然后引⽤成功并且没有爆出类型错误，但是失去了ts强引⽤的优势。
⽅案三：简单直接
直接越过ts的类型检查………………………………………………

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。