Echarts-图表属性设置(不定期补充)

重点

具体查看官网https://echarts.apache.org/zh/option.html#legend

图例(legend)

参考

//Echarts数据可视化legend图例属性设置
legend={
    show:true,                                  //是否显示
    zlevel:0,                                   //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
    z:2,                                         //所属组件的z分层，z值小的图形会被z值大的图形覆盖
    left:"center",                              //组件离容器左侧的距离,'left', 'center', 'right','20%'
    top:"top",                                   //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
    right:"auto",                               //组件离容器右侧的距离,'20%'
    bottom:"auto",                              //组件离容器下侧的距离,'20%'
    width:"auto",                               //图例宽度
    height:"auto",                              //图例高度
    orient:"horizontal",                        //图例排列方向
    align:"auto",                               //图例标记和文本的对齐,left,right
    padding:5,                                   //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
    itemGap:10,                                  //图例每项之间的间隔
    itemWidth:25,                               //图例标记的图形宽度
    itemHeight:14,                              //图例标记的图形高度
    formatter:function (name) {                 //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
        return 'Legend ' + name;
    },
    selectedMode:"single",                    //图例选择的模式,true开启,false关闭,single单选,multiple多选
    inactiveColor:"#ccc",                     //图例关闭时的颜色
    textStyle:mytextStyle,                    //文本样式
    data:['类别1', '类别2', '类别3'],          //series中根据名称区分
    backgroundColor:"transparent",            //标题背景色
    borderColor:"#ccc",                         //边框颜色
    borderWidth:0,                               //边框线宽
    shadowColor:"red",                          //阴影颜色
    shadowOffsetX:0,                            //阴影水平方向上的偏移距离
    shadowOffsetY:0,                            //阴影垂直方向上的偏移距离
    shadowBlur:10,                               //阴影的模糊大小
};

提示框(tooltip)

参考

tooltip: {
  show: true, // 是否显示
  trigger: 'axis', // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
  axisPointer: { // 坐标轴指示器配置项。
        type: 'shadow', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
        axis: 'auto', // 指示器的坐标轴。 
        snap: true, // 坐标轴指示器是否自动吸附到点上
    },
    // showContent: true, //是否显示提示框浮层，默认显示。
    // triggerOn: 'mouseover', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。
    // enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
    renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
    backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。
    borderColor: '#333', // 提示框浮层的边框颜色。
    borderWidth: 0, // 提示框浮层的边框宽。
    padding: 5, // 提示框浮层内边距，
    textStyle: { // 提示框浮层的文本样式。
        color: '#fff',
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontFamily: 'sans-serif',
        fontSize: 14,
    },
    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);', // 额外附加到浮层的 css 样式
    confine: false, // 是否将 tooltip 框限制在图表的区域内。
    // formatter: '{b} 的成绩是 {c}'
    formatter: function(arg) {
        return arg[0].name + '的分数是:' + arg[0].data
    }
},

x轴(xAxis)

参考

xAxis : [
  {
    type : 'category',   
   // type:坐标轴类型。
   // [ default: 'category' ]
   /*可选：
   1.'value' 数值轴，适用于连续数据；
   2.'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据； 
   3.'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度；
   4.'log' 对数轴。适用于对数数据。*/
  data : ['上海','北京'], //x轴下面的数据
  axisTick: {
      show: false,  //是否显示网状线 默认为true
      alignWithLabel: true
  },
     //用于设置x下面的字体
  axisLabel:{
          show:true,  //这里的show用于设置是否显示x轴下的字体 默认为true
　　　　　　　interval:0,  //可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
　　
　　　　　　　textStyle:{   //textStyle里面写x轴下的字体的样式
             color:'#333',
             fontSize:13
          }
     },
  axisLine:{
         show:true,  //这里的show用于设置是否显示x轴那一条线 默认为true
         lineStyle:{ //lineStyle里面写x轴那一条线的样式
           color:'#6FC6F3',
           width:2,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
         }
     }
  },
]

y轴(yAxis)

参考

yAxis:[{
    min:0, //y轴的最小值
    max:100, //y轴最大值 
    interval:20, //值之间的间隔
    //上面的三个值可以根据自己需求随意设置 不设置时会根据图中的值自动生成相应的值
   
   type:'value',
  /* type坐标轴类型:[ default: 'value' ]
　　　　可选：1.'value' 数值轴，适用于连续数据。
　　　　2.'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
       3.'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
       4.'log' 对数轴。适用于对数数据。*/
    splitLine:{show:false}, //去除网状线 默认为true
    //用于设置y轴的字体
    axisLabel:{
            show:true,  //这里的show用于设置是否显示y轴下的字体 默认为true
            textStyle:{   //textStyle里面写y轴下的字体的样式
               color:'#333',
               fontSize:13
            }
       },
     //用于设置y轴的那一条线
    axisLine:{
           show:true,  //这里的show用于设置是否显示y轴那一条线 默认为true
           lineStyle:{ //lineStyle里面写y轴那一条线的样式
             color:'#6FC6F3',
             width:2,    //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
           }
       }
}]