Echarts在线免费图表

 
            const time = ['2023-1', '2023-2', '2023-3', '2023-4', '2023-5']
const data = [
  { name: '温度', data: [10, -20, null, 20, 20] },
  { name: '湿度', data: [30, 0, 20, null] },
]

option = {
  backgroundColor: 'rgba(0, 55, 107)',
  color: ['rgba(28, 205, 255)', 'rgba(47, 255, 208)'],
  tooltip: {
    trigger: 'axis',
    borderWidth: 0,
    backgroundColor: 'rgba(1, 65, 122,0.5)',
    textStyle: { // 添加 textStyle 属性
      color: '#fff' // 设置字体颜色
    },
    formatter: function (params) {
      const time = params[0].name || ''
      const tem = params[0] || ''
      const hum = params[1] || ''
      // 使用CSS样式来设置marker的形状为方形
      const temMarkerStyle = 'display: inline-block; width: 5px; height: 14px; margin-right:3px; background-color: ' + tem.color + ';';
      const humMarkerStyle = 'display: inline-block; width: 5px; height: 14px; margin-right:3px; background-color: ' + hum.color + ';';
      const temContent = tem ? `${'<span style="' + temMarkerStyle + '"></span>'} 温度: ${tem.value ?? ''}℃ <br />` : ''
      const humContent = hum ? `${'<span style="' + humMarkerStyle + '"></span>'} 湿度: ${hum.value ?? ''}% <br />` : ''
      return `${time}<br/>${temContent}${humContent}`
    },
  },
  legend: {
    icon: 'stack',
    itemWidth: 10,
    itemHeight: 5,
    textStyle: {
      fontSize: 14,
      color: '#e0e1e2', // 设置字体颜色
      padding: [10, 10] // 设置文字与图例的距离
    },
    itemStyle: {
      borderWidth: 0
    },
    formatter: function (name) {	// 添加
      if (name == '温度') {
        return name + ' (℃)'
      } else if (name == '湿度') {
        return name + ' (%)'
      }
    },
    itemGap: 20 // 设置图例项之间的间距
  },
  grid: {
    left: '6%',
    right: '4%',
    bottom: '20%',
    top: '10%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,//两侧留白
    axisLine: {
      lineStyle: {
        color: 'rgba(2, 119, 175)',
        width: 2,
        type: 'solid',
      },
      show: true,
      onZero: false // 将 x 轴坐标轴置于最低刻度上
    },
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: {
          type: 'line',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'rgba(38, 159, 193,.5)' // 100% 处的颜色
          }, {
            offset: 1, color: 'rgba(38, 159, 193,.5)' // 0% 处的颜色  #000613','#00334f', '#77f0ff'
          }],
        },
        type: 'solid',
        width: 24
      },
    },
    axisLabel: {
      interval: 1,
      color: 'rgba(255,255,255)', //更改坐标轴文字颜色
      fontSize: 12, //更改坐标轴文字大小
      margin: 20
    },
    axisTick: {
      show: true,
      alignWithLabel: true,
      lineStyle: {
        color: 'rgba(2, 119, 175)', // 刻度线颜色
        width: 2, // 刻度线宽度
      },
      length: 6, // 刻度线的长度
    },
    data: time,
  },
  yAxis: [
    // {
    //   name: '湿度',
    //   type: 'value',
    //   axisLine: {
    //     show: false,
    //   },
    //   splitLine: {
    //     interval: 0,
    //     show: true, // 开启分割线
    //     lineStyle: {
    //       color: 'rgba(6, 88, 142)',
    //       width: 2,
    //       type: [6, 3],
    //     },
    //   },
    //   axisTick: {
    //     show: false,
    //   },
    //   axisLabel: {
    //     show: false
    //   },
    // },
    {
      // name: '温度',
      type: 'value',
      min: "dataMin",
      // max: 100,
      splitLine: {
        interval: 0,
        show: true, // 开启分割线
        lineStyle: {
          color: 'rgba(6, 88, 142)',
          width: 2,
          type: [6, 3],
        },
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        color: 'rgba(207, 219, 230)'
      },
      position: 'left',
    }
  ],
  series: [{
    name: '温度',
    type: 'line',
    symbol: 'circle',
    symbolSize: 8,
    emphasis: {
      focus: 'series',
    },
    itemStyle: {
      //折线拐点标志的样式
      borderColor: 'rgba(255,255,255)',
      borderWidth: 2
    },
    data: data[0].data,
    // yAxisIndex: 1,
    smooth: true,
    // tooltip: {
    //   valueFormatter: function (val) {
    //     return val + '℃'
    //   }
    // }
  },
  {
    name: '湿度',
    type: 'line',
    symbol: 'circle',
    symbolSize: 8,
    emphasis: {
      focus: 'series',
    },
    itemStyle: {
      //折线拐点标志的样式
      borderColor: 'rgba(255,255,255)',
      borderWidth: 2
    },
    data: data[1].data,
    // yAxisIndex: 0,
    smooth: true,
    // tooltip: {
    //   valueFormatter: function (val) {
    //     return val + '%'
    //   }
    // }
  },

  ]
};