Echarts图表在Vue中使用及其常用配置

vue引入

封装

import * as echarts from 'echarts'

// 绘制图表
export default function initEcharts(dom, config) {
  let myChart = echarts.init(document.querySelector(dom))
  myChart.setOption({
    ...config
  })
  window.addEventListener("resize",()=>{
    myChart.resize();
});
}
export {
    echarts
}

调用

  import initEcharts, {echarts} from '@/chartOption/initEcharts'

  mounted() {
    this.$nextTick(() => {
      initEcharts('#chart1', {          
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [120, 200],
            type: 'bar'
            }
        ]
      })
    })
  }

点击去常用配置