Ant Design Vue 使用 ECharts（vue、Typescript）

展示

　　

一、安裝依賴

　　npm install echarts --save

二、全局引用

　　import * as echarts from 'echarts'

　　Vue.prototype.$echarts = echarts

三、例VUE

<template>
  <div id="myChart" style="height: 300px; width: 600px"></div>
</template>

<script>
export default {
  name: "EChartsDemo",
  data() {
    return {
      msg: "ECharts Demo",
    };
  },
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      // 基於准備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 指定圖表的配置項和數據
      let option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: "#a90000",
                },
              },
              150,
              80,
              70,
              110,
              130,
            ],
            type: "bar",
          },
        ],
      };
      // 使用剛指定的配置項和數據顯示圖表。
      myChart.setOption(option);
    },
  },
};
</script>

四、例Typescript

<template>
  <div :style="{ background: '#fff', padding: '24px', minHeight: '83vh' }">
    <div
      id="myChart1"
      style="
        height: 500px;
        width: 800px;
        border: 1px solid red;
        display: inline-block;
      "
    ></div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({
  components: {},
})
export default class Report extends Vue {
  mounted() {
    this.drawChart();
    this.$emit("selectMenu", 3);
  }
  drawChart() {
    // 基於准備好的dom，初始化echarts實例
    let myChart1 = (this as any).$echarts.init(
      document.getElementById("myChart1")
    );// 指定圖表的配置項和數據
    let option1 = {
      title: {
        text: "Stacked Area Chart",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "Email",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "Union Ads",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: "Video Ads",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: "Direct",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: "Search Engine",
          type: "line",
          stack: "Total",
          label: {
            show: true,
            position: "top",
          },
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };// 使用剛指定的配置項和數據顯示圖表。
    myChart1.setOption(option1);
  }
}
</script>