Apexcharts学习

Apexcharts学习地址 ：（建议看着图标一行一行分析）

系列 [使用数据] – 顶点图表.js (apexcharts.com)https://apexcharts.com/docs/series/        推荐看下面这个：

与数据标签一行 – 顶点图表.js (apexcharts.com)https://apexcharts.com/javascript-chart-demos/line-charts/data-labels/

ApexCharts加载了强大的功能，以满足您的数据可视化需求。
看看ApexCharts的一些关键功能。

一、基础内容

1.编写的基本格式如下：

        html:

  <div id="chart">
  </div>
 <div id="chart1">
  </div>
 <div id="chart2">
  </div>
   .......

        JS:

 //导入包  这里用的是静态加载  不能直接使用
<script src="{% static 'js/apexcharts.js' %}"></script>

<script>
    //option ：填写主要的图标内容

    var option=[
        .............
    ]

    //绑定div
    //可以使用如下的方式  也可以使用其他
    //例如 document.getElementById('chart')   
    
    var chart = new ApexCharts(document.querySelector("#chart"),option)
        chart.render()
</script>

二、折线图基本内容：

  series数据：

  //填写数据series:
 series: [{
            name: "折线1",
            type: 'line',    #指定数据类型 （最好填写上）
            data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
        }],

   x y轴的名称：

//y轴
 yaxis: {
              title: {
                text: 'Temperature'
              },
            min: 5,
            max: 40，
          },
          

//x轴
  xaxis:{
               title: {
               text: '月份'
              },
               categories: ["Jan", "Feb", "Mar", 'june', 'july', 'Augest' ,"Dec"]
         },

 折线类型：

 //折线格式类型  smooth straight stepline
 //分别对应  平滑 直线 阶梯
    stroke: {
        curve: 'straight',
        },

   标题与图名称：

//图标名称
          title: {
          text: '这是我的标题',
          align: 'left'
        },
//折现名称位置
   legend: {
          position: 'top',
          horizontalAlign: 'right',
            },

格式：

 //图表大小 
 chart: {
              height: 400,

            },
   
 //直接在数据上显示数据
             dataLabels: {
          enabled: false
            },
 //点的大小
            markers: {
            size: 10,
        }

整体代码如下：

    <script>
        var option = {
            {#数据x#}
            series: [{
                  name: "Series A",
                type:'line',

                data: [23, 34, 12, 54, 32, 40, 43]
        },
                { name: "Series B",
                type:'column',
                data: [23, 34, 12, 54, 32, 40, 43]
                } ],

            {#数据y#}
            xaxis:{
                 title: {
                text: '月份'
              },

    },
               categories: ["Jan", "Feb", "Mar", 'june', 'july', 'Augest' ,"Dec"],

            yaxis: {
              title: {
                text: 'Temperature'
              },
            },

         stroke: {
        curve: 'straight',
              width: 2,
        },

            {#有几个设置几个颜色#}
         colors: ['#77B6EA', '#127312'],

            title: {
          text: '这是我的标题',
          align: 'left'
        },



             legend: {
          position: 'top',
          horizontalAlign: 'right',
            },


        {# 格式 #}
         chart: {
              height: 400,

            },


            {#直接在数据上显示数据#}
             dataLabels: {
          enabled: false
            },

            markers: {
            size: 10,
        }
        }


        var chart1 = new ApexCharts( document.getElementById('chart1'),option)
        document.getElementById('chart1')
        chart1.render()
    </script>

显示效果：