123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- import Chart from "../../../src/chart/pie/ChartPie37/ChartPie37";
-
- let pie=new Chart(document.querySelector(".c1"),{});
- window.addEventListener('resize',function() {
- pie.resize();
- })
-
- const option={
- bg:{
- backgroundColor:"#000000"
- },
- pie:{
- addOutline: false,
- startAngle: -90,
- z: 2,
-
- isRing:false,
- center: {
- x:"20%",
- y:"-30%"
- },
- radius: '80%',
- dis: -50,
- labelLine: {
- show: true,
- length1: 20,
- length2: 10,
- },
- label: {
- show: false,
- fontSize: 16,
-
- position:'inside',
-
- allShow:false,
- unit:'{value}件'
- },
- centerLabel:{
- show: false,
- color:'#ffffff',
- fontSize: 18
- }
- },
- legend: {
- show: true,
-
- left: "80%",
- top: '5%',
- orient: 'vertical',
- itemAngelR:3,
- padding:1,
- itemWidth: 8,
- itemHeight: 8,
- borderRadius: 4,
- textStyle: {
- fontSize: 12,
- color: "#ffffff"
- }
- },
- shape: {
- faceColor:"#daf3fb",
- tool:{
- stokeColor:'#ffff00',
- topColor: '#ff0000',
- topFont: 36,
- }
- },
-
- color:['#0FDAFF', '#65AFFF', '#80D6FF', '#3EB3FF', '#076AFF', '#73a7cb', '#74e9f2', '#778CFF','#83b283', '#51C4E8','#A1BEFF'],
- grid:{
- left:"20%",
- right:"20%",
- top:"20%",
- bottom:"15%"
- },
- series: [
-
-
-
-
-
-
-
- {
- name: '类别1',
- value: 50
- },
- {
- name: "类别2",
- value: 50
- },
- {
- name: "类别3",
- value: 40
- }, {
- name: "类别4",
- value: 40
- }
- ,
- {
- name: "类别5",
- value: 40
- },
- {
- name: "类别6",
- value: 30
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ],
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- };
-
- setTimeout(()=>{
-
- },3000)
-
|