Echarts在线免费图表

 
            let data = [
   {
      date: '2023/10/1',
      data: {
         startValue: 30,
         endValue: 60
      }
   },
   {
      date: '2023/10/2',
      data: {
         startValue: 80,
         endValue: 120
      }
   },
   {
      date: '2023/10/3',
      data: {
         startValue: 10,
         endValue: 32
      }
   },
   {
      date: '2023/10/4',
      data: {
         startValue: 40,
         endValue: 60
      }
   },
]
let xdata = [];
let seriesData = [];
let seriesMarkData = [];
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
   },
   yAxis: {},
   tooltip: {
      trigger: 'axis',
      formatter: (values) => {
         let value = values[0];
         return `
         <nav>${value.marker} ${value.name}</nav>
         <nav>${value.data[1]}-${value.data[2]}</nav>`
      }
   },
   backgroundColor: "#fff",
   series: [
      {
         type: 'candlestick',
         itemStyle: {
            borderWidth: 0,
            color: '#1677ff',
         },
         barWidth: 10,
         data: seriesData,
         markPoint: {
            symbol: 'circle',
            symbolSize: 20,
            tooltip: { show: false },
            silent: true,
            data: seriesMarkData
         }
      }
   ]
};