首页 > 其他分享 >echarts柏拉图,柱状图和折线图结合使用,双纵坐标轴展示

echarts柏拉图,柱状图和折线图结合使用,双纵坐标轴展示

时间:2023-01-12 12:13:04浏览次数:42  
标签:show color lineStyle ceil 柱状图 双纵 折线图 true Math

效果如图:

 

 

 

 

 

 

 

 

 

 

  //柏拉图分析
      lineOption2: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: { color: '#fff' },
            crossStyle: { color: '#6d7882' }
          }
        },
        legend: {
          right: '0%',
          data: ['扣分', '累计扣分比例'],
          textStyle: { fontSize: 12 },
          show: true
        },
        grid: [
          {
            show: true,
            top: '16%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          }
        ],
        xAxis: [
          {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#6d7882'
              }
            },
            axisLabel: { interval: 0 },
            splitLine: {
              show: true,
              lineStyle: { color: '#d4d7da' }
            },
            data: [
              '水温',
              '单集管水量',
              '阀门开度',
              '阀门响应',
              '框架一段\n' + '高度偏差',
              '框架二段\n' + '高度偏差',
              '辊速偏差',
              '水压偏差',
              '辊速偏差'
            ]
          }
        ],
        yAxis: [
          //y轴左侧代表值
          {
            type: 'value',
            name: '',
            position: 'left',
            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' }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          //y轴右侧值代表
          {
            type: 'value',
            name: '',
            position: 'right',
            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' }
            },
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: '扣分',
            type: 'bar',
            barGap: 0.2,
            barWidth: 22,
            data: [],
            color: '#3391FF',
            //柱状图显示上方数字
            label: {
              normal: {
                show: true,
                position: 'top',
                textStyle: {
                  color: '#606266'
                }
              }
            }
          },
          {
            name: '累计扣分比例',
            type: 'line',
            yAxisIndex: 1,
            data: [],
            color: '#55C6D4' //默认颜色
          }
        ]
      }

 

标签:show,color,lineStyle,ceil,柱状图,双纵,折线图,true,Math
From: https://www.cnblogs.com/zqlym/p/17046146.html

相关文章