data() {
return {
carStream: [], //车流
date: [], //日期
income: [], //收入
}
},
mounted() {
this. getDynamicData()
},
methods: {
//近30天收入和车流
getDynamicData() {
getAction('').then((res) => {
if (res.success) {
this.carStream = res.result.carStream
this.date = res.result.date
this.income = res.result.income
for (let i = 0; i < this.date.length; i++) {
this.income[i] = this.income[i] * 0.01
}
this.drawImg()
}
})
},
//绘图
drawImg() {
let myChart = echarts.init(document.getElementById('main'))
// 指定图表的配置项和数据
let option = {
tooltip: {
trigger: 'axis',
},
legend: {
data: ['收入(元)', '车流(辆)'],
},
xAxis: [
{
type: 'category',
data: this.date,
axisPointer: {
type: 'shadow',
},
axisTick: {
show: false
}
},
],
yAxis: [
{
type: 'value',
name: '收入(元)',
splitNumber: 5,
max: this.calMax(this.income),
min: this.calMin(this.income),
interval: (this.calMax(this.income) - this.calMin(this.income)) / 5,
},
{
type: 'value',
name: '车流(辆)',
splitNumber: 5,
max: this.calMax(this.carStream),
min: this.calMin(this.carStream),
interval: (this.calMax(this.carStream) - this.calMin(this.carStream)) / 5,
},
],
series: [
{
name: '收入(元)',
type: 'line',
data: this.income,
},
{
name: '车流(辆)',
type: 'line',
yAxisIndex: 1,
data: this.carStream,
},
],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
},
//求最大值
calMax(arr) {
var max = arr[0]
var len = arr.length
for (var i = 1; i < len; i++) {
if (arr[i] > max) {
max = arr[i]
}
}
let maxint = Math.ceil(max / 9.5) //不让最高的值超过最上面的刻度
let maxval = maxint * 10 //让显示的刻度是整数
console.log(maxval,'max')
return maxval
},
//求最小值
calMin(arr) {
var min = arr[0]
var len = arr.length
for (var i = 1; i < len; i++) {
if (arr[i] < min) {
min = arr[i]
}
}
let minint = Math.floor(min / 10)
let minval = minint * 10 //让显示的刻度是整数
console.log(minval,'max')
return minval
},
}
splitNumber 、max、min、 interval