Apexcharts学习

Apexcharts学习"/>

Apexcharts学习

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

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

与数据标签一行 – 顶点图表.js (apexcharts)/

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>

显示效果：