Echarts在线免费图表

 
            
let obj = {
   xData: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,],
   legend: ['年度', '月度', '近七日',],
   lineData: [
      {
         name: '年度',
         data: [20, 19, 20, 23, 25, 29, 27, 28, 29, 26, 24, 23, 25],
      },
   ]
}
let colorStop = [
   {
      start: 'rgba(0, 142, 255, 0.1)',
      end: 'rgba(0, 142, 255, 0.5)'
   },

]
const hexToRgba = (hex, opacity) => {
   let rgbaColor = "";
   let reg = /^#[\da-f]{6}$/i;
   if (reg.test(hex)) {
      rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
         "0x" + hex.slice(3, 5)
      )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
   }
   return rgbaColor;
}
let serData = []
obj.lineData.forEach((item, index) => {
   serData.push({
      name: item.name,
      type: "line",
      stack: "all",
      showSymbol: false,
      itemStyle: {
         borderWidth: 1,
      },
      lineStyle: {
         normal: {
            color: '#109ce5',
            shadowBlur: 3.5,
            shadowColor: hexToRgba('#109ce5', 0.3),
            shadowOffsetY: 16
         }
      },
      areaStyle: {
         color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
               {
                  offset: 0,
                  color: colorStop[index] ? colorStop[index].end : 'rgba(0, 142, 255, 0.6)',
               },
               {
                  offset: 1,
                  color: colorStop[index] ? colorStop[index].start : 'rgba(0, 142, 255, 0.02)',
               },
            ],
            globalCoord: false, // 缺省为 false
         },
      },
      data: item.data,
   })
})

option = {
   backgroundColor: "#031d47",
   title: {
      text: '办结统计',
      top: "1%",
      textAlign: "left",
      left: "1%",
      textStyle: {
         color: "#38adb9",
         fontSize: 18,
         fontWeight: "600",
      },
   },
   color: [
      '#159AFF',
      '#66E193',
      '#E3F170',
      '#66E1DF',
      '#FFAD6A',
      '#ffe0ab',
      '#6bc5f4',
      '#c08ef2',
   ],
   legend: {
      icon: 'circle',
      top: '8%',
      //   left: 'center',
      orient: 'horizontal', //图例方向【horizontal/vertical】
      itemHeight: 10, //修改icon图形大小
      itemWidth: 10, //修改icon图形大小
      itemGap: 50,
      textStyle: {
         fontSize: 12,
         color: '#fff',
         padding: [0, 8],
      },
      data: obj.legend,
   },
   tooltip: {
      show: true,
      trigger: "axis",
      backgroundColor: "#0a2b45", // 设置背景颜色
      textStyle: {
         color: '#333',
         color: '#fff',
         fontSize: 14,
      },
      borderColor: "rgba(255, 255, 255, .16)",
      axisPointer: {
         lineStyle: {
            color: "rgba(28, 124, 196)",
         },
      },

      formatter: (params) => {
         let arr = [...params];
         let str = '';
         arr.forEach((item, index) => {
            str += item.marker + item.seriesName + '  ' + item.data + '<br />';
         });
         str = arr[0].name + '<br />' + str;
         return str;
      },
   },


   grid: {
      top: "15%",
      left: "8%",
      right: "2%",
      bottom: "18%",
      containLabel: true,
   },
   xAxis: [
      {
         type: "category",
         axisLine: {
            onZero: true,
            lineStyle: {
               color: "#81b0d0",
            },
         },
         axisLabel: {
            interval: 0,
            align: "center",
            margin: 10,
            color: "rgb(139, 143, 147)",
            rotate: 0,
            textStyle: {
               fontSize: 14,
            },
         },
         splitLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         boundaryGap: false,
         data: obj.xData,
      },
   ],

   yAxis: [
      {
         type: "value",
         name: "（件）",
         nameTextStyle: {
            //y轴上方单位的颜色
            color: "rgb(139, 143, 147)",
         },
         // splitNumber: 6,
         axisLine: {
            show: true,
            lineStyle: {
               color: "#81b0d0",
            },
         },
         splitLine: {
            show: true,
            lineStyle: {
               color: "rgba(221, 228, 241,.3)",
               // type: "dashed",
            },
         },
         axisLabel: {
            color: "rgb(139, 143, 147)",
            textStyle: {
               fontSize: 14,
            },
         },
         axisTick: {
            show: false,
         },
      },
   ],
   series: serData,
};