Usually in the project to achieve data visualization, you can use Baidu’s open source chart library Echarts, according to the needs of the project to draw and generate various types of charts, so how to introduce Echarts in Vue and package into a component call?

Directory:

1. Install echarts
2. Global import
3. On demand
4. Reference documents

1. Install echarts

Because some component modules (such as line charts, bar charts, prompt boxes, and title components) need to rely on the Echarts package that already contains all the charts and components when imported on demand via vue-Echarts, both need to be installed here:

npm install echarts vue-echarts -S
Copy the code

Of course, you can implement on-demand import without vue-Echarts, which is covered below.

use

2. Global import

In the entry file main.js:

import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Copy the code

Create a new mychart.vue component with the following content, where the option configuration is passed in as props when referencing the component.

<template>
  <div>
    <div :id="chartId" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
export default {
  name: "MyChart".props: {
    chartId: {
      type: String.required: true
    },
    width: {
      type: String.default: "500px"
    },
    height: {
      type: String.default: "500px"
    },
    chartOptions: {
      type: Object.required: true
    },
  },
  mounted() {
    this.createChart()
  },
  methods: {
    createChart() {
      // Initializes the echarts instance based on the prepared DOM
      let chart = this.$echarts.init(document.getElementById(this.chartId));
      // Specify the chart configuration items and data
      var option = {
        title: {
          text: "Weekly Price action"
        },
        tooltip: {},
        legend: {
          data: ["Price"]},xAxis: {
          type: "category".data: ["Mon"."Tue"."Wed"."Thu"."Fri"."Sat"."Sun"]},yAxis: {
          type: "value"
        },
        series: [{name: "Price".data: [220.202.231.243.225.220.213].type: "line".smooth: true} ] } chart.setOption(option); }}}</script>
Copy the code

Using components:

<my-chart chartId="chart" :chartOptions="{}" width="500px" height="500px"></my-chart>
Copy the code

NPM start, which can be seen in the browser generating line charts based on the configuration (series. Type =’line’) : my Vue development configuration environment

3. On demand

(1) According to the need to introduce method 1

At this time, we do not import the basic template in the main.js file, but directly import the basic template in the Echarts package in the mychart.vue component, and then import the required component modules as required, modify the mychart.vue component, as follows:

<template>
  <div>
    <div :id="chartId" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>

// Import the basic template
let Echarts = require("echarts/lib/echarts");
// Import required component modules on demand
require("echarts/lib/chart/line");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
require("echarts/lib/component/tooltip");

export default {
  name: "MyChart".props: {... }, mounted() {this.createChart();
  },
  methods: {
    createChart() {
      // Initializes the echarts instance based on the prepared DOM
      let chart = Echarts.init(document.getElementById(this.chartId));
      // Specify the chart configuration items and data
      varoption = {... }; chart.setOption(option); }}}</script>
Copy the code
(1) Introduction of mode 2 on demand

At this point we import the vuE-Echarts component library, and then import the component modules in the Echarts package as needed:

Vue-echarts is a component library based on echarts encapsulation, directly in accordance with the normal way of component reference, installation reference, specific installation and reference readers can directly read vue-Echarts technical documentation.

In the entry file main.js:

// Introduce vuE-echarts component library
import ECharts from 'vue-echarts'
// Import required component modules on demand
import 'echarts/lib/chart/line'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
// It can be used after registering the component
Vue.component('chart', ECharts)
Copy the code

Then modify the mychart.vue component as follows:

<template>
  <div>
    <chart ref="chart" :options="chartOptions" :auto-resize="true"></chart>
  </div>
</template>

<script>
export default {
  name: "MyChart",
  data() {
    return {
      chartOptions: {}}; }, mounted() {this.getOptions()
  },
  methods: {
    getOptions() {
      this.chartOptions = {
        title: {
          text: "Weekly Price action"
        },
        tooltip: {},
        legend: {
          data: ["Price"]},xAxis: {
          type: "category".data: ["Mon"."Tue"."Wed"."Thu"."Fri"."Sat"."Sun"]},yAxis: {
          type: "value"
        },
        series: [{name: "Price".data: [220.202.231.243.225.220.213].type: "line".smooth: true}]}}}}</script>
Copy the code

You can also import from mychart. vue and register it as a local component, but it is recommended to use the global register component, because no matter how many different chart family types you use in your project, Just worry about defining different option configurations in the.vue component files, rather than writing repeated import introductions in each component.

4. Reference documents

  • ECharts official documentation
  • Vue-echarts Technical documentation