Echarts在线免费图表

 
            function getNextDate(date, day) {
  let dd = new Date(date);
  // 对于day一定要Number
  dd.setDate(dd.getDate() + Number(day));
  let y = dd.getFullYear();
  let m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1;
  let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate();
  return y + '-' + m + '-' + d;
}
const xData = [getNextDate(new Date(), '-6'), getNextDate(new Date(), '-5'), getNextDate(new Date(), '-4'), getNextDate(new Date(), '-3'), getNextDate(new Date(), '-2'), getNextDate(new Date(), '-1'), getNextDate(new Date(), '0')]
const IPData = [4, 7, 12, 9, 10, 14, 9]
const userData = [56, 88, 143, 80, 111, 124, 77]
option = {
  backgroundColor: "#fff",
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    },
    formatter: function (params) {
      console.log(params)
      let str = '';
      // let str = params[0].seriesName + '：' + params[0].value + '</br>';
      let str1 = '';
      for (let i = 0; i < params.length; i++) {
        if (i % 2 !== 0) {
          if (params[i].value || params[i].value !== undefined) {
            str += params[i].seriesName + '：' + params[i].value + '</br>'
            str1 = params[i].name + '</br>' + str
          }
        }
      }
      return str1;
    },
  },
  legend: {
    top: 'top'
  },
  grid: {
    left: '15%'
  },
  xAxis: {
    type: "category",
    data: xData,
    axisLabel: {
      color: function (value) {
        if (value === getNextDate(new Date(), '0')) {
          return 'red';
        } else {
          return '#333'; // 普通颜色
        }
      }
    },
    axisLine: {
      lineStyle: {
        color: "#333",
        width: 1
      }
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    // name: "数量",
    type: "value",
    boundaryGap: [0, 0.01],
    axisLine: {
      lineStyle: {
        color: "#333",
        width: 1
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed", //y轴分割线类型
        color: "rgba(0, 0, 0, 0.30)"
      }
    },
    axisTick: {
      show: false
    }
  },

  series: [
    {
      name: "IP总数",
      type: "bar",
      data: IPData,
      barWidth: 20,
      stack: "总量",
      itemStyle: {
        normal: {
          label: {
            show: true,
            textStyle: {
              color: "#000",
            },
            position: "top",
          },
          borderWidth: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(244,160,81,1)"
            },

            {
              offset: 1,
              color: "rgba(244,160,81,0.3)"
            }
          ])
        }
      }
    },
    {
      name: "IP总数",
      type: "line",
      data: IPData,
      stack: "总量12",
      color: "rgba(244,160,81,1)"
      // itemStyle: {
      //   normal: {
      //     label: {
      //       show: true,
      //       textStyle: {
      //         color: "#000",
      //       },
      //       position: "top",
      //     },
      //     borderWidth: 5,
      //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //       {
      //         offset: 0,
      //         color: "rgba(244,160,81,1)"
      //       },

      //       {
      //         offset: 1,
      //         color: "rgba(244,160,81,0.3)"
      //       }
      //     ])
      //   }
      // }
    },
    {
      name: "用户访问总数",
      type: "bar",
      data: userData,
      barWidth: 20,
      // stack: "总量1",
      itemStyle: {
        normal: {
          label: {
            show: true,
            textStyle: {
              color: "#000",
            },
            position: "top",
          },
          borderWidth: 5,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(33,195,248,1)"
            },

            {
              offset: 1,
              color: "rgba(33,195,248,0.3)"
            }
          ])
        }
      }
    }, {
      name: "用户访问总数",
      type: "line",
      data: userData,
      // barWidth: 20,
      stack: "总量21",
      color: "rgba(33,195,248,1)",
    },
  ]
};