How to use echarts in Vue.JS

This time I will show you how to use echarts in Vue.JS. What are the precautions for using echarts in Vue.JS? The following is a practical case, let's take a look.

The previous article introduced you to a detailed example of using ECharts in webpack. You can click to view it.

1. Use NPM to install (global import)

Execute the following command:

npm install echarts--save

Introduce echarts module

Introduce the echarts module into the main.js of the Vue project, that is, write the following code:

import echarts from 'echarts'
Vue.prototype.$echarts = echarts；

2. Introduce as needed

The above global import will package all echarts charts, causing the size to be too large. To solve this problem, I can use

requireIntroduce on demand, that is, import whatever is needed:

That is:

let echarts = require('echarts/lib/echarts')

3. Directly quote

globally in the index.html file, use the script tag to introduce

<script src="/static/js/echarts/echarts.js"></script>

Note: write in src The path of echarts;

Then find webpack.base.conf.js in the vue project build directory,

Configuration file, add the externals attribute to the module.exports object, and then configure The path where echarts is located:

module.exports = {
.....
externals: {
// 路径：命名空间
 'echarts/dist/echarts':'echarts',
}
}；

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

The server directly obtains the file upload progress

How to use datepicker

Using ejsExcel template in Vue.js

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