Echarts在线免费图表

 
            let xData = ["xx街道党支部", "xx街道党支部", "xx街道党支部", "xx街道党支部", "xx街道党支部"];
let data = [146, 274, 308, 418, 319];
let data2 = [234, 135, 237, 135, 237];

if (this.timer !== "") {
   clearInterval(this.timer);
   this.timer = "";
}
const colorArr = ["rgba(15, 201, 248)", "rgba(30, 50, 221)", "rgba(61, 101, 249)", "rgba(95, 236, 251)"];
const colorArr2 = ["rgba(19, 219, 182)", "rgb(17, 197, 210)", "rgb(17, 197, 210)", "rgb(88, 235, 131)"];
let color = {
   type: "linear",
   x: 0,
   x2: 0,
   y: 0,
   y2: 1,
   colorStops: [
      {
         offset: 0,
         color: colorArr[0]
      },
      {
         offset: 1,
         color: colorArr[1]
      }
   ]
};
let color2 = {
   type: "linear",
   x: 0,
   x2: 0,
   y: 0,
   y2: 1,
   colorStops: [
      {
         offset: 0,
         color: colorArr2[0]
      },
      {
         offset: 1,
         color: colorArr2[1]
      }
   ]
};
let barWidth = 16;
let option = {
   backgroundColor: '#00266b',
   legend: {
      data: ["党员数", "网格员数"],
      top: "2%",
      right: "8%",
      selectedMode: false,
      itemHeight: 8, // 图例icon高度
      itemWidth: 13, // 图例icon宽度
      textStyle: {
         color: "#ffffff",
         fontSize: 12
      }
   },
   tooltip: {
      trigger: "axis",
      axisPointer: {
         type: "shadow"
      },
      backgroundColor: "rgba(9, 24, 48, 0.5)",
      borderColor: "rgba(255,255,255,0.4)",
      textStyle: {
         color: "#fff",
         align: "left",
         textAlign: "left"
      },
      borderWidth: 1,
      formatter: function (params) {
         let item = "";
         let colors = ["#3c94f6", "#3FF5E6", "#3c94f6"];
         item += params[1].name;
         $(params).each(function (idx, itm) {
            item += '<br/><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:' + colors[idx] + ';"></span>' + itm.seriesName + ":" + '<span style="margin-left:8px;color: ' + colors[idx] + '">' + itm.value + "</span>";
         });
         return item;
      }
   },
   //图表大小位置限制
   grid: {
      left: "8%",
      right: "8%",
      top: 40,
      bottom: "3%",
      containLabel: true
   },
   xAxis: {
      data: xData,
      type: "category",
      axisLabel: {
         overflow: "breakAll",
         width: 50,
         interval: 0,
         textStyle: {
            color: "#C5DFFB",
            fontWeight: 500,
            fontSize: "12",
            lineHeight: 14
         }
      },
      axisTick: {
         textStyle: {
            color: "#fff",
            fontSize: "12"
         },
         show: false
      },
      axisLine: {
         //坐标轴轴线相关设置。数学上的x轴
         show: false,
         lineStyle: {
            type: "dashed", //线的类型 虚线
            color: "#DEDEDE"
         }
      }
   },
   yAxis: [
      {
         name: "(人)",
         nameTextStyle: {
            color: "white",
            fontSize: 12,
            padding: [0, 0, 0, -30]
         },
         type: "value",
         min: 0,
         minInterval: 1,
         splitArea: {
            show: false
         },
         axisLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         splitLine: {
            lineStyle: {
               color: "rgba(255, 255, 255, 0.1)",
               type: "solid" // dotted 虚线
            }
         },
         axisLabel: {
            fontSize: 12,
            color: "#fff"
         }
      }
   ],
   series: [
      {
         z: 1,
         name: "党员数",
         type: "bar",
         barWidth: barWidth,
         barGap: "0%",
         data: data,
         itemStyle: {
            normal: {
               color: color,
               label: {
                  show: false
               }
            }
         }
      },
      {
         z: 2,
         name: "党员数",
         type: "pictorialBar",
         data: data.map(item => item + 10),
         symbol: "diamond",
         symbolOffset: ["-70%", "50%"],
         symbolSize: [barWidth, 10],
         itemStyle: {
            normal: {
               color: colorArr[2]
            }
         },
         tooltip: {
            show: false
         }
      },
      {
         z: 3,
         name: "党员数",
         type: "pictorialBar",
         symbolPosition: "end",
         data: data,
         symbol: "diamond",
         symbolOffset: ["-70%", "-60%"],
         symbolSize: [barWidth - 1, (10 * (barWidth - 1)) / barWidth],
         itemStyle: {
            normal: {
               borderWidth: 2,
               color: colorArr[3]
            }
         },
         tooltip: {
            show: false
         }
      },
      {
         z: 1,
         name: "网格员数",
         type: "bar",
         barWidth: barWidth,
         barGap: "30%",
         data: data2,
         itemStyle: {
            normal: {
               color: color2,
               label: {
                  show: false
               }
            }
         }
      },
      {
         z: 2,
         name: "网格员数",
         type: "pictorialBar",
         data: data2.map(item => item + 10),
         symbol: "diamond",
         symbolOffset: ["70%", "50%"],
         symbolSize: [barWidth, 10],
         itemStyle: {
            normal: {
               color: colorArr2[2]
            }
         },
         tooltip: {
            show: false
         }
      },
      {
         z: 3,
         name: "网格员数",
         type: "pictorialBar",
         symbolPosition: "end",
         // barCategoryGap : "90%",
         data: data2,
         symbol: "diamond",
         symbolOffset: ["70%", "-50%"],
         symbolSize: [barWidth - 1, (10 * (barWidth - 1)) / barWidth],
         itemStyle: {
            normal: {
               borderWidth: 2,
               color: colorArr2[3]
            }
         },
         tooltip: {
            show: false
         }
      },
   ],
   dataZoom: [
      {
         xAxisIndex: 0, // 这里是从X轴的0刻度开始
         show: false, // 是否显示滑动条，不影响使用
         type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
         startValue: 0, // 从头开始。
         endValue: 3 // 展示到第几个。
      }
   ]
};

setInterval(() => {
   if (option.dataZoom[0].endValue >= xData.length - 1) {
      option.dataZoom[0].endValue = 3;
      option.dataZoom[0].startValue = 0;
   } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
   }
   myChart.setOption(option);
}, 4000);