How to introduce echarts in vue-Vue.js-php.cn

Home

Web Front-end

Vue.js

How to introduce echarts in vue

May 09, 2024 pm 04:39 PM

vue

There are three ways to introduce ECharts into Vue.js: Install through npm Install through CDN Introduction and use the Vue ECharts plug-in Detailed steps: Create a chart container Introduce ECharts Initialize the chart instance Set chart options and data destroy chart instance (optional)

How to introduce echarts in vue

How to introduce ECharts into Vue

There are mainly the following methods to introduce ECharts into Vue.js:

1. Use npm to install

<code>npm install echarts</code>

Copy after login

2. Introduce

through CDN in <head> Add the following code to the tag:

&lt;script src=&quot;https://unpkg.com/echarts/dist/echarts.min.js&quot;&gt;&lt;/script&gt;

Copy after login

3. Use the Vue ECharts plug-in

<code>vue add echarts</code>

Copy after login

The advantage of using the plug-in is that it provides an encapsulation of ECharts and simplifies its use. .

Detailed steps:

1. Create a chart container

In the Vue component, create an empty&lt ;div> As a chart container:

&lt;div id=&quot;my-chart&quot;&gt;&lt;/div&gt;

Copy after login

2. Introduce ECharts

Introduce ECharts according to one of the above methods.

3. Initialize the chart instance

Use the following code to initialize the chart instance:

const myChart = echarts.init(document.getElementById('my-chart'));

Copy after login

4. Set chart options and data

Set chart options and data and apply them using the setOption method:

const option = {
  xAxis: {
    data: ['Jan', 'Feb', 'Mar', 'Apr']
  },
  yAxis: {
    data: [10, 20, 50, 30]
  },
  series: [
    {
      data: [10, 20, 50, 30],
      type: 'bar'
    }
  ]
};
myChart.setOption(option);

Copy after login

5. Destroy the chart instance

When When you need to destroy the chart, you can use the dispose method:

myChart.dispose();

Copy after login

The above is the detailed content of How to introduce echarts in vue. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn