// 引入 ECharts 库
import echarts from 'echarts';

// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('yourChartId'));

// 假设你有一些数据
var data = [
    {name: 'A', value: 10},
    {name: 'B', value: 20},
    {name: 'C', value: 30},
    {name: 'D', value: 40},
    {name: 'E', value: 50},
    // 更多数据...
];

// 设置图表的配置项和数据
var option = {
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none',  // 'none' 表示只在 x 轴上进行缩放
                title: {
                    zoom: '区域缩放',
                    back: '区域缩放还原'
                }
            },
            restore: {},  // 恢复原始视图
            saveAsImage: {}  // 保存为图片
        }
    },
    xAxis: {
        type: 'category',
        data: data.map(item => item.name)
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'bar',
        data: data
    }],
    dataZoom: [
        {
            type: 'inside',  // 内置型数据区域缩放组件
            start: 0,
            end: 100
        },
        {
            show: true,       // 滚动条型数据区域缩放组件
            type: 'slider',
            yAxisIndex: [0],
            filterMode: 'empty'  // 选择区域时的模式，'filter' 表示选择区域时进行过滤，'empty' 表示选择区域时清空选中
        }
    ]
};

// 使用设置好的配置项显示图表
myChart.setOption(option);