<template>
|
<view>
|
<view class="echarts" :prop="option" :change:prop="echarts.update"></view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: 'Echarts',
|
props: {
|
option: {
|
type: Object,
|
required: true
|
}
|
}
|
}
|
</script>
|
|
<script module="echarts" lang="renderjs">
|
export default {
|
data() {
|
return {
|
chart: null
|
}
|
},
|
mounted() {
|
if (typeof window.echarts === 'object') {
|
this.init()
|
} else {
|
// 动态引入类库
|
const script = document.createElement('script')
|
script.src = './static/echarts.min.js'
|
// script.src = './static/echarts/echarts.min.js'
|
script.onload = this.init
|
document.head.appendChild(script)
|
}
|
},
|
methods: {
|
/**
|
* 初始化echarts
|
*/
|
init() {
|
this.chart = echarts.init(this.$el)
|
this.update(this.option)
|
},
|
/**
|
* 监测数据更新
|
* @param {Object} option
|
*/
|
update(option) {
|
if (this.chart) {
|
// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
|
if (option) {
|
// tooltip
|
if (option.tooltip) {
|
// 判断是否设置tooltip的位置
|
if (option.tooltip.positionStatus) {
|
option.tooltip.position = this.tooltipPosition()
|
}
|
// 判断是否格式化tooltip
|
if (option.tooltip.formatterStatus) {
|
option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option.tooltip.formatFloat2, option.tooltip.formatThousands)
|
}
|
}
|
// 设置新的option
|
this.chart.setOption(option, option.notMerge)
|
}
|
|
}
|
},
|
/**
|
* 设置tooltip的位置，防止超出画布
|
*/
|
tooltipPosition() {
|
return (point, params, dom, rect, size) => {
|
//其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
|
let x = point[0]
|
let y = point[1]
|
let viewWidth = size.viewSize[0]
|
let viewHeight = size.viewSize[1]
|
let boxWidth = size.contentSize[0]
|
let boxHeight = size.contentSize[1]
|
let posX = 0 //x坐标位置
|
let posY = 0 //y坐标位置
|
if (x < boxWidth) { //左边放不开
|
posX = 5
|
} else { //左边放的下
|
posX = x - boxWidth
|
}
|
if (y < boxHeight) { //上边放不开
|
posY = 5
|
} else { //上边放得下
|
posY = y - boxHeight
|
}
|
return [posX, posY]
|
}
|
},
|
/**
|
* tooltip格式化
|
* @param {Object} unit 数值后的单位
|
* @param {Object} formatFloat2 是否保留两位小数
|
* @param {Object} formatThousands 是否添加千分位
|
*/
|
tooltipFormatter(unit, formatFloat2, formatThousands) {
|
return params => {
|
let result = ''
|
unit = unit ? unit : ''
|
for (let i in params) {
|
if (i == 0) {
|
result += params[i].axisValueLabel
|
}
|
let value = '--'
|
if (params[i].data !== null) {
|
value = params[i].data
|
// 保留两位小数
|
if (formatFloat2) {
|
value = this.formatFloat2(value)
|
}
|
// 添加千分位
|
if (formatThousands) {
|
value = this.formatThousands(value)
|
}
|
}
|
// #ifdef H5
|
result += '\n' + params[i].seriesName + '：' + value + ' ' + unit
|
// #endif
|
|
// #ifdef APP-PLUS
|
result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit
|
// #endif
|
}
|
return result
|
}
|
},
|
/**
|
* 保留两位小数
|
* @param {Object} value
|
*/
|
formatFloat2(value) {
|
let temp = Math.round(parseFloat(value) * 100) / 100
|
let xsd = temp.toString().split('.')
|
if (xsd.length === 1) {
|
temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
|
return temp
|
}
|
if (xsd.length > 1) {
|
if (xsd[1].length < 2) {
|
temp = temp.toString() + '0'
|
}
|
return temp
|
}
|
},
|
/**
|
* 添加千分位
|
* @param {Object} value
|
*/
|
formatThousands(value) {
|
if (value === undefined || value === null) {
|
value = ''
|
}
|
if (!isNaN(value)) {
|
value = value + ''
|
}
|
let re = /\d{1,3}(?=(\d{3})+$)/g
|
let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
|
return s1.replace(re, '$&,') + s2
|
})
|
return n1
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.echarts {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
