股票图

效果

使用方法

<template>
    <div>
       <lt-canvas ref="canvas" :width="750" :height="500"></lt-canvas>       
    </div>
</template>
<script>
    import LightChart from 'light-chart';
    export default {
        components:{
            ltCanvas:require("light-chart/canvas")
        },
        data(){
            return {}
        },
        mounted(){
            let data = require("candle.json");
            data = data.slice(0, 100); // 仅显示100 个
            //数据处理
            data.sort(function(obj1, obj2) {
                return obj1.time > obj2.time ? 1 : -1;
            });
            data.forEach(function(obj) {
                obj.range = [ obj.start, obj.end, obj.max, obj.min ];
                obj.trend = (obj.start <= obj.end) ? 0 : 1;
            });
            let chart = new LightChart.Chart({
                ltCanvas:this.$refs.canvas
            });

            chart.source(data, {
            range: {
                tickCount: 5
            },
            time: {
                tickCount: 3
            }
            });

            chart.axis('time', {
                label(text, index, total) {
                    const textCfg = {};
                    if (index === 0) {
                    textCfg.textAlign = 'left';
                    }
                    if (index === total - 1) {
                    textCfg.textAlign = 'right';
                    }
                    return textCfg;
                }
            });

            chart.schema().position('time*range')
            .color('trend', function(trend) {
                return [ '#C00000', '#19B24B' ][trend];
            })
            .shape('candle');
            chart.render();
        }
            
    }
</script>
<style scoped>

</style>