实现ECharts双Y轴左右刻度线一致

  
 
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

你可能感兴趣的:(echarts,javascript,vue.js)