Echarts 数据过多时设置滚动条

Echarts具有自适应的功能，因此当数据非常多的时候，会自动把柱形的宽度挤的非常细，也显得不美观，这样的交互肯定是过不去的。

因此就需要有这样一个属性：
dataZoom
想要读详细文档的同学，可以看官方文档：https://echarts.baidu.com/option.html#dataZoom

dataZoom: [{start: 0, //默认为0end: 100, //默认为100type: "slider",maxValueSpan: 9, //显示数据的条数(默认显示10个)show: true,yAxisIndex: [0],handleSize: 0, //滑动条的 左右2个滑动条的大小height: "80%", //组件高度left: 600, //左边的距离right: 8, //右边的距离top: 50, //上边边的距离borderColor: '#0e426c',//   fillerColor: "#1b579e", //滑动块的颜色fillerColor: "#1890ff", //滑动块的颜色backgroundColor: "#0e426c", //两边未选中的滑动条区域的颜色showDataShadow: false, //是否显示数据阴影 默认autoshowDetail: false, //即拖拽时候是否显示详细数值信息 默认truerealtime: true, //是否实时更新filterMode: "filter",yAxisIndex: [0, 1], //控制的y轴brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）},],

Echarts 数据过多时设置滚动条相关推荐

处理 echarts 数据过多时的展示问题
问题: 处理 echarts 数据过多时的展示问题解决方案: 解决方案是,配置dataZoom属性.dataZoom用于区域缩放,从而能自由关注数据细节,或者概览数据整体. 官网示例:example ...
Visual Studio Code (echarts)数据可视化，设置数据缩放区间为20到40，设置标题字体大小，颜色以及是否加粗，设置柱状图颜色
加载echarts.js,以及初始化 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
ECharts 示例——圆环图：数据标签详细设置
当前ECharts版本为5.1.2. 概述按照其他可视化工具中圆环图的默认样式,对ECharts圆环图进行如下设置: 标题:设置标题位于圆环中央,修改标题字体大小和颜色数据标签:修改字体大小.样式 ...
echarts饼状图数据过多时，数据叠加(问题篇)
1.问题如下图所示 2.解决办法先给data中声明两个变量 seriesData: [], //决定图表中显示的个数selected: {}, // 决定图表中显示的个数处理后台取到的数据 // ...
ECharts双y轴设置0刻度对齐，左右刻度根据数据变化？
一.ECharts双y轴设置0刻度对齐,左右刻度值根据数据变化? 双y轴因为左右的数值有正数有负数的原因,出现0刻度不在一条线上的情况,解决办法如下. 代码如下: //获取数据中的最大值 functi ...
echarts 图表导出PDF(带滚动条)/图片导出PDF
echarts 图表导出PDF[带滚动条]/图片导出PDF 效果展示提出问题思考问题解决问题导出PDF 里面的页头中文乱码问题参数说明效果展示提出问题在开发过程中,有需求是将展示出来的 ...
echarts数据变了不重新渲染，以及重新渲染了前后数据会重叠渲染的问题
1.echarts数据变了但是视图不重新渲染新建Chart.vue文件 <template> <p :id="id" :style="style&q ...
echarts 折线上写数值_前端ECharts数据可视化图表案例与介绍
什么是ECharts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
Echarts数据可视化grid直角坐标系（xAxis、yAxis）
mytextStyle={color:"#333", //文字颜色fontStyle:"normal", //italic斜体 oblique倾斜fontWei ...

Echarts 数据过多时设置滚动条

文章目录

Echarts 数据过多时设置滚动条

Echarts 数据过多时设置滚动条相关推荐

最新文章

热门文章