Home >Web Front-end >Vue.js >How to introduce echarts in vue
How to introduce echarts in vue
- 下次还敢Original
- 2024-05-09 16:39:18611browse
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 <head> Add the following code to the tag:
<code class="html"><script src="https://unpkg.com/echarts/dist/echarts.min.js"></script></code>
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< ;div> As a chart container:
<code class="html"><div id="my-chart"></div></code>
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>
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>
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>
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!