vue-echarts-ts

Vue custom component based on Vue2.x and Echarts with typescript

Features

• Vue echarts component: Can directly be used in vue-typescirpt project as a custom component.Has already completed echarts instance initiation and handled window resizing.Can operate echarts instance to dispatch actions and other.
• Typescript supported: Developed and exported with typescript.Support @types/echarts definitions.

Install

npm i vue-echarts-ts

Init

import Vue from 'vue';
import VueEcharts from 'vue-echarts-ts';

Vue.use(VueEcharts);

SimpleUse

<template>
  <div class="home">
    <VueEcharts :option="option" :ei.sync="ei"></VueEcharts>
    <button @click="dipatchAction()">Dispatch</button>
  </div>
</template>

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

@Component
export default class Home extends Vue {
  private option = {
    series: [
      {
        type: "pie",
        data: [{ name: "cat", value: 100 }, { name: "dog", value: 180 }]
      }
    ]
  };
  private ei: any | ECharts = {};
  private dipatchAction() {
    this.ei.dispatchAction({
      type: "pieSelect",
      name: "cat"
    });
  }
}
</script>

Document

• option:

  echartsOption,see EchartsOption.

• ei:

  echartsInstance,see EchartsApi.

License

MIT

Support

Modern browsers and Internet Explorer 10+, include pc and mobile browser.