w-plot-vue 1.0.0

package/src/AppZoneWBar.vue

@@ -0,0 +1,1454 @@
+<template>
+    <div>
+
+
+        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-plot-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-bar</span></div>
+
+
+        <div style="padding:0px;">
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set & marginLeft & marginRight & marginTop & marginBottom'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        marginLeft: 25 + 60,
+                        marginRight: 25,
+                        marginTop: 25 + 10,
+                        marginBottom: 25 + 50,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set & barWidthRatio'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        barWidthRatio:0,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set & barWidthRatio & barGroupWidthRatio & barBorderRadius'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        barWidthRatio:0,
+                        barGroupWidthRatio:0,
+                        barBorderRadius:0,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set & barWidthRatio & barGroupWidthRatio & barBorderRadius & barBorderWidth'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        barWidthRatio:0,
+                        barGroupWidthRatio:0,
+                        barBorderRadius:0,
+                        barBorderWidth:0,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set & barColor'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        barColor:'#FF9800',
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set & barColor(gradient)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        barColor:['#4f95d8', '#0058a5'],
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set(color)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1b,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set(color, gradient)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1c,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set & barKpColor'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        barKpColor:{
+                            'USA':'#F44336',
+                            'China':'#E91E63',
+                            'Brazil':'#9C27B0',
+                            'EU':'#673AB7',
+                            'India':'#3F51B5',
+                            'Russia':'#2196F3',
+                        },
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set & barKpColor(gradient)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        barKpColor:{
+                            'USA':['#EF9A9A','#F44336'],
+                            'China':['#F48FB1','#E91E63'],
+                            'Brazil':['#CE93D8','#9C27B0'],
+                            'EU':['#B39DDB','#673AB7'],
+                            'India':['#9FA8DA','#3F51B5'],
+                            'Russia':['#90CAF9','#2196F3'],
+                        },
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set & hide labels'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        barShowLabels:false,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'one-set & show legned'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        barShowLabels:false,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set & barWidthRatio'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        barShowLabels:false,
+                        showLegend:true,
+                        barWidthRatio:0,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set & barWidthRatio & barGroupWidthRatio & barBorderRadius'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        barShowLabels:false,
+                        showLegend:true,
+                        barWidthRatio:0,
+                        barGroupWidthRatio:0,
+                        barBorderRadius:0,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set & barWidthRatio & barGroupWidthRatio & barBorderRadius & barBorderWidth'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        barShowLabels:false,
+                        showLegend:true,
+                        barWidthRatio:0,
+                        barGroupWidthRatio:0,
+                        barBorderRadius:0,
+                        barBorderWidth:0,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set(series color)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2b,
+                        barShowLabels:false,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set(series color, gradient)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2c,
+                        barShowLabels:false,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set(color)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2d,
+                        barShowLabels:false,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set(color, gradient)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2e,
+                        barShowLabels:false,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set & barKpColor'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        barShowLabels:false,
+                        showLegend:true,
+                        barKpColor:{
+                            '0.USA':'#FF8A80',
+                            '1.USA':'#F44336',
+                            '0.China':'#FF80AB',
+                            '1.China':'#E91E63',
+                            '0.Brazil':'#EA80FC',
+                            '1.Brazil':'#9C27B0',
+                            '0.EU':'#B388FF',
+                            '1.EU':'#673AB7',
+                            '0.India':'#8C9EFF',
+                            '1.India':'#3F51B5',
+                            '0.Russia':'#82B1FF',
+                            '1.Russia':'#2196F3',
+                        },
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set & barKpColor(gradient)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        barShowLabels:false,
+                        showLegend:true,
+                        barKpColor:{
+                            '0.USA':['rgb(255, 205, 210)', 'rgb(229, 115, 115)'],
+                            '1.USA':['rgb(210, 205, 255)', 'rgb(115, 115, 229)'],
+                            '0.China':['rgb(255, 185, 210)', 'rgb(229, 95, 115)'],
+                            '1.China':['rgb(210, 185, 255)', 'rgb(115, 95, 229)'],
+                            '0.Brazil':['rgb(255, 165, 210)', 'rgb(229, 75, 115)'],
+                            '1.Brazil':['rgb(210, 165, 255)', 'rgb(115, 75, 229)'],
+                            '0.EU':['rgb(255, 145, 210)', 'rgb(229, 55, 115)'],
+                            '1.EU':['rgb(210, 145, 255)', 'rgb(115, 55, 229)'],
+                            '0.India':['rgb(255, 125, 210)', 'rgb(229, 35, 115)'],
+                            '1.India':['rgb(210, 125, 255)', 'rgb(115, 35, 229)'],
+                            '0.Russia':['rgb(255, 105, 210)', 'rgb(229, 15, 115)'],
+                            '1.Russia':['rgb(210, 105, 255)', 'rgb(115, 15, 229)'],
+                        },
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set && show labels'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        barShowLabels:true,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set && hide legned'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        barShowLabels:false,
+                        showLegend:false,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set && barDisplay(stackNormal)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        barShowLabels:false,
+                        showLegend:true,
+                        barDisplay:'stackNormal',
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set && barDisplay(stackNormal) && barShowLabels'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        barShowLabels:true,
+                        showLegend:true,
+                        barDisplay:'stackNormal',
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'multi-set && barDisplay(stackPercent)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        barShowLabels:false,
+                        showLegend:true,
+                        barDisplay:'stackPercent',
+                        yTitle:'Percent of Weight (%)'
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set & marginLeft & marginRight & marginTop & marginBottom'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        direction:'horizontal',
+                        marginLeft: 25 + 60,
+                        marginRight: 25,
+                        marginTop: 25 + 10,
+                        marginBottom: 25 + 50,
+                        legendPosition:'bottomright',
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set & barWidthRatio'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barWidthRatio:0,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set & barWidthRatio & barGroupWidthRatio & barBorderRadius'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barWidthRatio:0,
+                        barGroupWidthRatio:0,
+                        barBorderRadius:0,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set & barWidthRatio & barGroupWidthRatio & barBorderRadius & barBorderWidth'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barWidthRatio:0,
+                        barGroupWidthRatio:0,
+                        barBorderRadius:0,
+                        barBorderWidth:0,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set & barColor'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barColor:'#FF9800',
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set & barColor(gradient)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barColor:['#4f95d8', '#0058a5'],
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set(color)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1b,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set(color, gradient)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1c,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set & barKpColor'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barKpColor:{
+                            'USA':'#F44336',
+                            'China':'#E91E63',
+                            'Brazil':'#9C27B0',
+                            'EU':'#673AB7',
+                            'India':'#3F51B5',
+                            'Russia':'#2196F3',
+                        },
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set & barKpColor(gradient)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barKpColor:{
+                            'USA':['#EF9A9A','#F44336'],
+                            'China':['#F48FB1','#E91E63'],
+                            'Brazil':['#CE93D8','#9C27B0'],
+                            'EU':['#B39DDB','#673AB7'],
+                            'India':['#9FA8DA','#3F51B5'],
+                            'Russia':['#90CAF9','#2196F3'],
+                        },
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set & hide labels'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & one-set & show legned'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt1a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set & barWidthRatio'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                        barWidthRatio:0,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set & barWidthRatio & barGroupWidthRatio & barBorderRadius'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                        barWidthRatio:0,
+                        barGroupWidthRatio:0,
+                        barBorderRadius:0,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set & barWidthRatio & barGroupWidthRatio & barBorderRadius & barBorderWidth'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                        barWidthRatio:0,
+                        barGroupWidthRatio:0,
+                        barBorderRadius:0,
+                        barBorderWidth:0,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set(series color)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2b,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set(series color, gradient)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2c,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set(color)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2d,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set(color, gradient)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2e,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set & barKpColor'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                        barKpColor:{
+                            '0.USA':'#FF8A80',
+                            '1.USA':'#F44336',
+                            '0.China':'#FF80AB',
+                            '1.China':'#E91E63',
+                            '0.Brazil':'#EA80FC',
+                            '1.Brazil':'#9C27B0',
+                            '0.EU':'#B388FF',
+                            '1.EU':'#673AB7',
+                            '0.India':'#8C9EFF',
+                            '1.India':'#3F51B5',
+                            '0.Russia':'#82B1FF',
+                            '1.Russia':'#2196F3',
+                        },
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set & barKpColor(gradient)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                        barKpColor:{
+                            '0.USA':['rgb(255, 205, 210)', 'rgb(229, 115, 115)'],
+                            '1.USA':['rgb(210, 205, 255)', 'rgb(115, 115, 229)'],
+                            '0.China':['rgb(255, 185, 210)', 'rgb(229, 95, 115)'],
+                            '1.China':['rgb(210, 185, 255)', 'rgb(115, 95, 229)'],
+                            '0.Brazil':['rgb(255, 165, 210)', 'rgb(229, 75, 115)'],
+                            '1.Brazil':['rgb(210, 165, 255)', 'rgb(115, 75, 229)'],
+                            '0.EU':['rgb(255, 145, 210)', 'rgb(229, 55, 115)'],
+                            '1.EU':['rgb(210, 145, 255)', 'rgb(115, 55, 229)'],
+                            '0.India':['rgb(255, 125, 210)', 'rgb(229, 35, 115)'],
+                            '1.India':['rgb(210, 125, 255)', 'rgb(115, 35, 229)'],
+                            '0.Russia':['rgb(255, 105, 210)', 'rgb(229, 15, 115)'],
+                            '1.Russia':['rgb(210, 105, 255)', 'rgb(115, 15, 229)'],
+                        },
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set && show labels'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:true,
+                        showLegend:true,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set && hide legned'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:false,
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set && barDisplay(stackNormal)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                        barDisplay:'stackNormal',
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set && barDisplay(stackNormal) && barShowLabels'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:true,
+                        showLegend:true,
+                        barDisplay:'stackNormal',
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+            <div class="bk">
+                <demolink
+                    :kbname="'w-bar'"
+                    :casename="'horizontal & multi-set && barDisplay(stackPercent)'"
+                ></demolink>
+
+                <w-bar
+                    :opt="{
+                        ...WBar.opt2a,
+                        direction:'horizontal',
+                        marginLeft:80,
+                        legendPosition:'bottomright',
+                        barShowLabels:false,
+                        showLegend:true,
+                        barDisplay:'stackPercent',
+                        yTitle:'Percent of Weight (%)'
+                    }"
+                ></w-bar>
+
+            </div>
+
+
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import demolink from './components/demolink.vue'
+import WBar from './components/WBar.vue'
+
+export default {
+    components: {
+        demolink,
+        WBar,
+    },
+    props: {
+    },
+    data: function() {
+        let keys1 = ['USA', 'China', 'Brazil', 'EU', 'India', 'Russia']
+        let rds1a = [
+            {
+                name: 'Corn',
+                data: { USA: 406.292, China: 260.000, Brazil: 107.000, EU: 68.300, India: 27.500, Russia: 14.500 },
+            },
+        ]
+        let rds1b = [
+            {
+                name: 'Corn',
+                data: {
+                    USA: {
+                        value: 406.292,
+                        color: '#F44336',
+                    },
+                    China: {
+                        value: 260.000,
+                        color: '#E91E63',
+                    },
+                    Brazil: {
+                        value: 107.000,
+                        color: '#9C27B0',
+                    },
+                    EU: {
+                        value: 68.300,
+                        color: '#673AB7',
+                    },
+                    India: {
+                        value: 27.500,
+                        color: '#3F51B5',
+                    },
+                    Russia: {
+                        value: 14.500,
+                        color: '#2196F3',
+                    },
+                },
+            },
+        ]
+        let rds1c = [
+            {
+                name: 'Corn',
+                data: {
+                    USA: {
+                        value: 406.292,
+                        color: ['#EF9A9A', '#F44336'],
+                    },
+                    China: {
+                        value: 260.000,
+                        color: ['#F48FB1', '#E91E63'],
+                    },
+                    Brazil: {
+                        value: 107.000,
+                        color: ['#CE93D8', '#9C27B0'],
+                    },
+                    EU: {
+                        value: 68.300,
+                        color: ['#B39DDB', '#673AB7'],
+                    },
+                    India: {
+                        value: 27.500,
+                        color: ['#9FA8DA', '#3F51B5'],
+                    },
+                    Russia: {
+                        value: 14.500,
+                        color: ['#90CAF9', '#2196F3'],
+                    },
+                },
+            },
+        ]
+        let rds2a = [
+            {
+                name: 'Corn',
+                data: { USA: 406.292, China: 260.000, Brazil: 107.000, EU: 68.300, India: 27.500, Russia: 14.500 },
+            },
+            {
+                name: 'Wheat',
+                data: { USA: 51.086, China: 136.000, Brazil: 5.500, EU: 141.000, India: 107.180, Russia: 77.000 },
+            },
+        ]
+        let rds2b = [
+            {
+                name: 'Corn',
+                color: '#E91E63',
+                data: { USA: 406.292, China: 260.000, Brazil: 107.000, EU: 68.300, India: 27.500, Russia: 14.500 },
+            },
+            {
+                name: 'Wheat',
+                color: '#9C27B0',
+                data: { USA: 51.086, China: 136.000, Brazil: 5.500, EU: 141.000, India: 107.180, Russia: 77.000 },
+            },
+        ]
+        let rds2c = [
+            {
+                name: 'Corn',
+                color: ['rgb(243, 150, 199)', 'rgb(233, 30, 99)'],
+                data: { USA: 406.292, China: 260.000, Brazil: 107.000, EU: 68.300, India: 27.500, Russia: 14.500 },
+            },
+            {
+                name: 'Wheat',
+                color: ['rgb(206, 159, 236)', 'rgb(156, 39, 176)'],
+                data: { USA: 51.086, China: 136.000, Brazil: 5.500, EU: 141.000, India: 107.180, Russia: 77.000 },
+            },
+        ]
+        let rds2d = [
+            {
+                name: 'Corn',
+                data: {
+                    USA: {
+                        value: 406.292,
+                        color: '#FF8A80',
+                    },
+                    China: {
+                        value: 260.000,
+                        color: '#FF80AB',
+                    },
+                    Brazil: {
+                        value: 107.000,
+                        color: '#EA80FC',
+                    },
+                    EU: {
+                        value: 68.300,
+                        color: '#B388FF',
+                    },
+                    India: {
+                        value: 27.500,
+                        color: '#8C9EFF',
+                    },
+                    Russia: {
+                        value: 14.500,
+                        color: '#82B1FF',
+                    },
+                },
+            },
+            {
+                name: 'Wheat',
+                data: {
+                    USA: {
+                        value: 51.086,
+                        color: '#F44336',
+                    },
+                    China: {
+                        value: 136.000,
+                        color: '#E91E63',
+                    },
+                    Brazil: {
+                        value: 5.500,
+                        color: '#9C27B0',
+                    },
+                    EU: {
+                        value: 141.000,
+                        color: '#673AB7',
+                    },
+                    India: {
+                        value: 107.180,
+                        color: '#3F51B5',
+                    },
+                    Russia: {
+                        value: 77.000,
+                        color: '#2196F3',
+                    },
+                },
+            },
+        ]
+        let rds2e = [
+            {
+                name: 'Corn',
+                data: {
+                    USA: {
+                        value: 406.292,
+                        color: ['rgb(255, 205, 210)', 'rgb(229, 115, 115)'],
+                    },
+                    China: {
+                        value: 260.000,
+                        color: ['rgb(255, 185, 210)', 'rgb(229, 95, 115)'],
+                    },
+                    Brazil: {
+                        value: 107.000,
+                        color: ['rgb(255, 165, 210)', 'rgb(229, 75, 115)'],
+                    },
+                    EU: {
+                        value: 68.300,
+                        color: ['rgb(255, 145, 210)', 'rgb(229, 55, 115)'],
+                    },
+                    India: {
+                        value: 27.500,
+                        color: ['rgb(255, 125, 210)', 'rgb(229, 35, 115)'],
+                    },
+                    Russia: {
+                        value: 14.500,
+                        color: ['rgb(255, 105, 210)', 'rgb(229, 15, 115)'],
+                    },
+                },
+            },
+            {
+                name: 'Wheat',
+                data: {
+                    USA: {
+                        value: 51.086,
+                        color: ['rgb(210, 205, 255)', 'rgb(115, 115, 229)'],
+                    },
+                    China: {
+                        value: 136.000,
+                        color: ['rgb(210, 185, 255)', 'rgb(115, 95, 229)'],
+                    },
+                    Brazil: {
+                        value: 5.500,
+                        color: ['rgb(210, 165, 255)', 'rgb(115, 75, 229)'],
+                    },
+                    EU: {
+                        value: 141.000,
+                        color: ['rgb(210, 145, 255)', 'rgb(115, 55, 229)'],
+                    },
+                    India: {
+                        value: 107.180,
+                        color: ['rgb(210, 125, 255)', 'rgb(115, 35, 229)'],
+                    },
+                    Russia: {
+                        value: 77.000,
+                        color: ['rgb(210, 105, 255)', 'rgb(115, 15, 229)'],
+                    },
+                },
+            },
+        ]
+        return {
+            'WBar': {
+                'opt1a': {
+                    width: 400,
+                    height: 400,
+                    keys: keys1,
+                    rds: rds1a,
+                    xTitle: 'Countries',
+                    yTitle: 'Weight (MT)',
+                },
+                'opt1b': {
+                    width: 400,
+                    height: 400,
+                    keys: keys1,
+                    rds: rds1b,
+                    xTitle: 'Countries',
+                    yTitle: 'Weight (MT)',
+                },
+                'opt1c': {
+                    width: 400,
+                    height: 400,
+                    keys: keys1,
+                    rds: rds1c,
+                    xTitle: 'Countries',
+                    yTitle: 'Weight (MT)',
+                },
+                'opt2a': {
+                    width: 400,
+                    height: 400,
+                    keys: keys1,
+                    rds: rds2a,
+                    xTitle: 'Countries',
+                    yTitle: 'Weight (MT)',
+                },
+                'opt2b': {
+                    width: 400,
+                    height: 400,
+                    keys: keys1,
+                    rds: rds2b,
+                    xTitle: 'Countries',
+                    yTitle: 'Weight (MT)',
+                },
+                'opt2c': {
+                    width: 400,
+                    height: 400,
+                    keys: keys1,
+                    rds: rds2c,
+                    xTitle: 'Countries',
+                    yTitle: 'Weight (MT)',
+                },
+                'opt2d': {
+                    width: 400,
+                    height: 400,
+                    keys: keys1,
+                    rds: rds2d,
+                    xTitle: 'Countries',
+                    yTitle: 'Weight (MT)',
+                },
+                'opt2e': {
+                    width: 400,
+                    height: 400,
+                    keys: keys1,
+                    rds: rds2e,
+                    xTitle: 'Countries',
+                    yTitle: 'Weight (MT)',
+                },
+            },
+        }
+    },
+    methods: {
+    }
+}
+</script>
+
+<style scoped>
+</style>