背景

操作系统：win10
编辑器：vscode
项目：vue cli3 + typescript
目的：在typescript项目中正常使用echarts、highcharts

引入使用echarts

1、安装echarts及其声明文件

npm i echarts -D
npm i @types/echarts -D

2、引入

import Echarts from "echarts";
Vue.prototype.$echarts = Echarts;

3、使用
创建画图组件如下：

//src/components/common/echarts.vue
<template>
  <div>
    <div id="myEcharts" style="height:400px"></div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({})
export default class ChartE extends Vue {
  public $echarts: any;
  private options: object = {
    //里面写要显示的echarts图标
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: "line"
      }
    ]
  };
  private mounted() {
    const ele = document.getElementById("myEcharts");
    const chart: any = this.$echarts.init(ele);
    //调接口获取数据
    chart.setOption(this.options);
  }
}
</script>

<style scoped></style>

在视图组件中引入：

<template>
  <div>
    <ChartE></ChartE>
  </div>      
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import ChartE from "@components/common/echarts.vue";

@Component({
  components: {
    ChartE
  }
})
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

效果：

image.png

引入使用highcharts

1、安装

npm i highcharts -D
npm i @types/highcharts -D

2、引入

import Highcharts from "highcharts";
Vue.prototype.$Highcharts = Highcharts;

3、使用
创建画图组件如下：

//src/components/common/highcharts.vue
<template>
  <div>
    <div id="myHighcharts" style="height:400px"></div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({})
export default class ChartH extends Vue {
  public $Highcharts: any;
  private options: object = {
    //里面写要显示的Highcharts
    title: {
      text: "2010 ~ 2016 年太阳能行业就业人员发展情况"
    },
    subtitle: {
      text: "数据来源：thesolarfoundation.com"
    },
    yAxis: {
      title: {
        text: "就业人数"
      }
    },
    legend: {
      layout: "vertical",
      align: "right",
      verticalAlign: "middle"
    },
    plotOptions: {
      series: {
        label: {
          connectorAllowed: false
        },
        pointStart: 2010
      }
    },
    series: [
      {
        name: "安装，实施人员",
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
      },
      {
        name: "工人",
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
      },
      {
        name: "销售",
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
      },
      {
        name: "项目开发",
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
      },
      {
        name: "其他",
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
      }
    ],
    responsive: {
      rules: [
        {
          condition: {
            maxWidth: 500
          },
          chartOptions: {
            legend: {
              layout: "horizontal",
              align: "center",
              verticalAlign: "bottom"
            }
          }
        }
      ]
    }
  };
  private mounted() {
    const ele = document.getElementById("myHighcharts");
    const chart: any = this.$Highcharts.chart(ele, this.options);
  }
}
</script>

<style scoped></style>

在视图组件中引入：

<template>
  <div>
    <ChartH></ChartH>
  </div>      
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import ChartH from "@components/common/highcharts.vue";

@Component({
  components: {
    ChartH
  }
})
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

效果：

image.png