echarts有滑块

vue下使用echarts折线图及其横坐标拖拽功能

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
}
]
});
});
},

echarts有滑块相关推荐

react echarts 绘制带有滑块柱图
实现效果图如下: 需要具备知识: 1 react 项目创建 2 react组件的导入使用方法:react中引入 TrafficColumnQTI 组件<TrafficColumnQTI /&g ...
九十一、前端可视化ECharts的使用
@Author:Runsen 学python的应该听过Pyecharts.那么就应该有ECharts 这次介绍的就是一个基于Javascript的数据可视化库ECharts. Echarts 由百度的 ...
ECharts 常用图表一看即会「散点图」「饼图」「地图」「雷达图」「仪表盘」
文接上篇 ECharts 入门知识 ECharts 入门真的很简单 ,本文继续介绍 ECharts 常用图表相关内容. 一.散点图散点图多用于推断不同维度数据之间的相关性,如下图判断身高体重相关性散 ...
学习echarts需要先学习java 吗_Echarts和Echarts-java类库简单使用方法
1.Eharts简介 ECharts,一个纯Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safa ...
vue echarts绘制市级地图下钻（带注释）
vue echarts绘制市级地图下钻 ------- 以浙江嘉兴市为例首先要知道地图的数据获取:http://datav.aliyun.com/portal/school/atlas/area_s ...
地图（用ECharts绘制）
目录地图帮助我们快速看出不同地理位置上数据的差异地图图表的两种使用方式 ①百度地图API ②矢量地图数据基本实现 1.ECharts最基本的代码结构 2.准备中国地图的矢量数据下 ...
如何使用 JS 破解轻量级滑块验证码
今天在这篇文章里给大家介绍一下怎么使用 JS 破解滑块验证码. 文章末尾有源码链接,需要的朋友可以自取,不过拿走之前记得三连哇! 思路讲解操作浏览器打开页面滑块验证码是滑动验证码的一种,生成流程至 ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
Vue Echarts 电子支付图表
项目结构,elepay components 和 model 上面两个完成后需要在status.ts 和 core.ts home.vue 和 home.vue 配置相应路径,这里不演示 echar ...

echarts有滑块

echarts有滑块相关推荐

最新文章

热门文章