How to introduce echarts in 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 into Vue

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

1. Use npm to install

<code>npm install echarts</code>

2. Introduce

through CDN in Add the following code to the tag:

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

3. Use the Vue ECharts plug-in

<code>vue add echarts</code>

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:

<div id="my-chart"></div>

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'));

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);

5. Destroy the chart instance

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

myChart.dispose();

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!