使用echarts

使用echarts并不难,因为echarts的文档很健全。但是如何在使用echarts同事考虑打包性能的问题,便是一个课题。npm install echarts --save 下载后并import echarts from 'echarts'引入使用是一种方法,但是当其打包时会造成,vendor.js过大。从而使浏览器加载速度变慢,影响性能。如何让打包体积变小,如何高效使用echarts,便是今日要记录的。

使用外链方式

// index.html    
<script src="./static/script/echarts.common.min.js"></script>

// js
let myChart = echarts.getInstanceByDom(document.getElementById('chart'))
  if (myChart === undefined) {
    /* global echarts:true */
    /* eslint no-undef: "error" */
    myChart = echarts.init(document.getElementById('chart'))
}

const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line'
    }]
  };
  myChart.setOption(option);