目录
项目中我们一般会全局引用echarts组件库,开发起来方便。发现项目文件体积过大,首屏加载也会慢。为了解决首屏加载速度问题,项目体积大的问题。方法1:这就要求我们要采用按需加载的模式。没有使用到的echarts中组件不要引入项目中。方法2:路由采用懒加载的模式也会节省首屏加载时间。下面就是echarts折线图按需加载例子。
第一步:引用echarts组件库
命令:npm install echarts ,命令:yarn add echarts
第二步:main.js中全局配置主模版
应用场景1:如果多个页面都需要使用echarts的图表,建议在main.js全局配置echats核心主模块,该模块是管理图表初始化,渲染的。
应用场景2: 如果使用图表的地方不多,可以不在main.js中引用主模块。也可以在封装的折线图组件中引用主模块。
/**
* @file 项目主入口
* @author yizuodao
*/
import Vue from 'vue'
import App from './App'
import router from './router'
// plugins
import echarts from 'echarts/lib/echarts'
Vue.prototype.$echarts = echarts
/* eslint-disable */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
第三步:封装echarts折线图line组件
功能点:
- 设置折线图点击事件
- 默认情况全部可以取消选中状态,我们想要折线图图例至少选中一个。
<template>
<div class="module-container" :style="{width:width}">
<div
:id="lineId"
class="module-body bg"
:style="{height:height,width:width}">
</div>
</div>
</template>
<script>
// 按照使用到的功能添加组件导入,
require('echarts/lib/chart/line') // 按需导入折线组件
require('echarts/lib/chart/effectScatter') // 拐点出闪烁,高亮
require('echarts/lib/component/tooltip') // 提示组件
require('echarts/lib/component/legend') // 图例组件
require('echarts/lib/component/markPoint') // 标注组件
require('echarts/lib/component/markLine')
import 'zrender/lib/svg/svg' // svg模式
export default {
name: 'info-Line',
props: {
lineId: { // 折线图图表id
type: String,
default() {
return 'line'
}
},
height: { // 折线图高
type:String,
default() {
return '100%'
}
},
width: { // 折线图宽
type: String,
default() {
return '300px'
}
},
option: { // 折线图配置
type: Object,
required: true // 数据
},
loading: { // 图形加载
type: Boolean,
default() {
return false
}
},
enabledClick: { // 折线图是否配置点击事件
type: Boolean,
default: false
},
optRenderer: { // 渲染模式:canvas,svg
type: String,
default() {
return 'svg'
}
},
},
data() {
return {
line: null,
empty: false,
}
},
computed: {
lineOption() {
return this.option.series
},
pieToolInfoStatus() {
let arr = Object.keys(this.toolInfo)
if (arr.length > 0) {
return true
}
return false
},
opts() {
return {
renderer: this.optRenderer,
}
},
},
watch: {
lineOption() {
this.option.series.length === 0 ? this.empty = true : (this.option.series[0].data.length === 0 ? this.empty = true : this.empty = false)
if (this.empty) {
this.line.clear()
this.option.yAxis.data = []
this.option.xAxis.data = []
this.line.setOption(this.option)
} else {
this.drawLine()
}
},
},
mounted() {
if (this.line === null) {
this.line = this.$echarts.init(document.getElementById(this.lineId), null, this.opts)
}
/**
* 设置折线图点击事件
*/
if (this.enabledClick) {
this.line.getZr().on('click', (params) => {
let pointInPixel = [params.offsetX, params.offsetY]
if (this.line.containPixel('grid', pointInPixel)) {
let pointInGrid = this.line.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
let xIndex = pointInGrid[[0]]
let op = this.line.getOption()
let xValue = op.xAxis[0].data[xIndex]
this.$emit('onDetail', xValue, op.series[1].data[xIndex].groupTime)
}
})
}
/**
* 设置图例最少一个选中
*/
this.line.on('legendselectchanged', params => {
let legendObj = params.selected
let selectedNum = 0
for (const key in legendObj) {
if (legendObj.hasOwnProperty(key)) {
const element = legendObj[key]
if (element) {
selectedNum += 1
}
}
}
if (selectedNum === 0) {
legendObj[params.name] = true
this.option.legend.selected = legendObj
this.line.setOption(this.option)
}
})
},
beforeDestroy() {
if (this.line !== null && this.line !== '' && !(typeof this.line === 'undefined')) {
this.line.clear()
}
},
methods: {
/**
* 折线图
*/
drawLine: function() {
if (this.line === null && this.line !== '' && !(typeof this.line === 'undefined')) {
this.line = this.$echarts.init(document.getElementById(this.lineId), null, this.opts)
}
this.line.setOption(this.option)
},
}
}
</script>
第四步:在需要使用页面中引用line组件。
<template>
<section class="section-body">
<info-line
:id="'timeLine'"
:loading="timeLoading"
:optRenderer="'canvas'"
:option="timeLineOption">
</info-line>
</section>
</template>
<script>
import infoLine from '@/components/line'
export default {
name: 'dataInfo',
components: {
infoLine,
},
data() {
return {
timeLineOption: {},
timeLoading: false,
}
},
mounted() {
this.setLineOption()
},
methods: {
setLineOption() {
this.timeLineOption = {
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'
}]
}
},
}
}
</script>