current position:Home>General function encapsulation of Vue ecarts rendering

General function encapsulation of Vue ecarts rendering

2021-08-26 20:16:04 Xiao Xin who works hard to make money

Function encapsulation

/**
 * @description echarts Render general 
 * @param {String} id  Containers id name 
 * @param {Object} option  To configure 
 */
export function echartsFun(id, option) {
  //  Based on the prepared dom, initialization echarts example 
  const myChart = echarts.init(document.getElementById(id))
  //  Chart adaptation 
  setTimeout(function() {
    window.addEventListener('resize', function() {
      myChart.resize()
    })
  })
  //  Use the configuration item and data display chart just specified .
  myChart.setOption(option)
}

Using process

Create a container

image

Write the configuration

image

Import run

image

copyright notice
author[Xiao Xin who works hard to make money],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210826201602170p.html

Random recommended