zoukankan      html  css  js  c++  java
  • echarts相关设置

    1.显示隐藏工具栏

    注释toolbox即可

    
    /*    toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },*/
    

    2.鼠标划过数据显示对应的数据

    
     tooltip : {
            trigger: 'axis'//设置这个即可 划过显示数据
     },
    

    3.修改不同产品分类(legend)的样式

    
    textStyle: {
                fontSize: 12,
                color: '#fff'//显示的字体颜色
     }
    

    4.修改图标的位置

    
      grid: {
          show: true,
          left: 35, //组件离容器左侧的距离,百分比字符串或整型数字
          top: 25, //组件离容器上侧的距离,百分比字符串或整型数字
          //bottom:40//组件离容器底部的距离,百分比字符串或整型数字
        }, 
    

    5.柱状图中的柱状样式

    
      var labelOption = {
        normal: {
          show: true,
          position: 'top',//数据显示在柱状体的位置
          align: 'middle',
          verticalAlign: 'bottom',
          formatter: '{c}',
          fontSize: 14,
          color: '#fff',
          rotate: 35,//显示数据旋转的角度
          fontWeight: 'normal',
        }
      };
     使用:
     series : [
            {
                name:'07010011',
                type:'bar',
                data:[800, 530, 520, 512, 480],
                color:'#7BB0E4',
                label:labelOption
            },
            {
                name:'90612011',
                type:'bar',
                data:[180, 460, 9.0, 26.4, 28.7],
                color:'#404048',
                label:labelOption
            },
            {
                name:'07810011',
                type:'bar',
                data:[2.6, 5.9, 9.0, 26.4, 28.7],
                 color:'#8DEC6E',
                label:labelOption
            },
        ]
    

    6.修改y坐标的数据信息

    
    1>数据固定
       在 yAxis 增加max 和min 属性
       yAxis: {
          type: 'value',
          max:1000,
          min:0,
        ... 
       }
    2>数据大小不固定
    在 yAxis 的 axisLabel中增加
      formatter: function formatter(value, index) {
       //使用函数模板,函数参数分别为刻度数值(类目),刻度的索引
         if (value >= 250) {
           value = (value + "").slice(0, -3);
           return value + "K";
         } else {
           return value;
         }
      },
    

    来源:https://blog.csdn.net/sinat_32900379/article/details/85157730

  • 相关阅读:
    Mysql 数据类型
    C++ 11 std::function std::bind使用
    C++ 11 Lambda表达式
    C++ 11 nullptr关键字
    C++ 11 auto关键字
    C++ 11 创建和使用共享 weak_ptr
    C++ 11 创建和使用 unique_ptr
    C++ 11 创建和使用 shared_ptr
    VS15 Visual Assist X破解
    开发人员看测试之细说JBehave
  • 原文地址:https://www.cnblogs.com/qixidi/p/10189794.html
Copyright © 2011-2022 走看看