阅读数:136 评论数:0

1、安装依赖

npm install echarts --save
npm install --save @types/echarts

前者是工程依赖，后者是声明依赖。

2、引用

可以全局引入，也可以在需要引用echarts的组件中引入echarts。

<script lang="ts">
……
import echarts from 'echarts';
……
</script>

3、设置option选项，将图表渲染在dom里。

// HTML部分
<div ref="chart"></div>

// Script部分
option = {
        xAxis: {
                  // 类型断言告诉TypeScript想推断的字面量
            type: ('category' as 'category'),
            axisLine: {
                lineStyle: {
                    type: ('dashed' as 'dashed'),
                },
            },
        },
}
const Chart = echarts.init(this.$refs.chart as HTMLCanvasElement);
// @ts-ignore  跳过ts的类型检查 
        Chart.setOption(this.option);