echarts---x轴过长滑动显示

男娘i 2024-04-19 15:33 86阅读 0赞

例子：  
option = \{  
title : \{  
text: ‘某地区蒸发量和降水量’,  
subtext: ‘纯属虚构’  
\},  
tooltip : \{  
trigger: ‘axis’  
\},  
legend: \{  
data:\[‘蒸发量’,‘降水量’\]  
\},  
toolbox: \{  
show : true,  
feature : \{  
dataView : \{show: true, readOnly: false\},  
magicType : \{show: true, type: \[‘line’, ‘bar’\]\},  
restore : \{show: true\},  
saveAsImage : \{show: true\}  
\}  
\},  
dataZoom: \[//给x轴设置滚动条  
\{  
start:0,//默认为0  
end: 50, //这个值可为动态，（5/x轴值的数量）\*100  
type: ‘slider’,  
show: true,  
xAxisIndex: \[0\],  
handleSize: 0,//滑动条的 左右2个滑动条的大小  
height: 8,//组件高度  
left: 50, //左边的距离  
right: 40,//右边的距离  
bottom: 26,//右边的距离  
handleColor: ‘\#ddd’,//h滑动图标的颜色  
handleStyle: \{  
borderColor: “\#cacaca”,  
borderWidth: “1”,  
shadowBlur: 2,  
background: “\#ddd”,  
shadowColor: “\#ddd”,  
\},  
fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, \[\{  
//给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变  
//给第一个设置0，第四个设置1，就是垂直渐变  
offset: 0,  
color: ‘\#1eb5e5’  
\},  
\{  
offset: 1,  
color: ‘\#5ccbb1’  
\}\]),  
backgroundColor: ‘\#ddd’,//两边未选中的滑动条区域的颜色  
showDataShadow: false,//是否显示数据阴影 默认auto  
showDetail: false,//即拖拽时候是否显示详细数值信息 默认true  
[handleIcon][]: ‘M0,0 v9.7h5 v-9.7h-5 Z’,  
filterMode: ‘filter’  
\},  
//下面这个属性是里面拖到  
\{  
type: ‘inside’,  
show: true,  
xAxisIndex: \[0\],  
start: 0,//默认为1  
end: 50  
\},  
\],  
xAxis : \{  
type : ‘category’,  
data : \[‘1月月月月月’,‘2月’,‘3月’,‘4月’,‘5月’,‘6月’,‘7月’,‘8月’,‘9月’,‘10月’,‘11月’,‘12月’\],  
triggerEvent: true,//必须设置为true，否则事件无法触发  
axisLabel:\{  
formatter: function(value) \{  
var res = value;  
if(res.length > 5) \{//截取几个字符自己设定  
res = res.substring(0, 4) + “…”;  
\}  
return res;  
\}  
\}  
\},  
yAxis : \[  
\{  
type : ‘value’  
\}\],  
series : \[  
\{  
name:‘蒸发量’,  
type:‘bar’,  
data:\[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3\],  
\},  
\{  
name:‘降水量’,  
type:‘bar’,  
data:\[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3\],  
\}  
\]  
\}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzkyODQy_size_16_color_FFFFFF_t_70]

关键点：[dataZoom][]

[handleIcon]: https://www.cnblogs.com/muamaker/p/6229046.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzkyODQy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/29c245bee95342e39d10c8f3fdeef807.png
[dataZoom]: https://www.echartsjs.com/zh/api.html#action.dataZoom.dataZoom