30 changed files with 687 additions and 223 deletions
@ -0,0 +1,209 @@ |
|||
<template> |
|||
<view id="mychart" style="width: 670rpx;height: 250px;" @click="echarts.onClick" :prop="optionData" |
|||
:change:prop="echarts.updateEcharts"> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
option: { |
|||
type: Object, |
|||
require: 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) |
|||
} |
|||
} |
|||
// if (option.xAxis[0].data.length >= 5) { |
|||
// option.xAxis[0].axisLabel.formatter = function formatter(params) { |
|||
// if (params > 5) { |
|||
// return params; |
|||
// } |
|||
// var maxLength = 4; |
|||
// //判断长度，超出使用...代替 |
|||
// if (params && params.length > maxLength) { |
|||
// return params.substring(0, maxLength - 1) + '...'; |
|||
// } else { |
|||
// return params; |
|||
// } |
|||
// } |
|||
// } else if(option.xAxis[0].data.length === 1){ |
|||
// option.xAxis[0].axisLabel.formatter = function formatter(params) { |
|||
// return params |
|||
// } |
|||
// } else { |
|||
// option.xAxis[0].axisLabel.formatter = function formatter(params) { |
|||
// if (params > 5) { |
|||
// return params; |
|||
// } |
|||
// var maxLength = 6; |
|||
// //判断长度，超出使用...代替 |
|||
// if (params && params.length > maxLength) { |
|||
// return params.substring(0, maxLength - 1) + '...'; |
|||
// } else { |
|||
// return params; |
|||
// } |
|||
// } |
|||
// } |
|||
// 设置新的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> |
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 639 KiB |
Loading…
Reference in new issue