使用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);