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