Echarts在线免费图表

 
            const dataList = [{
   name: "Mon",
   value: 260,
},
{
   name: "Tue",
   value: 220,
},
{
   name: "Wed",
   value: 200,
},
{
   name: "Thu",
   value: 160,
},
{
   name: "Fri",
   value: 140,
},]

option = {
   backgroundColor: "#0A181E",
   tooltip: {
      show: false,
   },
   grid: {
      top: "5%",
      left: "3%",
      right: "2%",
      bottom: "1%",
      containLabel: true,
   },
   xAxis: {
      type: "value",
      axisLabel: {
         color: "#fff",
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: "rgba(21, 200, 221,0.2)",
         },
      },
   },
   yAxis: {
      type: "category",
      axisLabel: {
         color: "#fff",
      },
      axisLine: {
         show: false,
      },
      splitLine: {
         show: false,
      },
      axisTick: {
         show: false,
      },
      data: dataList.map(r => r.name),
   },
   series: [
      {
         name: "地市资源排行",
         type: "bar",
         symbol: "path://M1 1,L140 1,L140 15,L1 15,Z",
         symbolKeepAspect: false,
         stack: "triangle",
         barWidth: 16,
         itemStyle: {
            borderWidth: 0,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
               {
                  offset: 0,
                  color: "rgba(0,190,192,0.3)",
               },
               {
                  offset: 1,
                  color: "rgba(0,190,192, 1)",
               },
            ]),
         },
         label: {
            show: true,
            position: "right",
            color: "#3EFFE8",
            fontSize: 12,
            formatter: "{c}",
         },
         data: dataList,
      },
      {
         name: "顶端1",
         type: "scatter",
         stack: "triangle",
         yAxisIndex: 0,
         data: [0, 0, 0, 0, 0],
         label: false,
         symbolSize: 16,
         symbolOffset: [-8, 0],
         symbol: "path://M12 0,L16 0,L0 16,L0 12,Z",
         itemStyle: {
            borderWidth: 0,
            color: "#8AEBEE",
            opacity: 1,
         },
         z: 2,
      },
      {
         name: "顶端2",
         type: "scatter",
         stack: "triangle",
         yAxisIndex: 0,
         data: [0, 0, 0, 0, 0],
         label: false,
         symbolSize: 17,
         symbolOffset: [-7, 0],
         symbol: "path://M0 16L16 16L16 0Z",
         itemStyle: {
            color: "#0A181E", // 与背景色相同
            opacity: 1,
         },
         z: 2,
      },
   ],
};