差别
这里会显示出您选择的修订版和当前版本之间的差别。
| 两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
|
playground:playground [2021/05/14 16:23] ysbywyxfp |
playground:playground [2021/06/04 10:18] (当前版本) ysbywyxfp |
||
|---|---|---|---|
| 行 1: | 行 1: | ||
| ====== PlayGround ====== | ====== PlayGround ====== | ||
| - | <achart> | + | <achart> { |
| - | { | + | <code> |
| - | chart: { | + | chart: { |
| - | width: 380, | + | width: 380, |
| - | type: 'pie', | + | type: 'pie', |
| - | toolbar: { show: true,tools: { download: true } }, | + | toolbar: { show: true,tools: { download: true } }, |
| - | }, | + | }, |
| - | labels: ['人员A', '人员B', '人员C', '人员D', '人员E'], | + | labels: ['人员A', '人员B', '人员C', '人员D', '人员E'], |
| - | series: [44, 55, 13, 43, 22], | + | series: [44, 55, 13, 43, 22], |
| - | responsive: [{ | + | responsive: [{ |
| - | breakpoint: 480, | + | breakpoint: 480, |
| - | options: { | + | options: { |
| - | chart: { | + | |
| - | width: 200 | + | |
| - | }, | + | |
| - | legend: { | + | |
| - | position: 'bottom' | + | |
| - | } | + | |
| - | } | + | |
| - | }] | + | |
| - | } | + | |
| - | </achart> | + | |
| - | + | ||
| - | var options = { | + | |
| - | series: [{ | + | |
| - | data: [21, 22, 10, 28, 16, 21, 13, 30] | + | |
| - | }], | + | |
| chart: { | chart: { | ||
| - | height: 350, | + | width: 200 |
| - | type: 'bar', | + | }, |
| - | events: { | + | legend: { |
| - | click: function(chart, w, e) { | + | position: 'bottom' |
| - | // console.log(chart, w, e) | + | |
| - | } | + | |
| } | } | ||
| - | }, | + | } |
| - | colors: colors, | + | }] |
| - | plotOptions: { | + | </code> |
| - | bar: { | + | } </achart> |
| - | columnWidth: '45%', | + | |
| - | distributed: true, | + | |
| - | } | + | |
| - | }, | + | |
| - | dataLabels: { | + | |
| - | enabled: false | + | |
| - | }, | + | |
| - | legend: { | + | |
| - | show: false | + | |
| - | }, | + | |
| - | xaxis: { | + | |
| - | categories: [ | + | |
| - | ['John', 'Doe'], | + | |
| - | ['Joe', 'Smith'], | + | |
| - | ['Jake', 'Williams'], | + | |
| - | 'Amber', | + | |
| - | ['Peter', 'Brown'], | + | |
| - | ['Mary', 'Evans'], | + | |
| - | ['David', 'Wilson'], | + | |
| - | ['Lily', 'Roberts'], | + | |
| - | ], | + | |
| - | labels: { | + | |
| - | style: { | + | |
| - | colors: colors, | + | |
| - | fontSize: '12px' | + | |
| - | } | + | |
| - | } | + | |
| - | } | + | |
| - | }; | + | |
| - | var chart = new ApexCharts(document.querySelector("#chart"), options); | ||
| - | chart.render(); | ||