Detailed use of Echarts in vue2 vue3

1. Installation
2. Use Echarts in vue2

In the main.js file
Given a container

3. Use Echarts in vue3

Introduce echart in the root component, usually App.vue
Define div on the page where you need to use it
Then inject it on the page where you need to use Echarts

1. Installation

npm install echarts --save

2. Use Echarts in vue2

In the main.js file

// Import echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

Given a container

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

echarts initialization should be in the hook function mounted() , which is called after el is replaced by the newly created vm.$el and mounted to the instance.

//Introduce basic template let echarts = require('echarts/lib/echarts')

//Introduce the bar chart component require('echarts/lib/chart/bar')

//Introduce tooltip and title components require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  name: 'hello',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // Based on the prepared DOM, initialize the echarts instance let myChart = echarts.init(document.getElementById('myChart'))
      // Draw chart title: {
        text: 'Line chart stacking'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['email marketing', 'affiliate advertising', 'video advertising', 'direct access', 'search engine']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox:
        feature:
            saveAsImage: {}
        }
    },
    xAxis:
        type: 'category',
        boundaryGap: false,
        data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Email Marketing',
            type: 'line',
            stack: 'total amount',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: 'Alliance Advertising',
            type: 'line',
            stack: 'total amount',
            data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
            name: 'Video Ad',
            type: 'line',
            stack: 'total amount',
            data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
            name: 'Direct access',
            type: 'line',
            stack: 'total amount',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: 'Search Engine',
            type: 'line',
            stack: 'total amount',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
    }
  }
}

3. Use Echarts in vue3

Because there is no this in setup , and it has not been rendered yet, you can use provide/inject to introduce echart in setup

Introduce echart in the root component, usually App.vue

import * as echarts from 'echarts'
import { provide } from 'vue'
 
export default {
  name: 'App',
  setup(){
    provide('echarts',echarts) //provide
  },
  components:
  }
}

It should be noted here that import * as echarts from 'echarts' , not import echarts from 'echarts' , which will result in an error, because the interface of echarts version 5.0 has become as follows:

export { 
 EChartsFullOption as EChartsOption, 
 connect, 
 disConnect, 
 dispose,
 getInstanceByDom, 
 getInstanceById, 
 getMap, 
 init,
 registerLocale, 
 registerMap, 
 registerTheme 
 };

Define div on the page where you need to use it

<div id="home-page-traffic_chart" style="width: 600px; height: 280px">

Then inject it on the page where you need to use Echarts

export default {
  name: 'data_page',
  setup () {
    const trafficData = ref({})
    const echarts = inject('echarts')
    onMounted(() => {
      const myChart = echarts.init(document.getElementById('home-page-traffic_chart'))
      // Draw the chart myChart.setOption({
        title:
          text: 'Today's call statistics'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer:
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct access',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      })
      window.onresize = function () {
        myChart.resize()
      }
    })
    return {
    }
  }

}

Effect picture: