首页 > 其他分享 >横向echarts柱状图,双坐标轴展示

横向echarts柱状图,双坐标轴展示

时间:2023-01-12 12:45:56浏览次数:47  
标签:show color true 柱状图 ceil 坐标轴 type echarts Math

效果如图:

 

 

 

 

 

 

 

 

  //设备故障
      lineOption1: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: { color: '#fff' },
            crossStyle: { color: '#6d7882' }
          }
        },
        legend: {
          top: '4%',
          right: '0%',
          data: ['故障时间', '故障频次'],
          textStyle: { fontSize: 12 },
          show: true
        },
        grid: {
          left: '0%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          //y轴左侧代表值
          {
            type: 'value',
            name: 'min',
            position: 'top',
            alignTicks: true,
            splitNumber: 5,
            // min: 0,
            // interval: Math.ceil(Math.ceil(Math.max(100)) / 5),
            // max: Math.ceil(Math.ceil(Math.max(100)) / 5) * 5,
            axisLine: {
              show: false
              /* lineStyle: {
                color: '#d4d7da'
              }*/
            },
            splitLine: {
              show: true,
              lineStyle: { color: '#d4d7da' }
            },
            axisTick: {
              //去掉坐标轴刻度线
              show: false
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          //y轴右侧值代表
          {
            type: 'value',
            name: '次',
            position: 'bottom',
            alignTicks: true,
            splitNumber: 5,
            // min: 0,
            // interval: Math.ceil(Math.ceil(Math.max(100)) / 5),
            // max: Math.ceil(Math.ceil(Math.max(100)) / 5) * 5,
            //y轴刻度线和刻度单位
            axisLine: {
              show: false
              /*  lineStyle: {
                color: '#d4d7da'
              }*/
            },
            //y轴横向分割线
            splitLine: {
              show: true,
              lineStyle: { color: '#d4d7da' }
            },
            axisTick: {
              //去掉坐标轴刻度线
              show: false
            },
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#6d7882'
              }
            },
            axisLabel: { interval: 0 },
            splitLine: {
              show: true,
              lineStyle: { color: '#d4d7da' }
            },
            data: []
          }
        ],
        series: [
          /*{
            name: '故障时间',
            type: 'bar',
            color: '#3391FF',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
          },
          {
            name: '故障频次',
            type: 'bar',
            color: '#FF9800',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
          }*/
          {
            name: '故障时间',
            type: 'bar',
            barGap: 0.2,
            barWidth: 12,
            data: [],
            color: '#3391FF'
          },
          {
            name: '故障频次',
            type: 'bar',
            barGap: 0.2,
            barWidth: 12,
            xAxisIndex: 1, //区分双轴坐标
            data: [],
            color: '#FF9800'
          }
        ]
      }

 

标签:show,color,true,柱状图,ceil,坐标轴,type,echarts,Math
From: https://www.cnblogs.com/zqlym/p/17046298.html

相关文章