Apexcharts 渐变图表

使用说明 PLUGIN

echarts虽然功能强大，但是动画和界面上有不少欠缺，apexcharts图表插件可以弥补这个不足，以良好的动画和视觉效果大受推崇。本框架目前所使用的版本是v3.23.1，详见百度官网或Github。

渐变折线图

参数type: 'horizontal'可对折线水平渐变；参数type: 'vertical'对折线的面积部分进行垂直渐变。

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type='text/javascript'>
        //折线图左右渐变
        var options01 = {
            series: [{
                name: 'Likes',
                data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5]
            }],
            chart: {
                height: 300,
                type: 'line',
            },
            stroke: {
                curve: 'smooth'
            },
            xaxis: {
                type: 'datetime',
                categories: ['1/11/2000', '2/11/2000', '3/11/2000', '4/11/2000', '5/11/2000', '6/11/2000', '7/11/2000', '8/11/2000', '9/11/2000', '10/11/2000', '11/11/2000', '12/11/2000', '1/11/2001', '2/11/2001', '3/11/2001','4/11/2001' ,'5/11/2001' ,'6/11/2001'],
                tickAmount: 10,
                labels: {
                    formatter: function(value, timestamp, opts) {
                        return opts.dateFormatter(new Date(timestamp), 'dd MMM')
                    }
                }
            },
            title: {
                text: '社交媒体',
                align: 'left',
                style: {
                    fontSize: "16px",

                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'dark',
                    gradientToColors: [ '#FDD835'],
                    shadeIntensity: 1,
                    type: 'horizontal',
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100, 100, 100]
                },
            },
            yaxis: {
                min: -10,
                max: 40,
                title: {
                    text: '订婚',
                },
            }
        };
        var chart01 = new ApexCharts(document.querySelector("#chart01"), options01);
        chart01.render();
        //面积图上下渐变
        var options02 = {
            series: [{
                name: "Desktops",
                data: [10, 41, 65, 51, 49, 82, 69, 91, 148]
            }],
            chart: {
                height: 300,
                type: 'area',
                zoom: {
                    enabled: false
                }
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    inverseColors: false,
                    opacityFrom: 0.5,
                    opacityTo: 0,
                    stops: [0, 90, 100]
                },
            },
            grid: {
                row: {
                    colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                    opacity: 0.5
                },
            },
            xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
            }
        };

        var chart02 = new ApexCharts(document.querySelector("#chart02"), options02);
        chart02.render();
        //渐变面积图重叠
        var options03 = {
            series: [{
                name: 'series1',
                data: [71, 20, 48, 91, 42, 109, 100]
            }, {
                name: 'series2',
                data: [21, 42, 85, 32, 34, 82, 41]
            }],
            chart: {
                height: 300,
                type: 'area'
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    inverseColors: false,
                    opacityFrom: 0.45,
                    opacityTo: 0.05,
                    stops: [20, 100, 100, 100]
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
            xaxis: {
                type: 'datetime',
                categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
            },
            tooltip: {
                x: {
                    format: 'dd/MM/yy HH:mm'
                },
            },
        };

        var chart03 = new ApexCharts(document.querySelector("#chart03"), options03);
        chart03.render();
</script>

                            <div class="inner" style="padding: 14px;">
                                <div id="chart01"></div>
                                <div id="chart02"></div>
                                <div id="chart03"></div>
                            </div>

渐变柱状图

定义好type: "horizontal/vertical"，柱状图不仅可以水平渐变，也可以垂直渐变。

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type='text/javascript'>
        //渐变柱状图
        var options04 = {
            series: [{
                name: 'Net Profit',
                data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
            }, {
                name: 'Revenue',
                data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
            }, {
                name: 'Free Cash Flow',
                data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
            }],
            chart: {
                type: 'bar',
                height: 350
            },
            plotOptions: {
                bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    endingShape: 'rounded'
                },
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                show: true,
                width: 2,
                colors: ['transparent']
            },
            xaxis: {
                categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shade: 'light',
                    type: "horizontal",
                    shadeIntensity: 0.25,
                    gradientToColors: undefined,
                    inverseColors: true,
                    opacityFrom: 0.85,
                    opacityTo: 0.85,
                    stops: [50, 0, 100]
                },
            },
        };

        var chart04 = new ApexCharts(document.querySelector("#chart04"), options04);
        chart04.render();

        var options05 = {
            series: [{
                name: 'Net Profit',
                data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
            }, {
                name: 'Revenue',
                data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
            }, {
                name: 'Free Cash Flow',
                data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
            }],
            chart: {
                type: 'bar',
                height: 350
            },
            xaxis: {
                categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
            },
            fill: {
                type: "gradient",
                gradient: {
                    shade: "light",
                    type: "vertical",
                    shadeIntensity: 1,
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100]
                }
            },
        };
</script>

                            <div class="inner" style="padding: 14px;">
                                <div id="chart04"></div>
                                <div id="chart05"></div>
                            </div>

渐变雷达图

雷达图的渐变演示效果。

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type='text/javascript'>
        //雷达图渐变
        var options06 = {
            series: [70],
            chart: {
                height: 300,
                type: 'radialBar',
            },
            fill: {
                type: 'gradient',
                gradient: {
                    type: 'horizontal',
                    shadeIntensity: 0.5,
                    gradientToColors: ['#abe5a1'],
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100]
                }
            },
            labels: ['中国'],
        };

        var chart06 = new ApexCharts(document.querySelector("#chart06"), options06);
        chart06.render();

        var options07 = {
            series: [44, 55, 67, 83],
            chart: {
                height: 300,
                type: 'radialBar',
            },
            fill: {
                type: "gradient",
                gradient: {
                    type: "horizontal",
                    gradientToColors: ['#abe5a1','#00d8ff','#ccff00','#ff9600'],
                    shadeIntensity: 0.5,
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [0, 100]
                }
            },
            plotOptions: {
                radialBar: {
                    dataLabels: {
                        total: {
                            show: true,
                            label: '中国',
                            formatter: function (w) {
                                return 249
                            }
                        }
                    }
                }
            },
            labels: ['唐朝', '宋朝', '元朝', '明朝'],
        };

        var chart07 = new ApexCharts(document.querySelector("#chart07"), options07);
        chart07.render();
</script>

                                     <div id="line" style="height:200px;"></div>

图表阴影

通过dropShadow参数可自定义图表阴影。

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type='text/javascript'>
        //图表阴影
        var options08 = {
            series: [{
                name: 'Likes',
                data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5]
            }],
            chart: {
                height: 300,
                type: 'line',
                dropShadow: {
                    enabled: true,
                    opacity: 0.3,
                    blur: 5,
                    left: -7,
                    top: 22
                },
            },
            stroke: {
                curve: 'smooth'
            },
            xaxis: {
                type: 'datetime',
                categories: ['1/11/2000', '2/11/2000', '3/11/2000', '4/11/2000', '5/11/2000', '6/11/2000', '7/11/2000', '8/11/2000', '9/11/2000', '10/11/2000', '11/11/2000', '12/11/2000', '1/11/2001', '2/11/2001', '3/11/2001','4/11/2001' ,'5/11/2001' ,'6/11/2001'],
                tickAmount: 10,
                labels: {
                    formatter: function(value, timestamp, opts) {
                        return opts.dateFormatter(new Date(timestamp), 'dd MMM')
                    }
                }
            },

        };
        var chart08 = new ApexCharts(document.querySelector("#chart08"), options08);
        chart08.render();
</script>

                                     <div id="chart08"></div>

背景图图表

type: 'image'参数可自定义背景图；type: 'pattern',参数可定义内置图形，可使用的图形有verticalLines（垂线）, squares（小方块）, horizontalLines（水平线）, circles（小圆环）,slantedLines（斜线）。

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type='text/javascript'>
        //背景图饼图
        var options09 = {
            series: [44, 33, 54, 45],
            chart: {
                width: 350,
                type: 'pie',
            },
            fill: {
                type: 'image',
                opacity: 0.85,
                image: {
                    src: ['examples/images/china01.jpg', 'examples/images/china02.jpg', 'examples/images/china03.jpg', 'examples/images/china04.jpg'],
                    width: 25,
                    imagedHeight: 25
                },
            },
        };

        var chart09 = new ApexCharts(document.querySelector("#chart09"), options09);
        chart09.render();
        //内置图形环图
        var options10 = {
            series: [44, 55, 41, 17, 15],
            chart: {
                width: 350,
                type: 'donut',
            },
            fill: {
                type: 'pattern',
                opacity: 1,
                pattern: {
                    enabled: true,
                    style: ['verticalLines', 'squares', 'horizontalLines', 'circles','slantedLines'],
                },
            },
        };

        var chart10 = new ApexCharts(document.querySelector("#chart10"), options10);
        chart10.render();
</script>

                                <div class="ax-row">
                                    <div class="ax-col ax-col-12"><div id="chart09"></div></div>
                                    <div class="ax-col ax-col-12"><div id="chart10"></div></div>
                                </div>

填充参数

渐变是apexcharts图表插件的亮点和特色，关键是掌握该插件的填充参数，以下是填充参数说明。

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script type='text/javascript'>
...
fill: {
  colors: ['#1A73E8', '#B32824','#45fa98'],//填充颜色。数组索引对应系列索引。
  opacity: 0.9,//透明度
  type: 'gradient',//必填，默认solid，其他可选gradient，pattern，image。选择不同的类型则填写不同类型参数。
  gradient: {
    shade: 'dark',//阴影风格，可选light（变亮）和dark（变黑）
    type: "horizontal",//渐变方向，可选horizontal（水平）、vertical（垂直）、diagonal1（对角线1）、diagonal2（对角线2）
    shadeIntensity: 0.5,//阴影强度，可选0~1
    gradientToColors: [ '#FDD835','red','green'], //渐变终点色，可填任意颜色，如果不填或填undefined则是默认黑色。数组索引对应系列索引。
    inverseColors: true,//渐变色反转，可选true（反转）和false（正常）
    opacityFrom: [0.2, 0.6, 1],//渐变开始透明度。数组索引对应系列索引。
    opacityTo: [0.9, 0.8, 1],//渐变结束透明度。数组索引对应系列索引。
    stops: [0, 50, 100],//渐变位置断点。数组索引对应系列索引。
    colorStops: []//渐变颜色断点。数组索引对应系列索引。
  },
  image: {
      src: ['stripes.jpg', '1101098.png', 'ca13e2e6c0_z.jpg'],//背景图片。数组索引对应系列索引。
      width: undefined,
      height: undefined
  },
  pattern: {
      style: 'verticalLines',//内置平铺图案的图案模式，可选verticalLines（垂线），horizontalLines（水平线），slantedLines（斜线），squares（小方块），circles（小圆点）
      width: 6,//内置平铺图案的长度
      height: 6,//内置平铺图案的高度
      strokeWidth: 2,//内置平铺图案线条宽度
  },
}
...
</script>