Echarts的基础配置

更加详细内容请前往官方文档 Documentation - Apache ECharts

1.提示框

tooltip: {
  trigger: 'axis',        // 出发选择类型
  axisPointer: {          // 坐标轴指示器配置项
    type: 'line',         // 可选指示器类型  'line' 'shadow' 'none' 'cross'
    lineStyle: {          
      width: 1,
      color: '#4082FF',
    },
  },
},

2. 网格

 grid: {
         show: false,    // 是否显示直角坐标系网格 默认为false
         left： '10%'     // 离容器显示的距离
         width: 'auto',   
         backgroundColor: 'rgba(0,0,0,0)',   // 网格背景色
         borderWidth: 1,   // 边框宽度
         borderColor: '#ccc'  // 边框颜色
         shadowBlur: 2,       // 阴影
     },

3. 直角坐标系X和Y轴

xAxis: {
  type: 'category',           // 坐标轴类型 可选'value' 'category' 'time' 'log'
  boundaryGap: true,          // 刻度线
  interval: 'auto',       // 坐标轴之间的间距
  data: timeList     // x轴底部显示数据
  position: bottom,  // data数据默认底部 可调顶部（top）   
offset： 5         // data数据离x轴的距离
  axisTick: {        
    show: false,     // 刻度线是否显示
    inside：false    // 刻度线默认朝外
  },
},

4. series属性配置

series: [
  {
    type: 'line',
    smooth: true,        // 是否平滑曲线显示
    data: dataList,      // 要展示的数据
    type: 'line',        
    areaStyle: {},       // 区域填充样式
    itemStyle: {         // 折线拐点标志样式
      color: 'rgba(64,130,255,0.5)',
    },
  }
]

猜你喜欢