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

猜你喜欢

转载自www.cnblogs.com/qixidi/p/10189794.html