SoFunction
Updated on 2025-03-01

Instance code using vue-echarts-v3 in vue

feature

•Lightweight, efficient, on-demand binding events
•Support on-demand import of charts and components
•Support component resize events to automatically update views

1. Installation

npm install --save echarts vue-echarts-v3

2. Usage

Project built with vue-cli, open the file in the build folder

1. The webpack is modified as follows

  {
    test: /\.js$/,
    loader: 'babel',
    include: [
      (prjRoot, 'src'),
      (prjRoot, 'node_modules/vue-echarts-v3/src')
    ],
     exclude: /node_modules(?![\\/]vue-echarts-v3[\\/]src[\\/])/
   },

2. The webpack is modified as follows

 {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/vue-echarts-v3/src')]
   }

3. Import all charts and components

import IEcharts from 'vue-echarts-v3/src/';

4. Manually import modules to reduce bundle size

import IEcharts from 'vue-echarts-v3/src/';
import 'echarts/lib/component/title'; //Introduce title componentimport 'echarts/lib/component/legend'; //Introduce legend componentimport 'echarts/lib/component/tooltip'; //Introduce prompt box componentimport 'echarts/lib/component/toolbox'; //Introduce toolbox components// ...(Introduce what you need)import 'echarts/lib/chart/pie'; //Take the pie chart as an example

3. Example

About Echarts API usage referenceEcharts official website

• Dynamic data obtained from the interface can be directly passed from the parent component through props, replacing the data in the series[0].data array below
• Dynamic data can also be obtained from the interface from this component. However, the variable pie corresponding to the option attribute must be written in computed and cannot be written in data anymore, otherwise the data cannot be obtained

<template>
 <div class="echarts">
  <IEcharts :option="pie" @ready="onReady" @click="onClick"></IEcharts>
 </div>
</template>
<script>
import IEcharts from 'vue-echarts-v3/src/';
import 'echarts/lib/component/title'; //Introduce title componentimport 'echarts/lib/component/legend'; //Introduce legend componentimport 'echarts/lib/chart/pie';
 export default {
  components: {IEcharts},
  data: () => ({
   pie: {
    title: {
     text: 'ECharts Demo'
    },
    tooltip: {},
    legend:{
     type: 'plain',
     orient: 'vertical',
     right: 10,
     top: 20,
    },
    series: [{
     type: 'pie',
     data: [
      {name: 'A', value: 1211},
      {name: 'B', value: 2323},
      {name: 'C', value: 1919}
     ]
    }]
   }
  }),
  methods: {
   onReady(instance) {
    (instance);
   },
   onClick(event, instance, echarts) {
    (arguments);
   }
  }
 };
</script>
<style scoped>
 .echarts{
  width: 400px;
  height: 400px;
  margin: auto;
  text-align: center;
 }
</style>

Summarize

The above is the example code for using vue-echarts-v3 in vue introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!