import { Rose } from '@antv/g2plot';

const data = [
  {
    type: '分类一',
    value: 27,
  },
  {
    type: '分类二',
    value: 25,
  },
  {
    type: '分类三',
    value: 18,
  },
  {
    type: '分类四',
    value: 15,
  },
  {
    type: '分类五',
    value: 10,
  },
  {
    type: '其它',
    value: 5,
  },
];

const rosePlot = new Rose(document.getElementById('container'), {
  data,
  radiusField: 'value',
  categoryField: 'type',
  colorField: 'type',
  label: {
    visible: true,
    type: 'outer',
    formatter: (text) => text,
  },
});

rosePlot.render();

const data = [
  { country: 'Asia', year: '1750', value: 502,},
  { country: 'Asia', year: '1800', value: 635,},
  { country: 'Europe', year: '1750', value: 163,},
  { country: 'Europe', year: '1800', value: 203,},
];

const areaPlot = new PercentageStackArea(document.getElementById('container'), {
  title: {
    visible: true,
    text: '百分比堆叠面积图',
  },
  data,
  meta: {    year: {      alias:'年份'      range: [0, 1],    },    value: {      alias: '数量',      formatter:(v)=>{return `${v}个`}    }  },  xField: 'year',
  yField: 'value',
  stackField: 'country',
});
areaPlot.render();

// 配合颜色映射，指定多值
colorField:'type',
color:['blue','yellow','green']
//配合颜色映射，使用回调函数指定色值
colorField:'type',
color:(d)=>{
    if(d==='a') return 'red';
    return 'blue';
}

visible: false,
alignTo: 'left',
text:'',
style:{
    fontSize: 18,
    fill: 'black',
}

visible: false,
alignTo: 'left',
text:'',
style:{
    fontSize: 12,
    fill: 'grey',
}

visible: true,
position: 'right',
flipPage: true

visible: true,
offset: 20,

visible: false
type:'inner'
autoRotate: true

plot.updateConfig({
  width: 500,
  height: 600,
  legend: {
    visible: false,
  },
});

plot.render();

plot.changeData(newData);