ECharts图表 关于datazoom中的startValue无效的问题

### ECharts 柱状图 DataZoom 组件使用教程 #### 配置项说明 DataZoom 是 ECharts 中用于缩放和平移图表显示范围的功能组件。对于柱状图而言，通过配置 `dataZoom` 可以让用户更方便地查看大量数据中的细节部分。 - **Type**: 设置为 `'slider'` 或者 `'inside'` 来分别表示外部滑动条形式的数据区域选择器和内置滚轮/拖拽方式的选择器[^1]。 - **Start 和 End 属性**: 控制初始可见视窗的位置，默认情况下是从最左端到一定比例处开始显示。这两个属性接受数值型参数，代表的是相对于整个数据集的比例位置(%)。 - **AxisIndex 或 xAxisIndex/yAxisIndex**: 当存在多个坐标轴时指定要作用于哪个X/Y轴上的dataZoom控制器[^2]. 以下是基于上述描述的一个简单例子来展示如何在 Vue3 环境下集成带有 dataZoom 功能的 ECharts 柱状图： ```javascript import * as echarts from 'echarts'; // 假设已经初始化好了一个DOM容器并获取到了该节点对象chartDom const chartInstance = echarts.init(chartDom); chartInstance.setOption({ title: { text: "ECharts Column Chart with DataZoom" }, tooltip: {}, toolbox: { feature: {} }, legend: [], xAxis: [ { type: 'category', boundaryGap : false, axisLabel:{interval:0}, data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] } ], yAxis: [{type: 'value'}], series: [{ name:'销量', type:'bar', barWidth: '60%', itemStyle:{ normal:{color:'#C1232B'} }, markLine: { lineStyle: { color: '#FF7F50' }, data:[{ type: 'average', name: '平均值' }] }, data:[ 820,932,901,934,1290,1330,1320 ] }], grid: { left: 15, right: 15, top: 15, bottom: 10, containLabel: true }, dataZoom: [ { type: 'slider',// 这里指定了slider类型的dataZoom控件 start: 0,// 初始默认从第几个元素开始渲染 end: 60 // 结束渲染至多少百分比处 }, { type: 'inside',// 同样可以有inside模式下的dataZoom控制 start: 0, end: 60 } ] }); ``` 此段代码实现了如下功能： - 创建了一个具有水平方向滚动能力的柱形图； - 添加了两个不同类型的 `dataZoom` 实例：一个是可视化的滑块(`slider`)，另一个则是鼠标手势操作触发(`inside`); - 对应的起始与结束视野被设定为前百分之零到六十之间的数据点；