echart常用曲线图和折线图配置

// 点播统计趋势图
let DemandStatisticsBar = Echart.init(document.getElementsByClassName('demand-statistics-bar')[0]);
DemandStatisticsBar.setOption({
  title: {
    text: '点播统计趋势图',
    ...setEchartTitle, //在常用的echart标题博文中出现过
  },
  //是否启用鼠标移动到数据上时的提示框工具
  tooltip: {
    show: true,
  },
  //条形图，曲线图，折线图通过这个配置绘图位置
  grid: {
    x: 60,
    y: 60,
  },
  
  yAxis: {
    max: 1500, //y轴最大值
    interval: 300, //一轴间隔值
    ...setAxis, //在常用轴线配置博文中出现过
    // y轴轴线配置
    axisLine: {
      lineStyle: {
        width: 1, //轴线宽度
        color: '#305682', //轴线颜色
      },
    },
    //y轴轴线的刻度显示，默认为true，不需要时，让show为false
    axisTick: {
      show: true,
      lineStyle: {
        color: '#305682', //刻度的颜色
      },
    },
    // scale: true //y轴脱离0刻度值，但不能设置max和min，否则无效
  },
  xAxis: {
    data: ['02-24', '02-24', '02-24', '02-24', '02-24', '02-24', '02-24', '02-24'],
    ...setAxis,
    axisLine: {
      lineStyle: {
        width: 1,
        color: '#305682',
      },
    },
    axisTick: {
      show: true,
      alignWithLabel: {
        boundaryGap: true, //x坐标轴分隔线和字体是否对齐,默认是不对齐的
      },
    },
    boundaryGap: false, //x坐标轴开始位置从0处开始
    // gridIndex: 0,
  },
  series: {
    type: 'line',
    //symbol: 'none', //取消折线上的圆点
    smooth: true, //true就是曲线，false就是折线，默认false
    data: [300, 400, 562, 213, 678, 900, 561, 477],
    itemStyle: {
      normal: {
        lineStyle: {
        	// 曲线的颜色，用了一个线性渐变色
        	// 0,0, 1, 0 分别表示x y x2 y2 用来控制线性渐变的方向
        	// 表示渐变方向为从左向右
          color: new Echart.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0, //百分之0处的颜色，必须存在，不得大于1
              color: '#17fda6',
            },
            {
              offset: 0.2,
              color: '#0984bf',
            },
            {
              offset: 1,
              color: '#6c6dd8',
            },
          ]), //折线的颜色
        },
        //曲线图或者折线图下方填充区样式配置
        areaStyle: {
        	// 采用线性渐变颜色 从左向右，从上到下
          color: new Echart.graphic.LinearGradient(0, 0, 1, 1, [
            {
              offset: 0,
              color: 'rgba(23,253,166,0.5)',
            },
            {
              offset: 0.5,
              color: 'rgba(9,132,191,0.6)',
            },
            {
              offset: 1,
              color: 'rgba(108,109,216,0.7)',
            },
          ]),
        },
      },
    },
  },
});