Echarts在线免费图表

 
            var datas = [
   { value: 20, name: "北京", max: 40 },
   { value: 60, name: "上海", max: 80 },
   { value: 40, name: "天津", max: 75 },
   { value: 70, name: "自卸后八车型", max: 120 },
];
const yData = datas.map((item) => item.name);
const zData = datas.map((item) =>
   ((item.value / item.max) * 100).toFixed(2)
);
const pData = datas.map((item) => item.value);
const aData = datas.map((item) => item.max);
option = {
   grid: {
      left: "120",
      right: "10%",
      bottom: "0",
      top: "5%",
      containLabel: false,
   },
   xAxis: {
      show: false,
      type: "value",
   },
   yAxis: [
      {
         // 条状标题
         type: "category",
         inverse: true,
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLabel: {
            color: ["#666"],
            align: "right",
            lineHeight: 60,
            fontSize: 16,
         },
         data: yData,
      },
   ],
   dataZoom: [
      {
         type: "slider",
         realtime: true, // 拖动时，是否实时更新系列的视图
         startValue: 0,
         endValue: 3,
         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, // 鼠标移动能触发数据窗口平移
      },
   ],
   series: [
      {
         name: "进度",
         show: true,
         type: "bar",
         barWidth: 27,
         itemStyle: {
            color: {
               type: "linear",
               x: 0,
               y: 0,
               x2: 1,
               y2: 0,
               colorStops: [
                  {
                     offset: 0,
                     color: "#AAD4FF", // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color: "#5169FF", // 0% 处的颜色
                  },
               ],
               global: false, // 缺省为 false
            },
         },
         label: {
            show: true,
            distance: 20,
            formatter: function (params) {
               var str = "";
               let data = pData[params.dataIndex];
               str = data;
               return str;
            },
            //   offset: [-2, 2],
            color: "black",
         },
         labelLine: {
            show: false,
         },
         z: 2,
         data: zData,
         // animationDelay: 1000,
         // animationDuration: 1000,
      },
      {
         name: "百分比",
         z: 1,
         show: true,
         type: "bar",
         barGap: "-100%",
         barWidth: 27,
         itemStyle: {
            color: "#E2EDFE",
         },
         label: {
            show: true,
            position: "insideRight",
            formatter: function (params) {
               var str = "";
               let data = aData[params.dataIndex];
               str = data;
               return str;
            },
            offset: [-10, 2],
            color: "black",
         },
         stack:'aa', //!!!!
         data: aData,
      },

       {
         name: "百分比",
         stack:'aa', //!!!!
         type:'bar',
         label: {
            show: true,
            position: "right",
            formatter: function (params) {
               let data = zData[params.dataIndex];
               return data+'%';
            },
            offset: [10, 0],
            color: "black",
         },
         data: aData.map((v)=>0),
      },
   ],
};