区间条形图（带图例）

---

效果

使用方法

<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(){
            const data = [
                { gender: 'Male', value: -2.2, cate: '0-4' },
                { gender: 'Male', value: -2.2, cate: '5-9' },
                { gender: 'Male', value: -2.3, cate: '10-14' },
                { gender: 'Male', value: -2.5, cate: '15-19' },
                { gender: 'Male', value: -2.7, cate: '20-24' },
                { gender: 'Male', value: -3.1, cate: '25-29' },
                { gender: 'Male', value: -3.2, cate: '30-34' },
                { gender: 'Male', value: -3.0, cate: '35-39' },
                { gender: 'Male', value: -3.2, cate: '40-44' },
                { gender: 'Male', value: -4.3, cate: '45-49' },
                { gender: 'Male', value: -4.4, cate: '50-54' },
                { gender: 'Male', value: -3.6, cate: '55-59' },
                { gender: 'Male', value: -3.1, cate: '60-64' },
                { gender: 'Male', value: -2.4, cate: '65-69' },
                { gender: 'Male', value: -2.5, cate: '70-74' },
                { gender: 'Male', value: -2.3, cate: '75-79' },
                { gender: 'Male', value: -1.2, cate: '80-84' },
                { gender: 'Male', value: -0.6, cate: '85-89' },
                { gender: 'Male', value: -0.2, cate: '90-94' },
                { gender: 'Male', value: -0.1, cate: '95-99' },
                { gender: 'Male', value: -0.1, cate: '100 +' },
                { gender: 'Female', value: 2.1, cate: '0-4' },
                { gender: 'Female', value: 2.0, cate: '5-9' },
                { gender: 'Female', value: 2.2, cate: '10-14' },
                { gender: 'Female', value: 2.4, cate: '15-19' },
                { gender: 'Female', value: 2.6, cate: '20-24' },
                { gender: 'Female', value: 3.0 , cate: '25-29'},
                { gender: 'Female', value: 3.1, cate: '30-34' },
                { gender: 'Female', value: 2.9, cate: '35-39' },
                { gender: 'Female', value: 3.1, cate: '40-44' },
                { gender: 'Female', value: 4.1, cate: '45-49' },
                { gender: 'Female', value: 4.3, cate: '50-54' },
                { gender: 'Female', value: 3.6, cate: '55-59' },
                { gender: 'Female', value: 3.4, cate: '60-64' },
                { gender: 'Female', value: 2.6, cate: '65-69' },
                { gender: 'Female', value: 2.9, cate: '70-74' },
                { gender: 'Female', value: 2.9, cate: '75-79' },
                { gender: 'Female', value: 1.8, cate: '80-84' },
                { gender: 'Female', value: 1.2, cate: '85-89' },
                { gender: 'Female', value: 0.6, cate: '90-94' },
                { gender: 'Female', value: 0.1, cate: '95-99' },
                { gender: 'Female', value: 0.1, cate: '100 +' }
            ];
            let chart = new LightChart.Chart({
                ltCanvas:this.$refs.canvas
            });

            chart.source(data, {
                range: {
                value: 5
                }
            });
            chart.coord({
                transposed: true
            });
            chart.axis('cate', {
                line: LightChart.Global._defaultAxis.line,
                grid: null
            });
            chart.axis('value', {
                line: null,
                grid: LightChart.Global._defaultAxis.grid,
                label(text, index, total) {
                const textCfg = {};
                if (index === 0) {
                    textCfg.textAlign = 'left';
                }
                if (index === total - 1) {
                    textCfg.textAlign = 'right';
                }
                return textCfg;
                }
            });
            chart.interval().position('cate*value').color('gender').adjust('stack');
            chart.render();
        }
    }
</script>
<style scoped>

</style>