echarts有滑块
2023-04-18 14:10:51 时间
- drawLine() {
- let that = this,
- lineDate = [],
- dispatchCount = [],
- finishCount = [],
- newCount = [];
- let param = {
- // 参数
- };
- axios
- .post(url, param)
- .then(function(response) {
- let rs = response.data.data;
- if (rs != undefined && rs != [] && rs != null) {
- for (let i = ; i < rs.dispatch.length; i++) {
- lineDate.push(rs.dispatch[i].day);
- dispatchCount.push(rs.dispatch[i].count);
- }
- for (let i = ; i < rs.finish.length; i++) {
- finishCount.push(rs.finish[i].count);
- }
- for (let i = ; i < rs.new.length; i++) {
- newCount.push(rs.new[i].count);
- }
- }
- let lineChart = that.$echarts.init(
- document.getElementById("lineChart")
- );
lineChart.clear(); // 出现返回数据正确,图的趋势不正确的情况。多加这句代码清空画布!!!
- lineChart.setOption({
- tooltip: {
- trigger: "axis"
- },
- legend: {
- data: ["新增", "派单", "完成"]
- },
- grid: {
- left: "10%", //因旋转导致名字太长的类目造成遮蔽,可以配合这两个属性
- bottom: "10%" // 分别表示:距离左边距和底部的距离,具体数值按实际情况调整
- },
- xAxis: {
- type: "category",
- boundaryGap: false,
- data: lineDate,
- axisLabel: {
- interval: , //0:全部显示,1:间隔为1显示对应类目,2:依次类推,(简单试一下就明白了,这样说是不是有点抽象)
- rotate: - //倾斜显示,-:顺时针旋转,+或不写:逆时针旋转
- }
- },
- yAxis: {
- type: "value",
- axisLabel: {
- // formatter: function(v) {
- // return parseInt(v); // 让y坐标数组为整数
- // },
- rotate: -
- },
- },
- // x轴拖动
- dataZoom: [
- {
- type: "slider",
- realtime: true, //拖动滚动条时是否动态的更新图表数据
- height: , //滚动条高度
- start: , //滚动条开始位置(共100等份)
- end: //结束位置(共100等份)
- }
- ],
- series: [
- {
- name: "新增",
- type: "line",
- data: newCount
- },
- {
- name: "派单",
- type: "line",
- data: dispatchCount
- },
- {
- name: "完成",
- type: "line",
- data: finishCount
- }
- ]
- });
- });
- },
相关文章
- 直接在代码里面对list集合进行分页
- .NET Framework 4.5新特性详解
- 大数据的简要介绍
- 大数据的由来
- 高斯混合模型的自然梯度变量推理
- timing-wheel 仿Kafka实现的时间轮算法
- 使用Navicat软件连接自建数据库(Linux系统)
- 那一天,我被Redis主从架构支配的恐惧
- Redis 深入了解键的过期时间
- C#使用委托调用实现用户端等待闪屏
- 基于流计算 Oceanus 和 Elasticsearch Service 构建百亿级实时监控系统
- GRAND | 转录调控网络预测数据库
- JFreeChart API中文文档
- 临床相关突变查询数据库
- TIGER | 人类胰岛基因变化查询数据库
- 视频边缘计算网关EasyNVR在视频整体监控解决方案中的应用分析
- Apache Arrow - 大数据在数据湖后的下一个风向标
- 常见的电商数据指标体系
- AKShare-艺人数据-艺人流量价值
- MySQL中多表联合查询与子查询的这些区别,你可能不知道!