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>