Echarts在线免费图表

 
            const datas = [
   { name: "随便写", value: "80" },
   { name: "随便写", value: "90" },
   { name: "随便写 ", value: "110" },
   { name: "随便写", value: "120" },
   { name: "随便写", value: "47" },
   { name: "随便写", value: "10" },
   { name: "随便写 ", value: "49" },
   { name: "随便写", value: "40" },
   { name: "随便写", value: "80" },
   { name: "随便写", value: "99" }
];
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, max, max, max, max, max];//控制左边名字显示的数量
option = {
   backgroundColor: "#0b1a2a",
   grid: {
      left: "19%",
      right: "10%",
      bottom: "0%",
      top: "10%",
      containLabel: false
   },
   xAxis: [
      {
         show: false
      },
      {
         show: false
      }
   ],
   yAxis: [
      {
         show: true,
         data: yData,
         offset: -10,
         position: "right",
         axisLabel: {
            lineHeight: 0,
            verticalAlign: "bottom",
            fontSize: 14,
            color: "#e6a635",
            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 => {
               return {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: "#8d8714"
                     },
                     {
                        offset: 1,
                        color: "#f5d600"
                     }
                  ]
               };
            }
         },
         label: {
            show: false
         },
         labelLine: {
            show: false
         },
         z: 2,
         data: yData,
         animationDelay: 1000,
         animationDuration: 1000
      },
      {
         name: "外圆",
         type: "scatter",
         emphasis: {
            scale: false
         },
         xAxisIndex: 1,
         symbolSize: 10,
         itemStyle: {
            color: "#f5d600",
            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
      }
   ]
};