Echarts在线免费图表

 
            const datas = [
        { name: "2018年", value: "264.9" },
        { name: "2019年", value: "241.5" },
        { name: "2020年", value: "312.5" },
        { name: "2021年", value: "447.9" },
      ]
const myColor = ["#51FC4E", "#4C5FF5", "#FFE660", "#79F1FF"].reverse();
const xData = datas.map((item) => item.name);
const yData = datas.map((item) => item.value);
const max = Math.ceil(Math.max(...yData) * 1.2);
const maxData = [max, max, max, max, max];
option = {
   backgroundColor: '#0F1F45',
   grid: {
      left: "15%",
      right: "8%",
      bottom: "5%",
      top: "10%",
      containLabel: false,
   },
   xAxis: [
      {
         show: false,
      },
      {
         show: false,
      },
   ],
   yAxis: [
      {
         show: false,
         inverse: true,
         data: yData,
      },
      {
         show: true,
         data: yData,
         offset: -45,
         position: "right",
         axisLabel: {
            lineHeight: 0,
            verticalAlign: "bottom",
            fontSize: 13,
            color: "#fff",
            formatter: "{value}亿",
         },
         axisLine: {
            show: false,
         },
         splitLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
      },
   ],
   series: [
      {
         name: "进度",
         show: true,
         type: "bar",
         barGap: "-100%",
         xAxisIndex: 1,
         barWidth: 4,
         itemStyle: {
            borderRadius: 4,
            color: (params) => {
               var num = myColor.length;
               return {
               type: "linear",
               x: 0,
               y: 0,
               x2: 1,
               y2: 1,
               colorStops: [
                  {
                     offset: 0,
                     color: "#0F1F45",
                  },
                  {
                     offset: 1,
                     color: myColor[params.dataIndex % num],
                  },
               ],
               };
            },
         },
         label: {
            show: false,
         },
         // max: 0,
         labelLine: {
            show: false,
         },
         z: 2,
         data: yData,
         animationDelay: 1000,
         animationDuration: 1000
      },
      {
         name: "外圆",
         type: "scatter",
         emphasis: {
            scale: false,
         },
         xAxisIndex: 1,
         symbolSize: 10,
         itemStyle: {
            color: (params) => {
               var num = myColor.length;
               return myColor[params.dataIndex % num];
            },
            shadowColor: "rgba(255, 255, 255, 0.5)",
            shadowBlur: 5,
            borderWidth: 1,
            opacity: 1,
         },
         z: 2,
         data: yData,
         animationDelay: 1500,
         animationDuration: 1000
      },
      {
         name: "年份",
         z: 1,
         show: true,
         type: "bar",
         xAxisIndex: 1,
         barGap: "-100%",
         barWidth: 4,
         itemStyle: {
            borderRadius: 4,
            color: "rgba(13, 55, 78, 1)",
         },
         label: {
            show: true,
            verticalAlign: "middle",
            position: "left",
            fontSize: 14,
            color: "#fff",
            formatter: function (data) {
               return xData[data.dataIndex] + "：";
            },
         },
         data: maxData,
      },
   ],
};