(完整)ECharts（趋势图（曲线版）带双滚轮）

 1.我是用的element + vue下面的代码是js代码

                        let myChart = echarts.init(document.getElementById('main'));
                        that.tableData = data;
                        that.loading = false;
                      
                        myChart.setOption({
                            title: {
                                text: '高炉锌负荷趋势图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: ['锌', '铝', '镉', '铅', '汞']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',//组件控制
                                boundaryGap: false,
                                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name: '锌',
                                    type: 'line',
                                    stack: 'Total',
                                    data: that.XIN,
                                },
                            ],
                            dataZoom: [
                                {
                                    type: 'slider',
                                    show: true,
                                    yAxisIndex: [0],
                                    left: '93%',
                                    start: 0, //数据窗口范围的起始百分比
                                    end: 36,
                                    start: 0, // 滚动条的起始位置（10%）
                                    end: 100, // 滚动条的终止位置（90%）
                                },
                                {
                                    type: 'inside',
                                    yAxisIndex: [0],
                                    start: 0,
                                    end: 36,
                                    start: 0, // 滚动条的起始位置（10%）
                                    end: 100, // 滚动条的终止位置（90%）
                                },
                                {
                                    type: "slider",
                                    show: true, // flase直接隐藏图形
                                    xAxisIndex: [0],
                                    left: "9%", // 滚动条靠左侧的百分比
                                    bottom: -5,
                                    start: 0, // 滚动条的起始位置（10%）
                                    end: 100, // 滚动条的终止位置（90%）
                                },
                            ]
                        });

2.html代码

 <div id="main" style="width: 85%;height: 80%; margin-left: 9%"></div>