Echarts在线免费图表

 
            const datas = [
   { name: "taskA", percent: "58", total: "158111", finished: "82311" },
   { name: "taskB", percent: "76", total: "16522", finished: "9873" },
   { name: "taskC", percent: "98", total: "5823", finished: "5500" },
   { name: "taskD", percent: "77", total: "3244", finished: "2355" },
   { name: "taskE", percent: "85", total: "15344", finished: "12009" },
   { name: "taskF", percent: "85", total: "15344", finished: "12009" },
   { name: "taskG", percent: "85", total: "15344", finished: "12009" },
   { name: "taskH", percent: "85", total: "15344", finished: "12009" },
   { name: "taskI", percent: "85", total: "15344", finished: "12009" },
];
const yData = datas.map(item => item.name);
const zData = datas.map(item => item.finished);
const pData = datas.map(item => item.percent);
// 设置等长的背景柱状图
const maxData = new Array(yData.length).fill(100);
option = {
   backgroundColor: "#0b1a2a",
   grid: {
      left: "10%",
      right: "10%",
      bottom: "10%",
      top: "10%",
      containLabel: false
   },
   xAxis: [
      {
         show: true
      },
      {
         show: false,
         splitLine: {
            show: false
         }
      }
   ],
   dataZoom: [
      {
         type: "slider",
         realtime: true, // 拖动时，是否实时更新系列的视图
         startValue: 0,
         endValue: 5,
         width: 5,
         height: "90%",
         top: "5%",
         right: 0,
         brushSelect: false,
         yAxisIndex: [0, 1], // 控制y轴滚动
         fillerColor: "#0093ff", // 滚动条颜色
         borderColor: "rgba(17, 100, 210, 0.12)",
         backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
         handleSize: 0, // 两边手柄尺寸
         showDataShadow: false, //是否显示数据阴影 默认auto
         showDetail: false, // 拖拽时是否展示滚动条两侧的文字
         zoomLock: true,
         moveHandleStyle: {
            opacity: 0,
         },
      },
      {
         type: "inside",
         yAxisIndex: [0, 1],
         zoomOnMouseWheel: false, // 关闭滚轮缩放
         moveOnMouseWheel: true, // 开启滚轮平移
         moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
      },
   ],
   yAxis: [
      {
         show: true,
         inverse: true,
         data: yData,
         position: "left",
         axisLabel: {
            lineHeight: 0,
            verticalAlign: "bottom",
            fontSize: 14,
            color: "#e6a635",
            formatter: "{value}"
         },
         axisLine: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         }
      },
      {
         show: true,
         data: zData,
         offset: 5,
         position: "right",
         axisLabel: {
            lineHeight: 0,
            verticalAlign: "bottom",
            fontSize: 14,
            color: "#19E5E6",
            formatter: "{value}"
         },
         axisLine: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         }
      }
   ],
   series: [
      {
         name: "进度",
         show: true,
         type: "bar",
         barGap: "-100%",
         xAxisIndex: 1,
         barWidth: 20,
         itemStyle: {
            borderRadius: 10,
            color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 1,
               y2: 0,
               colorStops: [
                  {
                     offset: 0,
                     color: '#0A7782', // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color: '#81EFF3', // 0% 处的颜色
                  },
               ],
               global: false, // 缺省为 false
            }
         },
         label: {
            show: true,
            position: 'insideRight',
            formatter: '{c}%',
            offset: [-10, 2],
            color: '#fff'
         },
         labelLine: {
            show: false
         },
         z: 2,
         data: pData,
         animationDelay: 1000,
         animationDuration: 1000
      },
      {
         name: "百分比",
         z: 1,
         show: true,
         type: "bar",
         xAxisIndex: 1,
         barGap: "-100%",
         barWidth: 20,
         itemStyle: {
            borderRadius: 4,
            color: "rgba(13, 55, 78, 1)"
         },
         label: {
            show: false,
         },
         data: maxData
      }
   ]
};