test/bar2.html - master - githubmirror/echarts

test/bar2.html
685 строк24 KB
100pah
fix: Fix candlestick clip path on category axis.
30 мар 2026, 19:29
30 мар 2026, 19:299c4aa42

<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                height: 60px;
                background: #146402;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
            }
            .chart {
                height: 400px;
            }
        </style>

        <div class="chart" id="main1"></div>
        <h1>Narrow grid</h1>
        <div class="chart" id="main2"></div>
        <div class="chart" id="main3"></div>
        <div class="chart" id="main4"></div>
        <div class="chart" id="main5"></div>
        <div class="chart" id="main6"></div>
        <div class="chart" id="main7"></div>


        <script>

            require(['echarts'], function (echarts) {

                var option = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
                    },
                    toolbox: {
                        show : true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            data : ['周一','周二','周三','周四','周五','周六','周日']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            seletedMode: 'series',
                            name:'直接访问',
                            type:'bar',
                            select: {
                                itemStyle: {
                                    color: 'green'
                                }
                            },
                            data:[{value: 120, itemStyle: {selectable: false}}, 332, 301, 334, 390, 330, 320]
                        },
                        {
                            name:'邮件营销',
                            type:'bar',
                            stack: '广告',
                            data:[120, 132, 101, 134, 90, 230, 210]
                        },
                        {
                            name:'联盟广告',
                            type:'bar',
                            stack: '广告',
                            data:[220, 182, 191, 234, 290, 330, 310]
                        },
                        {
                            name:'视频广告',
                            type:'bar',
                            stack: '广告',
                            data:[150, 232, 201, 154, 190, 330, 410]
                        },
                        {
                            name:'搜索引擎',
                            type:'bar',
                            data:[862, 1018, 964, 1026, 1679, 1600, 1570],
                            markLine : {
                                itemStyle:{
                                    normal:{
                                        label: {
                                            formatter: function (params) {
                                              console.log(params);
                                            }
                                        },
                                        lineStyle:{
                                            type: 'dashed'
                                        }
                                    }
                                },
                                data : [
                                    [{type : 'min'}, {type : 'max'}]
                                ]
                            }
                        },
                        {
                            name:'百度',
                            type:'bar',
                            barWidth : 5,
                            stack: '搜索引擎',
                            data:[620, 732, 701, 734, 1090, 1130, 1120]
                        },
                        {
                            name:'谷歌',
                            type:'bar',
                            stack: '搜索引擎',
                            data:[120, 132, 101, 134, 290, 230, 220]
                        },
                        {
                            name:'必应',
                            type:'bar',
                            stack: '搜索引擎',
                            data:[60, 72, 71, 74, 190, 130, 110]
                        },
                        {
                            name:'其他',
                            type:'bar',
                            stack: '搜索引擎',
                            data:[62, 82, 91, 84, 109, 110, 120]
                        }
                    ]
                };
                testHelper.createChart(echarts, 'main1', option);
            });

        </script>



        <script>

            var echarts;
            var chart;
            var myChart;
            var groupCategories = [];
            var groupColors = [];

            require(['echarts'], function (ec) {
                echarts = ec;

                option = {
                    color: [{
                        type: 'linear',
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(42, 20, 20, 0.8)'
                        }, {
                            offset: 1,
                            color: 'rgba(42, 20, 20, 0)'
                        }],
                        x: 0.5,
                        y: 0,
                        x2: 0.49999999999999994,
                        y2: 1
                    }],
                    xAxis: {
                        // data: ['a', 'b', 'c', 'd'],
                        data: ['a', 'b'],
                        axisTick: {show: false},
                        axisLabel: {
                            formatter: 'barGap: \'-100%\''
                        }
                    },
                    yAxis: {
                        splitLine: {show: false}
                    },
                    animationDurationUpdate: 1200,
                    grid: {
                        width: 100
                    },
                    animation: false,
                    series: [{
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#ddd'
                            }
                        },
                        silent: true,
                        barWidth: 40,
                        barGap: '-100%', // Make series be overlap
                        data: [60, 60],
                        label: {
                            show: true,
                            color: 'blue',
                            position: 'top'
                        }
                    }, {
                        type: 'bar',
                        barWidth: 40,
                        z: 10,
                        data: [45, 55]
                    }]
                };

                testHelper.createChart(echarts, 'main2', option);
            });

        </script>






        <script>

            var echarts;
            var chart;
            var myChart;
            var groupCategories = [];
            var groupColors = [];

            require([
                'echarts'
            ], function (ec) {
                echarts = ec;
                var dataCount = 10;
                var dayTimestamp = 24 * 60 * 60 * 1000;

                function makeSeriesData() {
                    var result = [];
                    var date = +(new Date(2019, 8, 10));
                    for (var i = 0; i < dataCount; i++) {
                        result.push([+date, Math.random() * 1000]);
                        date += dayTimestamp;
                    }
                    return result;
                }

                option = {
                    xAxis: {
                        type: 'time',
                        boundaryGap: ['20%', '20%'],
                        splitLine: {show: false}
                    },
                    yAxis: {
                        axisLine: {show: false},
                        axisTick: {show: false},
                        splitLine: {show: false}
                    },
                    legend: {},
                    series: [{
                        name: 'barA1',
                        type: 'bar',
                        stack: 'a',
                        select: {
                                itemStyle: {
                                    color: 'green'
                                }
                            },
                        itemStyle: {
                            shadowBlur: 10,
                            borderColor: '#ef1',
                            borderWidth: 5
                        },
                        data: makeSeriesData()
                    }, {
                        name: 'barA2',
                        type: 'bar',
                        stack: 'a',
                        itemStyle: {
                            borderColor: '#1dd',
                            borderWidth: 5
                        },
                        data: makeSeriesData()
                    }, {
                        name: 'barB',
                        type: 'bar',
                        itemStyle: {
                            shadowBlur: 5,
                            borderColor: '#ef1',
                            borderWidth: 3
                        },
                        data: makeSeriesData()
                    }]
                };

                var chart = testHelper.create(echarts, 'main3', {
                    title: [
                        'bar on time axis',
                        'click the legend, the bar should display normally'
                    ],
                    option: option
                    // recordCanvas: true
                });
            });

        </script>







        <script>

            var echarts;
            var chart;
            var myChart;
            var groupCategories = [];
            var groupColors = [];

            require([
                'echarts'
            ], function (ec) {
                echarts = ec;
                var dataCount = 5;

                function makeSeriesData() {
                    var result = [];
                    var date = 0;
                    for (var i = 0; i < dataCount; i++) {
                        result.push([+date, Math.random() * 1000]);
                        date += Math.ceil(Math.random() * 10);
                    }
                    return result;
                }
                var itemStyle = {
                    shadowBlur: 5
                };

                option = {
                    xAxis: {
                        scale: true,
                        // boundaryGap: ['0.5%', .1],
                        splitLine: {show: false}
                    },
                    yAxis: {
                        axisLabel: {
                            margin: 40
                        },
                        axisLine: {show: false},
                        axisTick: {show: false},
                        splitLine: {show: false}
                    },
                    dataZoom: [{
                        type: 'slider'
                    }, {
                        type: 'inside'
                    }],
                    legend: {},
                    series: [{
                        name: 'barA',
                        type: 'bar',
                        itemStyle: itemStyle,
                        data: makeSeriesData()
                    }, {
                        name: 'barB',
                        type: 'bar',
                        itemStyle: itemStyle,
                        data: makeSeriesData()
                    }],
                    animation: false
                };

                var chart = testHelper.create(echarts, 'main4', {
                    title: [
                        'bar on value axis',
                        'click the legend, the bar should display normally'
                    ],
                    option: option
                    // recordCanvas: true
                });
            });

        </script>






        <script>

            var echarts;
            var chart;
            var myChart;
            var groupCategories = [];
            var groupColors = [];

            require([
                'echarts'
            ], function (ec) {
                echarts = ec;
                var dataCount = 10;

                function makeSeriesData() {
                    var result = [];
                    var date = 10;
                    for (var i = 0; i < dataCount; i++) {
                        result.push([+date, Math.random() * 1000]);
                        date += 1;
                    }
                    return result;
                }
                var itemStyle = {
                    shadowBlur: 5
                };

                option = {
                    xAxis: {
                        type: 'category',
                        scale: true,
                        boundaryGap: false,
                        splitLine: {show: false},
                        axisLine: {show: false}
                    },
                    yAxis: {
                        axisLabel: {
                            margin: 40
                        },
                        axisLine: {show: false},
                        axisTick: {show: false},
                        splitLine: {show: false}
                    },
                    legend: {},
                    series: [{
                        name: 'lineA',
                        type: 'line',
                        data: makeSeriesData()
                    }, {
                        name: 'barA',
                        type: 'bar',
                        itemStyle: itemStyle,
                        data: makeSeriesData()
                    }, {
                        name: 'barB',
                        type: 'bar',
                        itemStyle: itemStyle,
                        data: makeSeriesData()
                    }]
                };

                var chart = testHelper.create(echarts, 'main5', {
                    title: [
                        'bar on category axis',
                        'click the legend, the bar should display normally'
                    ],
                    option: option
                    // recordCanvas: true
                });
            });

        </script>




        <script>
            require(['echarts'], function (echarts) {
                option = {
                    animation: false,
                    dataZoom: [
                        {
                            "type": "slider",
                            "show": true
                        }
                    ],
                    color: ['#003366', '#e5323e'],
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        top: 5,
                        data: ['Forest', 'Desert']
                    },
                    xAxis: [
                        {
                            type: 'time'
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'Forest',
                            type: 'bar',
                            barGap: 0,
                            data: [["2017-05-26", 320], ["2017-05-25", 340], ["2017-05-24", 310]]
                        },
                        {
                            name: 'Desert',
                            type: 'bar',
                            data: [["2017-05-26", 240], ["2017-05-24", 315]]
                        }
                    ]
                };

                var chart = testHelper.create(echarts, 'main6', {
                    title: [
                        'Bar series with time axis',
                        'Zoom in and bars should not overlap'
                    ],
                    option: option
                });
            });
        </script>

        <script>
            require(['echarts'], function (echarts) {
                option = {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            select: {
                                itemStyle: {
                                    color: 'red'
                                }
                            },
                            selectedMode: 'single',
                            stack: 'all',
                            emphasis: {focus: 'series', blurScope: 'coordinateSystem'}

                        },
                        {
                            data: [120, 200, 150, 80, 70, 110, 130],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            select: {
                                itemStyle: {
                                    color: 'yellow'
                                }
                            },
                            selectedMode: 'single',
                            stack: 'all',
                            emphasis: {focus: 'series', blurScope: 'coordinateSystem'}

                        },
                        {
                            data: [130, {
                                value: 120,
                                select: {
                                    disabled: true
                                }
                            }, 160, {
                                value: 120,
                                selected: true
                            }, 170, {
                                value: 210,
                                selected: true
                            }, 230],
                            type: 'bar',
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            },
                            stack: 'all',
                            select: {
                                itemStyle: {
                                    color: 'green'
                                }
                            },
                            emphasis: {focus: 'series', blurScope: 'coordinateSystem'},

                            selectedMode: 'single',

                        }
                    ]
                }

 

                var chart = testHelper.create(echarts, 'main7', {
                    title: [
                        'Select in Bar Series',
                        'Click on bar will turn whole series into select state, expect second item in second serie whose select has been disbale'
                    ],
                    option: option,
                    button: [
                        {
                            text: 'Click to update selectedMode to \'single\'',
                            onClick: () => {
                                chart.setOption({
                                    series: [
                                        { selectedMode: 'single' },
                                        { selectedMode: 'single' },
                                        { selectedMode: 'single' },
                                    ]
                                })
                            }
                        },
                        {
                            text: 'Click to update selectedMode \'multiple\'',
                            onClick: () => {
                                chart.setOption({
                                    series: [
                                        { selectedMode: 'multiple' },
                                        { selectedMode: 'multiple' },
                                        { selectedMode: 'multiple' },
                                    ]
                                })
                            }
                        },
                        {
                            text: 'Click to update selectedMode \'series\'',
                            onClick: () => {
                                chart.setOption({
                                    series: [
                                        { selectedMode: 'series' },
                                        { selectedMode: 'series' },
                                        { selectedMode: 'series' },
                                    ]
                                })
                            }
                        },
                    ]
                });
            });
        </script>


    </body>
</html>