Echarts在线免费图表

 
            function hexToRgba(hex, opacity = 1) {
   let r = parseInt(hex.slice(1, 3), 16),
      g = parseInt(hex.slice(3, 5), 16),
      b = parseInt(hex.slice(5, 7), 16);

   return `rgba(${r}, ${g}, ${b}, ${opacity})`;
}
option = {
   backgroundColor: '#000',
   tooltip: {
      trigger: "axis",
   },
   legend: {
      top: 20,
      left: 134,
      textStyle: {
         color: "#FFFFFF", // 文本颜色
      },
   },
   grid: {
      left: "10%",
      right: "10%",
      bottom: "3%",
      containLabel: true,
   },
   xAxis: {
      type: "category",
      boundaryGap: false,
      data: ['a', 'b', 'c'],
      axisLabel: {
         // y轴刻度标签样式
         textStyle: {
            color: "#ffffff", // 设置y轴刻度字体颜色为深青色
         },
      },
   },
   yAxis: {
      type: "value",
      axisLabel: {
         // y轴刻度标签样式
         textStyle: {
            color: "#ffffff", // 设置y轴刻度字体颜色为深青色
         },
      },
      splitLine: {
         lineStyle: {
            color: "#ccc",
            type: "dashed",
         },
      },
   },
   series: [
      {
         name: "正面",
         type: "line",
         stack: "Total",
         data: [1, 2, 3],
         itemStyle: {
            color: "#5CAF85", // 自定义颜色
         },
         areaStyle: {
            color: new echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [
                  {
                     offset: 0,
                     color: hexToRgba("#5CAF85", 0.5),
                  },
                  {
                     offset: 1,
                     color: hexToRgba("#5CAF85", 0.1),
                  },
               ],
               false
            ),
         },
         emphasis: {
            focus: "series",
         },
         smooth: true,
      },
      {
         name: "中性",
         type: "line",
         stack: "Total",
         data: [2, 3, 4],
         itemStyle: {
            color: "#2A86C6", // 自定义颜色
         },
         areaStyle: {
            color: new echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [
                  {
                     offset: 0,
                     color: hexToRgba("#2A86C6", 0.5),
                  },
                  {
                     offset: 1,
                     color: hexToRgba("#2A86C6", 0.1),
                  },
               ],
               false
            ),
         },
         emphasis: {
            focus: "series",
         },
         smooth: true,
      },
      {
         name: "负面",
         type: "line",
         stack: "Total",
         data: [1, 4, 7],
         itemStyle: {
            color: "#E56A6A", // 自定义颜色
         },
         areaStyle: {
            color: new echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [
                  {
                     offset: 0,
                     color: hexToRgba("#E56A6A", 0.5),
                  },
                  {
                     offset: 1,
                     color: hexToRgba("#E56A6A", 0.1),
                  },
               ],
               false
            ),
         },
         emphasis: {
            focus: "series",
         },
         smooth: true,
      }
   ],
}