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

How to introduce echarts in vue

下次还敢

Release： 2024-05-09 16:39:18

Original

581 people have browsed it

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:

<code class="html"><script src="https://unpkg.com/echarts/dist/echarts.min.js"></script></code>

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:

<code class="html"><div id="my-chart"></div></code>

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:

<code class="javascript">const myChart = echarts.init(document.getElementById('my-chart'));</code>

Copy after login

4. Set chart options and data

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

<code class="javascript">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);</code>

Copy after login

5. Destroy the chart instance

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

<code class="javascript">myChart.dispose();</code>

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!