方案一:推荐

在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: { ...; }; grid: { ...; }; series: { ...; }[]; }' is not assignable to parameter of type 'EChartOption<SeriesBar | SeriesBoxplot | SeriesCandlestick | SeriesCustom | SeriesEffectScatter | SeriesFunnel | SeriesGauge | SeriesGraph | SeriesHeatmap | SeriesLine | SeriesLines | ... 10 more ... | SeriesTreemap>'.
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  ,详见:  https://ts.xcatliu.com/advanced/type-aliases.html

也可以说是一个字符串字面量类型,详见: https://ts.xcatliu.com/advanced/string-literal-types.html

我在引用处代码里面option配置是:

因为声明的时候type是个联合类型,而不是type?:string这种类型,所以导致直接配置参数出现错误:

最后查看了网上的解决办法:https://zhuanlan.zhihu.com/p/28902584

可以直接 const ec = echarts as any; 但是这种做法很不可取。

最后在 https://jkchao.github.io/typescript-book-chinese/typings/literals.html#%E6%8E%A8%E6%96%AD 找到了解决办法,可以采用一个简单的类型断言来告诉 TypeScript 想推断的字面量:

在本实例中就是:

option = {
xAxis: {
type: ('category' as 'category'),
axisLine: {
lineStyle: {
type: ('dashed' as 'dashed'),
},
},
},
}

到此,完美解决了我的问题(其实是个大神帮我找到的解决方法,在此感谢所有的前辈们)。

方案二:成功但是不够严谨

最后删除了 @types/echarts ,在 echarts.d.ts 中自定义了 echarts 的声明 ,

declare module 'echarts' {
const echarts: any;
export default echarts;
}

然后引用成功并且没有爆出类型错误,但是失去了ts强引用的优势。

方案三:简单直接

直接越过ts的类型检查………………………………………………

Vue+Typescript项目中使用echarts的更多相关文章

  1. vue + typescript 项目起手式

    https://segmentfault.com/a/1190000011744210 2017-10-27 发布 vue + typescript 项目起手式 javascript vue.js t ...

  2. 在 Ionic2 TypeScript 项目中导入第三方 JS 库

    原文发表于我的技术博客 本文分享了在Ionic2 TypeScript 项目中导入第三方 JS 库的方法,供参考. 原文发表于我的技术博客 1. Typings 的方式 因在 TypeScript 中 ...

  3. 在react项目中使用ECharts

    这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法. 我们在使用ECharts之 ...

  4. vue项目中引用echarts的几种方式

    准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或   ...

  5. 在vue项目中封装echarts的正确姿势

    为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记 ...

  6. Vue系列——在vue项目中使用echarts

    该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像安装 npm install -g cnpm --registry= ...

  7. 使用Vue-cli3搭建Vue+TypeScript项目

    一,创建项目 使用 npm 安装 vue-cli 3 和typescript npm i -g @vue/cli typescript 使用vue create命令快速搭建新项目的脚手架 vue cr ...

  8. Wabpack系列:在webpack+vue开发环境中使用echarts导致编译文件过大怎么办?

    现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...

  9. Vue 实际项目中你可能会遇见的坑

    纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...

随机推荐

  1. 隐马尔科夫模型python实现简单拼音输入法

    在网上看到一篇关于隐马尔科夫模型的介绍,觉得简直不能再神奇,又在网上找到大神的一篇关于如何用隐马尔可夫模型实现中文拼音输入的博客,无奈大神没给可以运行的代码,只能纯手动网上找到了结巴分词的词库,根据此 ...

  2. IOS开发之自动布局显示网络请求内容

    在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的改变,在App开发中为了适应不同尺寸的手机屏幕,用自动布局来完成我们想要实现的功能和效果显得尤为重要.本人更喜欢使用相对布 ...

  3. Java发送socket请求的工具

    package com.tech.jin.util; import java.io.ByteArrayOutputStream; import java.io.IOException; import ...

  4. C#简易一元二次求解器

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  5. 如何创建vss2005的数据库

    配置如下 VSS手工创建数据库的步骤(设数据库根目录为D:\VSS): 1.在根目录中创建名为srcsafe.ini(全局配置文件)的文件,文件内容如下: Data_Path = data Temp_ ...

  6. Python迭代器:捕获Generator的返回值

    但是用for循环调用generator时,发现拿不到generator的return语句的返回值.如果想要拿到返回值,必须捕获StopIteration错误,返回值包含在StopIteration的v ...

  7. MYSQL数据备份与还原学习笔记

    数据备份与还原   1.mysqldump 1.1 文件地址: E:\xampp\mysql\bin 文件名:mysqldump.exe CMD下进入mysqldump.exe cd E:\xampp ...

  8. mysql_常用命令

    1: 以指定编码创建数据库 CREATE DATABASE `search_data` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci

  9. leetcode 442. Find All Duplicates in an Array 查找数组中的所有重复项

    https://leetcode.com/problems/find-all-duplicates-in-an-array/description/ 参考:http://www.cnblogs.com ...

  10. Git 配置命令设置

    目录 查看配置文件路径: 查看其他配置命令: 修改配置文件默认路径: 查看配置文件路径: 查看系统级别配置: git config -e –-system D:/Program Files/Git/m ...