Echarts在线免费图表

 
            const time = ['2023-1', '2023-2', '2023-3', '2023-4', '2023-5', '2023-6', '2023-7', '2023-8']
const data = [
   { name: '前纺', data: [100, 200, 300, 400, 500, 600, 500, 600] },
   { name: '后纺', data: [200, 300, 400, null, 200, 500, 700, 800] },
]

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' // 设置字体颜色
      },
      // valueFormatter: (params) => {
      //    return params + 'kg'
      // }
      formatter: function (params) {
         const time = params[0].name || ''
         const before = params[0] || ''
         const after = params[1] || ''
         // 使用CSS样式来设置marker的形状为方形
         const beforeMarkerStyle = 'display: inline-block; width: 5px; height: 14px; margin-right:3px; background-color: ' + before.color + ';';
         const afterMarkerStyle = 'display: inline-block; width: 5px; height: 14px; margin-right:3px; background-color: ' + after.color + ';';
         const beforeContent = before ? `${'<span style="' + beforeMarkerStyle + '"></span>'} 前纺: ${before.value ?? ''} kg <br />` : ''
         const afterContent = after ? `${'<span style="' + afterMarkerStyle + '"></span>'} 后纺: ${after.value ?? ''} kg <br />` : ''
         return `${time}<br/>${beforeContent}${afterContent}`
      },
   },
   legend: {
      icon: 'stack',
      itemWidth: 10,
      itemHeight: 5,
      textStyle: {
         fontSize: 14,
         color: '#e0e1e2', // 设置字体颜色
         padding: [10, 10] // 设置文字与图例的距离
      },
      itemGap: 20,// 设置图例项之间的间距
      itemStyle: {
         borderWidth: 0
      }
   },
   grid: {
      left: '10%',
      right: '10%',
      bottom: '10%',
      top: '20%',
      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',
         min: "0",
         // max: 100,
         splitLine: {
            show: false
         },
         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',
      emphasis: {
         focus: 'series',//高亮显示
      },
      symbolSize: 8,
      data: data[0].data,
      smooth: false,//曲线
      itemStyle: {
         // 折线拐点标志的样式
         borderColor: 'rgba(255,255,255)',
         borderWidth: 2
      },
      // z: 2,
      areaStyle: {
         normal: {
            color: new echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [
                  {
                     offset: 0,
                     color: "rgba(23, 103, 144)"
                  },
                  {
                     offset: 0.5,
                     color: "rgba(29, 120, 159)"
                  },
                  {
                     offset: 1,
                     color: "rgba(2, 71, 135)"
                  }
               ],
            )
         }
      }
   },
   {
      name: '后纺',
      type: 'line',
      symbol: 'circle',
      symbolSize: 8,
      data: data[1].data,
      smooth: false,//曲线
      itemStyle: {
         //折线拐点标志的样式
         borderColor: 'rgba(255,255,255)',
         borderWidth: 2
      },
      emphasis: {
         focus: 'series',//高亮显示
      },
      areaStyle: {
         normal: {
            color: new echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [
                  {
                     offset: 0,
                     color: "rgba(41, 122, 129)"
                  },
                  {
                     offset: 0.5,
                     color: "rgba(23, 97, 127)"
                  },
                  {
                     offset: 1,
                     color: "rgba(2, 71, 135)"
                  }
               ],
            )
         }
      }
   },

   ]
};