动态更新echart成交量柱状图，并且不重绘，类似K线的更新方式

Posted 2020-08-23 黑黑哈哈

    function setoption(data) {
        let dataVolume=volumeChartData;
        var option = {
            title: {
                text: ‘成交量‘,
//                subtext: ‘纯属虚构‘
            },
            tooltip: {
                trigger: ‘axis‘
            },
            legend: {
                data:[‘最新成交价‘]
            },
//            toolbox: {
//                show: true,
//                feature: {
//                    dataView: {readOnly: false},
//                    restore: {},
//                    saveAsImage: {}
//                }
//            },
            toolbox: {
                show: false,
            },
            grid: {
                left: ‘5px‘,
                right: ‘5px‘,
                top: ‘10px‘,
                bottom: ‘10px‘,
                containLabel: true
            },
            dataZoom: [{
                textStyle: {
                    color: ‘#8392A5‘
                },
//增加这个代码，就能和K线一样的更新数据
                handleIcon: ‘M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z‘,
                handleSize: ‘80%‘,
                dataBackground: {
                    areaStyle: {
                        color: ‘#8392A5‘
                    },
                    lineStyle: {
                        opacity: 0.8,
                        color: ‘#8392A5‘
                    }
                },
                handleStyle: {
                    color: ‘#fff‘,
                    shadowBlur: 3,
                    shadowColor: ‘rgba(0, 0, 0, 0.6)‘,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }, {
                type: ‘inside‘
            }],
//            dataZoom: [
////                {
////                    show: true,
////                    start: 94,
////                    end: 100
////                },
////                {
////                    type: ‘inside‘,
////                    start: 94,
////                    end: 100
////                },
////                {
////                    show: true,
////                    yAxisIndex: 0,
////                    filterMode: ‘empty‘,
////                    width: 30,
////                    height: ‘80%‘,
////                    showDataShadow: false,
////                    left: ‘93%‘
////                }
//            ],
            xAxis: [
                {
                    type: ‘category‘,
                    boundaryGap: true,
                    data:dataVolume.time
                }
            ],
            yAxis: [
                {
                    type: ‘value‘,
                    scale: false,
                    name: ‘成交量‘,
                }
            ],
            series : [
                {
                    name: ‘成交量‘,
                    type: ‘bar‘,
                    data:dataVolume.prices
                }
            ]
        };
        return option
}