Echarts在线免费图表

 
            let scatterData = {
   data: [
      [
         [0.2, 0.6],
         [0.4, 0.3],
         [0.1, 0.4],
         [0.3, 0.5],
         [0.09, 0.1],
         [0.7, 0.3],
         [0.9, 0.4],
         [0.05, 0.8],
         [0.6, 0.7],
         [0.1, 0.3],
      ],
      [
         [0.3, 0.1],
         [0.7, 0.1],
         [0.4, 0.4],
         [0.5, 0.8],
         [0.05, 0.6],
         [0.1, 0.9],
         [0.9, 0.2],
         [0.08, 0.1],
         [0.5, 0.6],
         [0.1, 0.09],
      ],
   ],
   title: ["normal", 'default'],
   x: 0.4,
   y: 0.4,
}

let colorList = [
   "#b33ecb",
   "#ffbe24",
   "#4727f1",
   "#fb3978",
   "#f3954f",
   "#1b3f89",
   "#036ceb",
]

let series = [
   {
      type: "line",
      markLine: {
         silent: true,
         symbol: "none",
         lineStyle: {
            normal: {
               type: "solid",
               color: "#785a2d",
            },
         },
         label: {
            show: true,
            position: "start",
            color: "#fff",
            backgroundColor: "#ff751a",
            padding: [2, 4],
         },
         data: [
            {
               yAxis: scatterData.y,
            },
            {
               xAxis: scatterData.x,
            },
         ],
      },
   },
];

scatterData.data.forEach((v, i) => {
   series.push({
      name: scatterData.title[i],
      type: "scatter",
      data: v,
   });
});

option = {
   backgroundColor: '#000',
   color: colorList,
   grid: {
      top: "12%",
      left: "8%",
      right: "12%",
      bottom: "15%",
   },
   tooltip: {
      trigger: "axis",
      axisPointer: {
         type: "cross",
      },
      formatter: (params) => {
         return `<div>
            <span style="color:#fff;display: inline-block;width: 86px;">物资费占比:</span>
            <span style="color:#fff">${params[0].data[0]}</span>
            <br/>
            <span style="color:#fff;display: inline-block;width: 86px;">服务费占比:</span>
            <span style="color:#fff">${params[0].data[1]}</span>
            </div>`;
      },
   },
   legend: {
      top: '8%',
      itemWidth: 8,
      data: scatterData.title,
      orient: "horizontal",
      x: "center", //可设定图例在左、右、居中
      y: "top", //可设定图例在上、下、居中
      padding: [0, 0, 25, 0],
      textStyle: {
         color: "#fff",
      },
   },
   xAxis: {
      name: '物资费占比',
      axisLabel: {
         show: true,
         textStyle: {
            color: "#fff",
         },
      },
      axisLine: {
         show: true,
         lineStyle: {
            type: 'solid',
            color: '#2D4377',
            opacity: 1
         }
      },
      splitLine: {
         show: false,
      },
   },
   yAxis: {
      name: '服务费占比',

      axisLabel: {
         show: true,
         textStyle: {
            color: "#fff",
         },
      },
      axisLine: {
         show: true,
         lineStyle: {
            type: 'solid',
            color: '#2D4377',
            opacity: 1
         }
      },
      splitLine: {
         show: false,
      },
   },
   series: series,
};