Echarts在线免费图表

 
            let obj = {
   // xLabel: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
   xLabel: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',],
   yData1: [0.7, 0.6, 0.5, 0.7, 0.6, 0.5, 0.7, 0.6, 0.5, 0.7, 0.6, 0.5],
   yData2: [0.6, 0.5, 0.4, 0.6, 0.5, 0.4, 0.6, 0.5, 0.4, 0.6, 0.5, 0.4],
   yName1: "2022年",
   yName2: "2023年"
}

let option = {
   backgroundColor: 'rgba(0,0,0,1)',
   grid: {
      top: '10%',
      left: '14%',
      right: '5%',
      bottom: '30%',
      // containLabel: true
   },
   legend: [{
      show: true,
      // icon: 'rect',
      right: '15%',
      top: '0%',
      itemWidth: 20,
      itemHeight: 10,
      textStyle: {
         fontSize: 14,
         color: '#fff',
         fontfamily: 'PingFangSC-Regular',
         fontweight: '400'
      },
      data: [obj.yName1, obj.yName2],
   },
   ],
   xAxis: [{
      type: 'category',
      nameTextStyle: {
         color: '#fff',
         padding: [30, 0, -26, 0],
         fontSize: 14,
         fontFamily: 'SourceHanSansCN-Regular',
      },
      boundaryGap: true,
      axisLine: { //坐标轴轴线相关设置。数学上的x轴
         show: true,
         lineStyle: {
            color: 'rgba(255, 255, 255, 0.2)'
         },
      },
      axisTick: {
         show: false // 不显示坐标轴刻度线
      },
      axisLabel: { //坐标轴刻度标签的相关设置
         interval: 0,
         textStyle: {
            color: '#fff',
            padding: 0,
            fontSize: 14,
            fontWeight: '500',
            fontFamily: 'DIN',
         },

      },

      data: obj.xLabel
   }],
   yAxis: [
      {
         type: 'value',
         boundaryGap: false,
         splitLine: {
            show: true,
            lineStyle: {
               type: 'solid',
               color: 'rgba(255, 255, 255, 0.2)'
            },
         },
         axisLine: {
            show: false,
         },
         minInterval: 0.2,
         max: 1,
         axisLabel: {
            show: true,
            textStyle: {
               color: '#fff',
               padding: 0,
               fontSize: 14,
               fontWeight: '500',
               fontFamily: 'DIN',
            },
            formatter: function (value, index) {
               return value * 100 + '%';
            },
         },
         axisTick: {
            show: false,
         },

      },

   ],
   series: [
      {
         name: obj.yName1,
         type: 'line',
         showAllSymbol: true,
         showSymbol: true,
         symbol: 'triangle',
         symbolSize: 10,
         smooth: true,//平滑
         lineStyle: {
            normal: {
               width: 1,
               color: "rgba(248, 181, 81, 1)", // 线条颜色
            },
            type: 'solid',
            // borderColor: 'rgba(0,0,0,.4)',
         },
         itemStyle: {//标记点样式
            color: 'rgba(248, 181, 81, 1)',
            borderWidth: 0,
            borderColor: "#fff"
         },

         tooltip: {
            show: true
         },
         label: {
            show: false,
         },
         data: obj.yData1
      },
      {
         name: obj.yName2,
         type: 'line',
         showAllSymbol: true,
         showSymbol: true,
         symbol: 'rect',
         symbolRotate: 45,
         symbolSize: 10,
         smooth: true,//平滑
         lineStyle: {
            normal: {
               width: 1,
               color: "rgba(0, 163, 255, 1)", // 线条颜色
            },
            type: 'solid',
            // borderColor: 'rgba(0,0,0,.4)',
         },
         itemStyle: {//标记点样式
            color: 'rgba(0, 163, 255, 1)',
            borderWidth: 0,
            borderColor: "#fff"
         },

         tooltip: {
            show: true
         },
         label: {
            show: false,
         },
         data: obj.yData2
      },
   ]
}