Use the echarts method in Vue, and use echarts for vue

Use the echarts method in Vue, and use echarts for vue

The previous article introduces how to use ECharts in webpack. You can click here to view details.

1. Use NPM for installation (Global Introduction)

Run the following command:

npm install echarts--save

Introduce the echarts Module

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

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

2. On-Demand Introduction

The global introduction above will package all echarts charts, resulting in a large volume. To solve this problem, you can use require to introduce as needed:

That is:

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

3. Direct reference

Global introduction in the index.html file, using the script tag

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

Note: The Path to write echarts to src;

Then, find webpack. base. conf. js in the vue Project build directory, configure the file, add the externals attribute to the module. exports object, and configure the path of echarts:

Module. exports = {... externals: {// path: namespace 'echarts/dist/echarts': 'echarts ',}};

Summary

The above section describes how to use echarts in Vue. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!