Echarts在线免费图表

 
            const xAxisTickData = [
  {
    name: '0.075', // 在x轴显示的数值
    xAxis: 0.312 // 与series每一项的data二维数组的第一个元素对应的值
  },
  {
    name: '0.15',
    xAxis: 0.426
  },
  {
    name: '0.3',
    xAxis: 0.582
  },
  {
    name: '0.6',
    xAxis: 0.795
  },
  {
    name: '1.18',
    xAxis: 1.077
  },
  {
    name: '2.36',
    xAxis: 1.472
  },
  {
    name: '4.75',
    xAxis: 2.016
  },
  {
    name: '9.5',
    xAxis: 2.754
  },
  {
    name: '13.2',
    xAxis: 3.193
  },
  {
    name: '16.0',
    xAxis: 3.482
  },
  {
    name: '19.0',
    xAxis: 3.762
  },
  {
    name: '26.5',
    xAxis: 4.370
  },
  {
    name: '31.5',
    xAxis: 4.723
  }
]
option = {
  backgroundColor:'#0D2038',
  grid: {
    top: "5%",
    left: "2%",
    right: "2%",
    bottom: "18%",
    containLabel: true,
  },
  tooltip: {
    trigger: 'axis',
    padding: [8, 12.5, 8, 12.5],
    backgroundColor: 'rgb(7, 40, 85, 0.7);',
    borderColor: '#53B4FF',
    textStyle: {
      color: "white" //设置文字颜色
    },
    axisPointer: {//设置悬停突出显示x轴值
      label: {
        show: true,
        backgroundColor: '#0b1f56',
        color: '#fff',
        fontSize: 12,
        formatter: (param) => { 
          //突出显示x轴坐标值（原本显示的是xAxisTickData每一项的xAxis）
          return `${xAxisTickData[param.seriesData[0].dataIndex].name}`
        },
      },
    },
    formatter: (param) => {
      // console.log(param)
      let content = `${xAxisTickData[param[0].dataIndex].name}</br>`;
      param.forEach((item) => {
         content += `${item.marker + item.seriesName} : ${item.value[1]}%</br>`;
      });
      return content;
   
    },
  },
  xAxis: {
    type: "value",
    axisTick: {
      show: false //是否显示x轴刻度
    },
    splitLine: {
      show: false //是否显示垂直x轴的刻度线
    },
    axisLabel: {
      show: false //是否显示x轴每个刻度对应的值
    }
  },
  yAxis: {
    type: "value",
    axisTick: {
      show: false //是否显示示刻度
    },
    axisLine: {
      show: true, // 是否显示坐标轴线
    },
    splitLine: { //平行于x轴的y轴刻度线条
      show: true,
      lineStyle: {
        type:'dashed',
        color:'rgba(230, 247, 255, 0.20)',//设置垂直y轴线的颜色
      }
    }
  },
  series: [
    {
      name: "最大值",
      showSymbol: false,
      smooth: true,
      itemStyle: {
        color: "#4a65b3",
        width: 3,
        shadowColor: "#1890FF",
        shadowBlur: 20
      },
      data: [
        //每个数组第一个值对应的xAxisTickData每一项的xAxis的值
        [0.312, 5],
        [0.426, 12],
        [0.582, 18],
        [0.795, 24],
        [1.077, 33],
        [1.472, 42],
        [2.016, 52],
        [2.754, 65],
        [3.193, 77],
        [3.482, 83],
        [3.762, 90],
        [4.370, 98],
        [4.723, 100],
      ],
      type: "line",
      markLine: {
        symbol: [
          "none",
          "none"
        ],
        silent: true,
        label: {
          show: true,
          position: 'start',
          formatter: "{b}",
          color: "gray",
        },
        lineStyle: {
          type:'dashed',
          color:'rgba(230, 247, 255, 0.20)',//设置垂直x轴线的颜色
        },
        data: xAxisTickData
      }
    },
    {
      name: "实际值",
      showSymbol: true,
      smooth: true,
      itemStyle: {
        color: "#3de7c9",
        width: 3,
        shadowColor: "#1890FF",
        shadowBlur: 20
      },
      data: [
        [0.312, 5],
        [0.426, 7],
        [0.582, 10],
        [0.795, 16],
        [1.077, 22],
        [1.472, 30.5],
        [2.016, 38.9],
        [2.754, 55],
        [3.193, 63],
        [3.482, 72],
        [3.762, 83],
        [4.370, 95],
        [4.723, 100],
      ],
      type: "line",
      markLine: {
        symbol: [
          "none",
          "none"
        ],
        silent: true,
        label: {
          show: true,
          position: 'start',
          formatter: "{b}",
          color: "gray",
        },
        lineStyle: {
          type: 'dashed',
          color: 'rgba(245, 245, 245,0.1)'
        },
        data: xAxisTickData
      }
    },
    {
      name: "最小值",
      showSymbol: false,
      smooth: true,
      itemStyle: {
        color: "#4a65b3",
        width: 3,
        shadowColor: "#1890FF",
        shadowBlur: 20
      },
      data: [
        [0.312, 5],
        [0.426, 5.5],
        [0.582, 6.1],
        [0.795, 8],
        [1.077, 12],
        [1.472, 17],
        [2.016, 24],
        [2.754, 44],
        [3.193, 58],
        [3.482, 65],
        [3.762, 74],
        [4.370, 90],
        [4.723, 100],
      ],
      type: "line",
      markLine: {
        symbol: [
          "none",
          "none"
        ],
        silent: true,
        label: {
          show: true,
          position: 'start',
          formatter: "{b}",
          color: "dark",
        },
        lineStyle: {
          type: 'dashed',
          color: 'rgba(245, 245, 245,0.1)'
        },
        data: xAxisTickData
      }
    },
  ],
}