Echarts 折线图详细配置

折线图主要调整包括以下数据：

• 参数：grid
• 图表头部
• 图表颜色X轴
• 图表颜色Y轴

option = {
  title: {
    text: 'Stacked Line' //标题
  },
  tooltip: {
    trigger: 'axis' //鼠标悬浮
  },
  grid: {
    left: '5%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  //调正以后的位置
  grid: {
          x: "10%", //x 偏移量
          y: "7%", // y 偏移量
          width: "85%", // 宽度
          height: "55%", // 高度
          right: "15%",
   },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false, //false没有边距，true有边距
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    axisTick: { show: false, //去除刻度线 },
    axisLabel: { color: '#4d4d4d', fontSize: 11, interval: 0,  },
    //x轴刻度配置，0:表示全部显示不间隔，auto:表示自动根据刻度个数和宽度自动设置间隔个数
    axisLine: { lineStyle: { color: '#e6e6e6', } },//y轴轴线颜色 
  },
  yAxis: {
    type: 'value',
    axisLine: { lineStyle: { color: "#e6e6e6", //y轴轴线颜色 } },
    axisTick: { show: false, //去除刻度线 }, 
    axisLabel: { color: '#4d4d4d', //文本颜色 },
    splitLine: {  lineStyle: { color: "#e6e6e6", type: "dashed", }, show: true },//网格线
  },
  series: [
  { 
  type: "line", 
  data: [233, 44, 33, 333, 434, 155, 600, 134, 343, 11], 
  symbolSize: 6, //拐点大小 
  color: ["#DC4A46"], 
  smooth: false, //折线有无弧度 
  animationDuration: 500, 
  markLine: { //平均线设置 
  silent: true, //true去掉鼠标悬浮线上的动画 
  symbol: "none", //该线无样式 
  label: { 
  show: false, //该线上得值去掉 
  formatter: "均客线", 
  padding: [-13, -20, -40, -45] }, 
  lineStyle: { 
  normal: { type: "solid", color: "#000000" } }, 
  data: [{ type: 'average', name: "平均值" }] }}
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ],
  tooltip: {
  //提示框取值默认值，即鼠标移动到柱状图会显示内容 
  trigger: "axis", //触发类型；轴触发，axis则鼠标hover到折线图显示全部数据，
  item则鼠标hover到折线点显示相应数据 
  position: function (point, params, dom, rect, size) { 
  //设置提示框位置随鼠标移动，并解决提示框显示不全的问题 
  var x = 0; //x坐标位置 
  var y = 0; //y坐标位置 
  var pointX = point[0]; //当前鼠标位置 
  var pointY = point[1]; 
  var boxWidth = size.contentSize[0]; //提示框大小 
  var boxHeight = size.contentSize[1]; 
      if (boxWidth > pointX) { 
      //boxWdith > pointx 说明鼠标左边放不下提示框 
      x = 5; } 
      else { //左边放得下 
      x = pointX - boxWidth; } 
      //boxHeight > pointY 说明鼠标上边放不下提示框 
      if (boxHeight > pointY) { y = 5; } 
      else { //上边放得下 y = pointY - boxHeight; } 
      return [x, y] }, axisPointer: { type: "line" }, 
      formatter: function (params) { 
      //提示框文案 
      return curYear + '.' + params[0].name + '<br/>' + "客流：" + params[0].value } 
      },
      // 缩放平移组件 
    dataZoom: [ { type: 'inside',
    //slider有滑块，inside内置 
    disabled: false, //是否停止组件功能 
    xAxisIndex: 0, //x轴,可以用数组表示多个轴 
    zoomLock: true, //是否锁定区域大小（true,只能平移不能缩放） 
    preventDefaultMouseMove: false, filterMode: "empty", 
    startValue: startValue, //一行有几个（起始数组下标） 
    endValue: endValue, //一行有几个（结束数组下标） start: null, end: null, }, ]
};