JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

Echart配置折线图

2020. 10. 20    

Echart配置折线图相关

option = {
  xAxis: {
    type: 'category',
    boundaryGap : false,//视图绘制是否从原点开始(靠不靠近Y轴方向)
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    scale: true,//Y轴自动以数据最低点为起始点
  },
  //自定义图例
  tooltip: {
    trigger: 'axis',
    formatter: function (datas) {
      console.log(datas)
      let str = '';
      str = `${datas[0].axisValue}<br>
        <span style='
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background:#01FF7D;margin-right:5px;'>
        </span>${datas[0].seriesName}:${datas[0].data.value}<br>
        <span style='
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background:#0179FF;margin-right:5px;'>
        </span>${datas[1].seriesName}:${datas[1].data.value}`
      return str;
    },
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    symbolSize: 8,   //拐点圆的大小
    connectNulls: true,  //折线图断点连接
    lineStyle: {
      normal: {
        color: 'red',//折线的颜色
        width: '1'//折线粗细
      }
    },
    itemStyle: {
      normal: {
        color: 'red',//拐点颜色
        borderColor: 'red',//拐点边框颜色
        borderWidth: 1//拐点边框大小
      },
      emphasis: {
        color: '#fff'//hover拐点颜色定义
      }
    },
    //折线图线的样式左右渐变
    //通过改变 LinearGradient(0, 0, 1, 0,)这四个参数
    //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
    // lineStyle: {
    //   width: 5,
    //   color: new echarts.graphic.LinearGradient(0, 0, 1, 0, 
    //     [
    //       {
    //       offset: 0,
    //       color: 'red'
    //       },
    //       {
    //         offset: 1,
    //         color: '#01FF7D'
    //       }
    //     ]),
    //   shadowColor: 'rgba(254,154,139, 0.3)',//线阴影的颜色
    //   shadowBlur: 10,//线阴影的模糊范围
    //   shadowOffsetY: 20//线阴影的偏移量
    // },
    areaStyle: {//是否显示折线下面区块的颜色
      normal: {
        color: '#999999'//折线下面区块的颜色
      }
    },

  }]
};