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
        }
  • 相关阅读:
    OLEDB 数据变更通知
    Python处理正则表达式超时的办法
    OLEDB 静态绑定和数据转化接口
    Keepalived+LVS(DR)+MySQL
    Keepalived+Nginx实现Nginx的高可用
    ISCSI存储
    memcached随笔练习
    Varnish快速安装及测试
    Oracle及其相关软件历史版本下载地址
    使用VMwaver 克隆CentOS 6.9网卡配置报错
  • 原文地址:https://www.cnblogs.com/liujinyu/p/11765318.html
Copyright © 2011-2022 走看看