Echarts在线免费图表

 
            let data = [
   {
      date: '2023/10/1',
      data: {
         startValue: 15,
         endValue: 20
      }
   },
   {
      date: '2023/10/2',
      data: {
         startValue: 16,
         endValue: 23
      }
   },
   {
      date: '2023/10/3',
      data: {
         startValue: 20,
         endValue: 32
      }
   },
   {
      date: '2023/10/4',
      data: {
         startValue: 14,
         endValue: 25
      }
   },
   {
      date: '2023/10/5',
      data: {
         startValue: 9,
         endValue: 23
      }
   },
   {
      date: '2023/10/6',
      data: {
         startValue: 5,
         endValue: 20
      }
   },
   {
      date: '2023/10/7',
      data: {
         startValue: -5,
         endValue: 20
      }
   },
];

let xdata = [];
let seriesData = [];
let seriesMarkData = [];
let maxDataValue = Math.max(...data.map(item => item.data.endValue));
let yAxisMax = maxDataValue + 10; // 这里加 10 以确保数字不会超出图表
let lineData = data.map(item => (item.data.startValue + item.data.endValue) / 2);

data.map((item, key) => {
   xdata.push(item.date);
   let { startValue, endValue } = item.data;
   seriesData.push(
      [
         startValue,
         endValue,
         startValue,
         endValue
      ]
   );
   seriesMarkData.push({
      yAxis: startValue,
      xAxis: key,
   }, {
      yAxis: endValue,
      xAxis: key,
   });
});

option = {
   xAxis: {
      data: xdata,
      axisTick: { show: false },  // 不显示 x 轴刻度
   },
   yAxis: {
      axisLine: { show: true },  // 显示 y 轴的轴线
      axisTick: { show: false },  // 不显示 y 轴的刻度
      splitLine: {
         lineStyle: {
            type: 'dashed'  // 将横线设置为虚线
         }
      }
   },
   tooltip: {
      trigger: 'axis',
      formatter: (params) => {
         let value = params[0];
         return `
         <nav>${value.marker} ${value.name}</nav>
         <nav>${value.data[1]}-${value.data[2]}</nav>`;
      }
   },
   backgroundColor: "#fff",
   series: [
      {
         type: 'custom',
         renderItem: function (params, api) {
            const categoryIndex = api.value(0);
            const start = api.coord([categoryIndex, api.value(1)]);
            const end = api.coord([categoryIndex, api.value(2)]);
            const width = 14;
            const height = end[1] - start[1];
            const x = start[0] - width / 2;
            const y = start[1];

            return {
               type: 'group',
               children: [
                  {
                     type: 'rect',
                     shape: {
                        x: x,
                        y: y,
                        width: width,
                        height: height,
                        r: 10 // 圆角半径
                     },
                     style: api.style({
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                           { offset: 0, color: '#AAE236' },
                           { offset: 1, color: '#2DF9E7' }
                        ])
                     })
                  },
                  {
                     type: 'text',
                     style: {
                        text: api.value(1) + ' °C',
                        x: x + width / 2,
                        y: y + 16, // 将文本位置调整到柱形外部
                        textAlign: 'center',
                        textVerticalAlign: 'bottom',
                        fill: '#53E0C5'
                     }
                  },
                  {
                     type: 'text',
                     style: {
                        text: api.value(2) + ' °C',
                        x: x + width / 2,
                        y: y + height - 16, // 将文本位置调整到柱形外部
                        textAlign: 'center',
                        textVerticalAlign: 'top',
                        fill: '#AAE236',
                     }
                  }
               ]
            };
         },
         encode: {
            x: 0,
            y: [1, 2]
         },
         data: seriesData.map((d, i) => ({
            value: [i, d[0], d[1]],
            tooltip: { // 为每个数据点添加tooltip属性
               formatter: `${d[0]}-${d[1]}`
            }
         }))
      },
      {
         type: 'line',
         data: lineData,
         smooth: false, // 不带弧度
         symbol: 'none', // 去掉折线上的圆点
         lineStyle: {
            color: '#ab5512' // 设置折线颜色
         },
         areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: 'rgba(254,113,44,0.28)' },
               { offset: 0.5, color: 'rgba(254,113,44,0.14)' }, // 中间位置
               { offset: 1, color: 'rgba(255,255,255,0)' } // 底部位置
            ])
         }
      }
   ]
};