echarts

163 阅读5分钟
var option={

//标题属性
  title:{
    show:true, // true 显示标题  false隐藏标题
    text:'标题', //文本内容  '\n'指定换行
    link:'https://www.baidu.com/', //添加超链接 
    target:null, //支持'self'|'blank',不指定等同的'blank'(新窗口)
    subtext:'副标题', //副标题  '\n'指定换行
    sublink:'https://www.baidu.com/', //副标题超链接 
    subtarget:null,//副标题支持'self'|'blank',不指定等同的'blank'(新窗口)
    x:'center', //水平暗访位置  默认是'left', 可选为'cneter'|'left'|'right'|{number}(x坐标,px单位)
    y:'top', //垂直暗访位置  默认是'top', 可选为'top'|'bottom'|'center'|{number}(坐标,px单位)
    textAlign:null, //水平对齐方式 默认根据x设置自动调整,可选为:'left'|'right'|'center'
    backgroundColor:'rgba(0,0,0,0)',//标题背景颜色
    borderColor:'#ccc',//标题边框颜色 
    borderWidth:0,//标题边框线宽,单位px 
    padding:5, //标题内边框,单位px 默认个方向内边距为5,接受数组分包设定上右下左边距
    itemGap:10,//主副标题纵向间隔,单位px,默认为10
    //主标题文本样式
    textStyle:{
      fontFamily:'Arial',//文字样式
      fontSize:12,  //字体大小
      fontStyle:'normal', //文字是否斜体
      fontWeight:'normal', //字体粗细
      color:'#333', //字体颜色
    }
    //副标题文本样式
    subtextStyle:{
      fontFamily:'Arial',//文字样式
      fontSize:12,  //字体大小
      fontStyle:'normal', //文字是否斜体
      fontWeight:'normal', //字体粗细
      color:'#333', //字体颜色
    },
  }
    
    
   //横坐标轴属性
  xAxis:{
      type:'category', //value、category、time、log
      boundaryGap:false,//坐标两侧留白
      //坐标轴轴线相关设置
      axisLine:{  
        show:true, // 是否隐藏坐标轴的刻度线  默认是true
        onZreo:'true' //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上,只有在另一个轴为数值轴且包含0刻度时有效.默认是true
        onZeroAxisIndex: ,//当有双轴时,可以用这个属性手动指定,在哪个轴的 0 刻度上
        symbol: ['none', 'arrow'],     // 轴线两端箭头,两个值,none表示没有箭头,arrow表示有箭头
        symbolSize: [10, 15],     // 轴线两端箭头大小,数值一表示宽度,数值二表示高度
        symbolOffset: , //轴线两边的箭头的偏移
        //轴线样式
        lineStyle: {
           color: '#333',    // 坐标轴线线的颜色
           width: '5',    // 坐标轴线线宽
           type: 'solid',    // 坐标轴线线的类型(solid实线类型;dashed虚线类型;dotted点状类型)
        },
      },
       //轴文本样式
      data: {
        textStyle: {
           color: '#FFF', // 文字的颜色
           fontStyle: 'normal', // 文字字体的风格(normal无样式;italic斜体;oblique倾斜字体)
            // 字体的粗细(normal无样式;bold加粗;bolder加粗再加粗;lighter变细;数字定义粗细也可以取值范围100至700) 
           fontWeight: 'normal', //文字粗细
           fontSize: '20', // 文字字体大小
           align: 'left', // 文字水平对齐方式,默认自动(left/center/right)
           verticalAlign: 'left', // 文字垂直对齐方式,默认自动(top/middle/bottom)
           lineHeight: '50',  // 行高
           backgroundColor: 'red', // 文字块背景色,例:#123234, red, rgba(0,23,11,0.3)
         },
      },
      //坐标轴刻度相关设置
      axisTick:{
        show: true,    // 是否显示坐标轴刻度
        inside: true,     // 坐标轴刻度是否朝内,默认朝外
        length: 5,    // 坐标轴刻度的长度
        lineStyle: {
            color: '#FFF',     // 刻度线的颜色
            width: 10,    // 坐标轴刻度线宽
            type: 'solid',    // 坐标轴线线的类型(solid实线类型;dashed虚线类型;dotted点状类型)
        }
       },
       //坐标轴刻度标签的相关设置
       axisLabel:{
          show: true,     // 是否显示刻度标签
          interval: '0',    // 坐标轴刻度标签的显示间隔,在类目轴中有效.0显示所有
          inside: true,   // 刻度标签是否朝内,默认朝外
          rotate: 90,   // 刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠;旋转的角度从-90度到90度
          margin: 10,    // 刻度标签与轴线之间的距离
          // formatter 刻度标签的内容格式器,支持字符串模板和回调函数两种形式
          color: '#FFF',     // 刻度标签文字的颜色
          fontStyle: 'normal',    // 字体的风格(normal无样式;italic斜体;oblique倾斜字体) 
          fontWeight: 'normal',  // 字体的粗细(normal无样式;bold加粗;bolder加粗再加粗;lighter变细;数字定义粗细也可以取值范围100至700)  
          fontSize: '20',    // 文字字体大小
          align: 'left',     // 文字水平对齐方式,默认自动(left/center/right)
          verticalAlign: 'left',    // 文字垂直对齐方式,默认自动(top/middle/bottom)
          lineHeight: '50',    // 行高
          backgroundColor: 'red', // 文字块背景色,例:#123234, red, rgba(0,23,11,0.3)
       },
       //坐标轴在 grid 区域中的分隔线设置
       splitLine: {
          show: true,    // 是否显示分隔线。默认数值轴显示,类目轴不显示
          interval: '0',    // 坐标轴刻度标签的显示间隔,在类目轴中有效.0显示所有
          color: ['#ccc'],  // color分隔线颜色,可设置单个颜色,也可设置颜色数组,分隔线会按数组中颜色顺序依次循环设置颜色
          width: 3, // 分隔线线宽
          type: 'solid', // 坐标轴线线的类型(solid实线类型;dashed虚线类型;dotted点状类型)
       },
       //坐标轴在 grid 区域中的分隔区域,默认不显示
       splitArea: {
          show: true, // 是否显示分隔区域
          interval: '0', // 坐标轴刻度标签的显示间隔,在类目轴中有效.0显示所有
          areaStyle: {
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], // color分隔区域颜色。分隔区会按数组中颜色顺序依次循环设置颜色。默认是一个深浅的间隔色
            opacity: 1, // 图形透明度。支持从0到1的数字,为0时不绘制该图形
          },
       },
  },
  
  
  //自定义鼠标点上去的弹框显示
  toolbar:{
  }
  
  // 
  legend: {
    data: ['长沙', '武汉', '安阳','南昌'],//对应series里面name名称
    textStyle:{// 对应的文字样式
      color:'#697189' //颜色
    },
    icon:'rect',//方形icon
    itemWidth:15, //图标宽度
    itemHeight:5, //图标高度
    bottom:'5'//下边距
  },
  
  
  //相当于data数据的相关配置  里面可以多对象
  series:[
     {
      name: '长沙/复星合力',
      type: 'line',
      stack: 'Total', //数据是否叠加
      data: [120, 132, 101, 134], //数据值
      color: '#386dff', //数据颜色
      lineStyle: {
        type: 'dashed',    // 坐标轴线线的类型(solid实线类型;dashed虚线类型;dotted点状类型)
      },
      emphasis:{//鼠标经过时
      },
      showSymbol: false,
      encode: {
          x: 'Year',
          y: 'Income',
          itemName: 'Year',
          tooltip: ['Income']
      },  
    },
  ]
}