实现ECharts双Y轴左右刻度线一致 您所在的位置:网站首页 origin做双y轴点线图为啥有一条线显示不出来 实现ECharts双Y轴左右刻度线一致

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

2023-06-10 05:16| 来源: 网络整理| 查看: 265

app.title = '折柱混合';     //计算最大值   function calMax(arr) {     let max = 0;     arr.forEach((el) => {       el.forEach((el1) => {         if (!(el1 === undefined || el1 === '')) {           if (max < el1) {             max = el1;           }         }       })     })     let maxint = Math.ceil(max / 9.5);//不让最高的值超过最上面的刻度     let maxval = maxint * 10;//让显示的刻度是整数     return maxval;   }     //计算最小值   function calMin(arr) {     let min = 0;     arr.forEach((el) => {       el.forEach((el1) => {         if (!(el1 === undefined || el1 === '')) {           if (min > el1) {             min = el1;           }         }       })     })     let minint = Math.floor(min / 10);     let minval = minint * 10;//让显示的刻度是整数     return minval;   }     var data1 = [59357.9, 52789.77, 24837.98, 14345.02, 2291.93],     data2 = [-12108.81, 701.43, 1280.75, -2109.83, -18693.95],     data3 = [0, -11.07, -52.95, -42.25, -84.02],     data4 = [0, 105.79, 82.59, -264.73, -786.04]     var Min1 = calMin([data1, data2]), Min2 = calMin([data3, data4]),     Max1 = calMax([data1, data2]), Max2 = calMax([data3, data4]);     option = {     grid: {left: '100', right: '100', bottom: '100', top: '100'},     color: ['#0698d6', '#fd8246', '#d773b4', '#41ac7c', '#e86367', '#aada9c'],     tooltip: {trigger: 'axis', axisPointer: {type: 'cross', crossStyle: {color: '#999'}}},     legend: {data: ['营业收入', '净利润', '营业收入同比增长率', '净利润同比增长率']},     xAxis: [{       type: 'category',       show: false,       lineWidth: 0,       axisPointer: {         type: 'shadow'       },       data: ["2013-12-31", "2014-12-31", "2015-12-31", "2016-12-31", "2017-12-31"]     }],     yAxis: [{       name: '单位:万元',       nameTextStyle: {color: '#999999'},       type: "value",       axisLine: {show: false},       axisTick: {show: false},       axisLabel: {verticalAlign: "bottom", color: "#999999"},       min: Min1,       max: Max1,       splitNumber: 5,       interval: (Max1 - Min1) / 5     }, {       name: '单位:%',       type: 'value',       nameTextStyle: {color: '#999999'},       axisLine: {show: false},       axisTick: {show: false},       axisLabel: {verticalAlign: "bottom", color: "#999999"},       min: Min2,       max: Max2,       splitNumber: 5,       interval: (Max2 - Min2) / 5       }],     series: [{name: '营业收入', type: 'bar', barGap: 0, barWidth: 30, data: data1},       {name: '净利润', type: 'bar', barGap: 0, barWidth: 30, data: data2},       {name: '营业收入同比增长率', type: 'line', yAxisIndex: 1, data: data3},       {name: '净利润同比增长率', type: 'line', yAxisIndex: 1, data: data4}     ]   }

 

 



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有