关于echarts 绘画横向排行榜，自动向上滚动，切换数据时销毁重绘 |
您所在的位置：网站首页 › echarts排名柱状图 › 关于echarts 绘画横向排行榜，自动向上滚动，切换数据时销毁重绘 |
关于echarts 绘画横向排行榜，自动向上滚动，切换数据时销毁重绘
|
应用场景：
在数据统计中，我们经常会使用echarts绘制横向的排行榜，当数据过多当前页显示不下时就会考虑使用自动滚动的方式保证每条数据都能得到展示。 实例效果：
1、index.vue import eightLeft from "./components/eight/eightLeft.vue"; components: { eightLeft, },2 eightLeft.vue import * as echarts from "echarts"; export default { name: "eightLeft", props: {}, data() { return { value: [], timeOut: "", endVal: 7, startVal: 0, key: new Date().getTime(), }; }, watch: {}, mounted() {}, methods: { GetSalesWaterOpen(CompanyId = 0, month) { this.$api.indexHome .GetBussBillType({ CompanyId: CompanyId, MonthStart: month[0], MonthEnd: month[1], }) .then((res) => { // dome数据 res.Results = [ { FID: 29, FNAME: "表务申请", FCOUNT: 500, }, { FID: 4005, FNAME: "用水人口数变更业务", FCOUNT: 30, }, { FID: 4011, FNAME: "发票信息变更业务", FCOUNT: 5, }, { FID: 4008, FNAME: "客户信息变更申请业务", FCOUNT: 21, }, { FID: 4002, FNAME: "水表销户申请业务", FCOUNT: 499, }, { FID: 26, FNAME: "用水档案变更单", FCOUNT: 64, }, { FID: 6, FNAME: "档案变更单", FCOUNT: 94, }, { FID: 1, FNAME: "公司报装单", FCOUNT: 14, }, { FID: 4014, FNAME: "扣费信息变更业务", FCOUNT: 64, }, { FID: 1201, FNAME: "用水人口变更单(添加人口)", FCOUNT: 41, }, { FID: 5, FNAME: "过户申请单", FCOUNT: 842, }, { FID: 2, FNAME: "用户报装单", FCOUNT: 14, }, { FID: 94, FNAME: "用水性质变更单", FCOUNT: 64, }, { FID: 4001, FNAME: "给水申请业务", FCOUNT: 22, }, { FID: 4013, FNAME: "水表验表申请业务", FCOUNT: 4, }, { FID: 4007, FNAME: "过户申请业务", FCOUNT: 390, }, { FID: 4004, FNAME: "用水性质变更业务", FCOUNT: 13, }, ]; if (this.timeOut) { this.stop(); } document .getElementById("eightLeft") .removeAttribute("_echarts_instance_"); // 移除重绘 防止切换数据后 动画错乱 this.value = res.Results; this.onCreateMap(); }); }, onCreateMap() { let that = this; var myChart = echarts.init(this.$refs["eightLeft"]); let colorList = ["#5A91FA"]; let result = this.$common.sortData("FCOUNT", this.value); let option = { color: colorList, backgroundColor: "#fff", tooltip: { show: true, trigger: "item", padding: [8, 15], backgroundColor: "rgba(255, 255, 255,1)", borderColor: "#fff", textStyle: { color: "#333", }, }, legend: { show: false, }, grid: { left: "180", right: "60", top: "5%", bottom: "5%", }, xAxis: [ { splitLine: { show: false, }, type: "value", show: false, }, ], yAxis: [ { splitLine: { show: false, }, axisLine: { show: false, }, type: "category", axisTick: { show: false, }, inverse: true, data: result.map((item) => item.FNAME), axisLabel: { color: "#666666", fontSize: 12, margin: 10, }, }, ], series: [ { name: "", type: "bar", barWidth: 10, // 柱子宽度 MaxSize: 0, showBackground: true, backgroundStyle: { color: "#F5F5F5", borderRadius: 6, }, label: { show: true, position: "right", }, itemStyle: { borderRadius: 8, }, data: result.map((item, index) => { return { name: item.FNAME, value: item.FCOUNT, itemStyle: { color: colorList[index], }, }; }), }, ], dataZoom: [ { yAxisIndex: [0], show: false, //是否显示滑动条，不影响使用 type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件 startValue: that.startVal, // 从头开始。 endValue: that.endVal, // 一次性展示8个 width: 6, borderColor: "transparent", fillerColor: "rgba(205,205,205,1)", zoomLock: true, showDataShadow: false, //是否显示数据阴影 默认auto backgroundColor: "#fff", showDetail: false, //即拖拽时候是否显示详细数值信息 默认true realtime: true, //是否实时更新 filterMode: "filter", handleIcon: "circle", handleStyle: { color: "rgba(205,205,205,1)", borderColor: "rgba(205,205,205,1)", }, handleSize: "80%", moveHandleSize: 0, maxValueSpan: 7, minValueSpan: 7, brushSelect: false, //刷选功能 }, { type: "inside", yAxisIndex: 0, zoomOnMouseWheel: false, //滚轮是否触发缩放 moveOnMouseMove: true, //鼠标滚轮触发滚动 moveOnMouseWheel: true, }, ], }; myChart.setOption(option, true); window.addEventListener("resize", function () { myChart.resize(); }); autoMove(); document.getElementById("eightLeft").onmouseenter = () => { stop(); }; document.getElementById("eightLeft").onmouseleave = () => { autoMove(); }; // //停止滚动 function stop() { clearInterval(that.timeOut); } function autoMove() { this.timeOut = setInterval(() => { if (option.dataZoom[0].endValue == result.length) { option.dataZoom[0].endValue = 7; 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); }, 2000); } }, }, };3、common.js // 排序 str 对哪个字段排序 data 排序的数据 返回排序后的数据 export function sortData(str, data, direction = "fall") { data.sort((prv, next) => { if (direction == "fall") { return next[str] - prv[str]; } else { return prv[str] - next[str]; } }); return data; } |
【本文地址】
今日新闻 |
推荐新闻 |