zoukankan      html  css  js  c++  java
  • echars line 底部图例强制不换行(滚动),修改图例样式

    {
          grid: {
            left: '5px',
            right: '10px',
            top: '10px',
            bottom: '40px',
            containLabel: true
          },
          tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0)',
            padding: 0,
            formatter(params) {
              return `
                <div style="height: 80px; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2); border-radius: 5px;">
                  <p style="color: ${CONFIG.COLOR[params.color]}; background: ${params.color}; height: 38px; padding: 0 16px; line-height:38px; border-radius: 5px 5px 0 0;">${params.seriesName}</p>
                  <p style="height: 42px; line-height: 42px; text-align: center; color: #303133; border-radius: 0 0 5px 5px; padding: 0 16px; background: #fff;">
                    <span>${params.name}:</span>
                    <span style="font-weight: 600;">${util.comma(params.value)}</span>
                  </p>
                </div>
              `
            }
          },
          legend: {
            type:'scroll', //图例强制不换行(滚动)
            data: option.legend,
            bottom: 5,
            icon: 'roundRect',//修改图例样式
            itemWidth:10, //修改图例 宽
            itemHeight:12 //修改图例 高
          },
          xAxis: {
            // boundaryGap: false,
            data: option.xAxis,
            axisLabel: {
              textStyle: {
                color: '#797878'
              }
            },
            axisLine: {
              lineStyle: {
                color: "#ececec"
              }
            }
          },
          yAxis: {
            splitLine: {
              lineStyle: {
                color: '#ececec'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#797878'
              }
            },
            type: 'value'
          },
          series: option.series
        }
  • 相关阅读:
    简单批处理内部命令简介(转)
    CPU 内存 频率 DDR DDR2 DDR3
    python 正则表达式
    bat 脚本 > >> 管道
    python 多进程 无数进程 重复进程 死机
    NLP相关期刊和会议
    deamon tools dtsoft virtual cdrom device 失败 错误
    占位
    2011年07月03日的日记
    每周总结(第二周)
  • 原文地址:https://www.cnblogs.com/liujinyu/p/11765318.html
Copyright © 2011-2022 走看看