通过echarts实现缩放柱状图

功能

通过echart图表中的js代码，使柱状图实现缩放

用法

1.1 新建表格

页面内新建任意数里的表格后

1.2 新增echart图表

将js代码复制到echart图表中

v1.2代码

dataSet = dataSet.map((data, i) => dataSet.map(d => d[i]));
var dataAxis = dataSet[0];
var data = dataSet[1];;
var yMax = 500;
var dataShadow = [];
for (var i = 0; i < data.length; i++) {
   dataShadow.push(yMax);
}
option = {

title: {
    text: '特性示例：渐变色 阴影 点击缩放',
    subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
},
xAxis: {
    data: dataAxis,
    axisLabel: {
        inside: true,
        textStyle: {
            color: '#fff'
        }
    },
    axisTick: {
        show: false
    },
    axisLine: {
        show: false
    },
    z: 10
},
yAxis: {
    axisLine: {
        show: false
    },
    axisTick: {
        show: false
    },
    axisLabel: {
        textStyle: {
            color: '#999'
        }
    }
},
dataZoom: [
    {
        type: 'inside'
    }
],
series: [
    {
        type: 'bar',
        showBackground: true,
        itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: '#83bff6'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#188df0'}
                ]
            )
        },
        emphasis: {
            itemStyle: {
                color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                        {offset: 0, color: '#2378f7'},
                        {offset: 0.7, color: '#2378f7'},
                        {offset: 1, color: '#83bff6'}
                    ]
                )
            }
        },
        data: data
    }
]
};

// Enable data zoom when user click bar.
var zoomSize = 6;
myChart.on('click', function (params) {
console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
myChart.dispatchAction({
    type: 'dataZoom',
    startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
    endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
});
});