关于antv g2 图例 这个使用图例跟环形 结合 但是图例的宽度无法设置 只能设置 整体的Chart的宽度 加padding的话只能控制 环图的大小 使用偏移量 也不行 也只是改变位置 图例的宽度设置不了
<script>
import { Chart, registerShape } from '@antv/g2'
export default {
// 宽 高 图例显示 标题 标题数字 单位
props: ['width', 'height', 'legendShow', 'title', 'titleNum', 'titleCompany'],
data () {
return {}
},
mounted () {
console.log('---------------yuan ayuna ')
this.init()
},
methods: {
init () {
const data = [
{ type: '具有控制力的', value: 501.9 },
{ type: 'Czech Republic', value: 301.9 },
{ type: 'Ireland', value: 201.1 },
{ type: 'Germany', value: 165.8 },
{ type: 'Australia', value: 139.9 },
{ type: '具有控制力33.33%~50%', value: 128.3 },
{ type: 'UK', value: 99 },
{ type: 'Belgium', value: 60 },
{ type: 'The Netherlands', value: 50 }
]
// 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
const sliceNumber = 0.003
// 自定义 other 的图形，增加两条线
registerShape('interval', 'slice-shape', {
draw (cfg, container) {
const points = cfg.points
let path = []
path.push(['M', points[0].x, points[0].y])
path.push(['L', points[1].x, points[1].y - sliceNumber])
path.push(['L', points[2].x, points[2].y - sliceNumber])
path.push(['L', points[3].x, points[3].y])
path.push('Z')
path = this.parsePath(path)
return container.addShape('path', {
attrs: {
fill: cfg.color,
path
}
})
}
})
const chart = new Chart({
container: 'container',
// autoFit: true,
height: this.height,
width: this.width,
padding: [20,20,20,-200],
})
// chart.forceFit()
chart.data(data)
chart.coordinate('theta', {
radius: 1,
innerRadius: 0.8
})
chart.tooltip({
showTitle: false,
showMarkers: false
})
// 辅助文本
const html = `<div style="color:#a3a3a3;font-size: 14px;text-align: center;width: 10em;">${this.title}<br><span style="color:#2b2a29;font-size:20px">${this.titleNum}</span><span style="color:#2b2a29;">${this.titleCompany}</span></div>`
const titleHtml = `<div style="color:#333333;font-size: 20px;text-align: center;width: 10em;">${this.titleNum}<span style="font-size:14px;color:#2b2a29;">${this.titleCompany}</span></div>`
chart.annotation().html({
position: ['50%', '50%'],
html: this.title ? html : titleHtml,
alignX: 'middle',
alignY: 'middle'
})
chart.legend({
position: 'right',
offsetX: -100,
offsetY: 0,
// itemHeight:10,
// itemWidth:200,
itemName: {
formatter (text, item, index) {
// console.log('item',item);
const val = (data[index].value / 100).toFixed(1)+'%'
return `${text} | ${val}`
},
style: {
// fill: 'red',
}
}
})
chart.interval().adjust('stack').position('value').color('type').shape('slice-shape')
chart.theme({
styleSheet: {
brandColor: '#F87B7B',
paletteQualitative10: ['#F87B7B', '#FFA573', '#FFD069', '#C8E081', '#8DE0F3', '#9AC3FF', '#CFB1FE']
}
})
chart.render()
}
}
}
</script>
<style lang="less" scoped>
</style>
