Comments (7)
相关代码 都是依照api 来的
from g2.
export default defineComponent({
name: "PieChartBasicInfo",
props: {
id: {
type: String,
default: "",
},
pieChartData: {
type: Array,
default: () => [],
},
langValue: {
type: String,
default: "cn",
},
},
setup(props, ctx) {
/**
* state区域
*/
const { proxy } = getCurrentInstance();
let chartMap = ref("");
/**
* 数据更新图表
*/
const setIntervalFn = () => {
chartMap.value.changeData(props.pieChartData);
chartMap.value.legend("device", {
position: "right", // 配置图例显示位置
offsetX: -40,
custom: true, // 关键字段,告诉 G2,要使用自定义的图例
items: props.pieChartData.map((obj, index) => {
return {
name: obj.device, // 对应 itemName
value: `${(obj.deviceRate * 100).toFixed(2)}%`, // 对应 itemValue
marker: {
symbol: "square", // marker 的形状
spacing: 5,
style: {
fill: chartMap.value.getTheme().colors10[index], // marker 颜色,使用默认颜色,同图形对应
},
}, // marker 配置
};
}),
itemWidth: 110,
itemValue: {
alignRight: true,
fill: "#393A44",
}, // 配置 itemValue 样式
});
chartMap.value.render();
};
/**
* 初始化图表
*/
const initData = () => {
const chart = new Chart({
container: props.id,
autoFit: true,
height: 150,
padding: [0, 110, 0, 0],
});
const e = document.createEvent("Event");
chartMap.value = chart;
chart.theme({
styleSheet: {
brandColor: "#FF4500",
paletteQualitative10: [
"#FF4500",
"#1AAF8B",
"#406C85",
"#F6BD16",
"#2FB8FC",
"#B40F0F",
"#4435FF",
"#FF5CA2",
"#BBE800",
"#FE8A26",
],
paletteQualitative20: [
"#FF4500",
"#1AAF8B",
"#406C85",
"#F6BD16",
"#2FB8FC",
"#B40F0F",
"#4435FF",
"#FF5CA2",
"#BBE800",
"#FE8A26",
"#946DFF",
"#6C3E00",
"#6193FF",
"#FF988E",
"#36BCCB",
"#004988",
"#FFCF9D",
"#CCDC8A",
"#8D00A1",
"#1CC25E",
],
},
});
// tooltip的自定义内容
chart.scale("deviceRate", {
formatter: (val) => {
val = val * 100 + "%";
return val;
},
});
chart.coordinate("theta", {
radius: 0.75,
innerRadius: 0.6,
});
// let betAmountlang = proxy.$t('betAmount')
// // 辅助文本
// chart.annotation().text({
// position: ['50%', '50%'],
// content: betAmountlang,
// style: {
// fontSize: 12,
// fill: '#393A44',
// textAlign: 'center',
// },
// })
chart.interval().adjust("stack").position("deviceRate").color("device");
// chart.clear()
chart.render();
};
/**
* 监听 图表数据
*/
watch(
() => props.pieChartData,
() => setIntervalFn()
);
/**
* 监听 多语言
*/
watch(
() => props.langValue,
() => setIntervalFn()
);
/**
* 挂载 初始化图表
*/
onMounted(() => nextTick(() => initData()));
return {
chartMap,
id: props.id,
};
},
});
</script>
from g2.
甚至用官方demo 也是这样。用的是 vue3.x 的版本
from g2.
@pearmini help
from g2.
我也出现了,我是条形图,我版本是"@antv/g2": "^5.1.20", vue3
`
import { Chart } from '@antv/g2'
const data = ref([
{ group: '事业部1', value: 1 },
{ group: '销售小组2', value: 100 },
{ group: '销售小组3', value: 0 }
])
const _chart = new Chart({
container: 'container',
autoFit: true,
marginRight: 60,
marginTop: 60
})
_chart
.interval()
.coordinate({ transform: [{ type: 'transpose' }] })
.data(data.value)
.encode('x', 'group')
.encode('y', 'value')
.encode('size', 20)
.axis(false)
.label({
text: 'group',
textAlign: 'left',
position: 'left',
fill: '#99a9b4',
fontSize: 12,
dy: -20
})
.label({
text: 'value',
fontSize: 12,
textAlign: 'outside',
fill: '#fff',
dx: 10
})
_chart.render()
}
`
from g2.
@lessin123 可以看看 5.x 是否有这个问题。
from g2.
@zzj9468 我看你给的例子是没有问题呢?只不过 tooltip 移开的时候有一个延迟,这是因为动画的原因,可以把 visibility 动画关闭试试,修改代码如下:
.interaction('tooltip', {
css: {
'.g2-tooltip': {
transition:
'left 0.4s cubic-bezier(0.23, 1, 0.32, 1), ' +
'top 0.4s cubic-bezier(0.23, 1, 0.32, 1)',
},
},
});
from g2.
Related Issues (20)
- label偶尔显示不全 HOT 2
- 直角坐标系坐标轴数据都是0的情况下,如何设置轴线在最底部? HOT 1
- 折线图悬停提示不正确 HOT 3
- 堆叠图缺失数据,切换图例,导致柱状图显示错误 HOT 1
- 官方示例中toolTip为false为什么还会有悬浮框显示 HOT 1
- 多个漏斗图同时渲染时,其中1个或者两个都会,渲染之后又消失掉 HOT 2
- 折线图设置滚动条后,为0值的point样式在滚动之后,会被坐标轴的线给挡住 HOT 1
- 柱折组合图。.scale('series', { independent: true })表示含义是什么
- 【G2 多轴图】多数据的柱形折线混合图,拖动滚动条,tooltip框内容显示错误 (BUG情况与6335相同,但是还有两个小BUG一并列出)
- 雷达图,维度和颜色 拖入同一个字段,tooltip 内展示的颜色不正确
- 饼图怎么支持排序 HOT 1
- 如何能调节shape的层级 使其不遮挡pieLabel
- 图形宽度设置百分比 HOT 1
- 散点图label 设置 position:inside 后 ,如何实现 内容 超出省略的功能
- 分组条形图提示错误 HOT 1
- chrome 85版本 配置了polyfill之后饼图的tooltip依旧报错 HOT 19
- 【g2】 【v5.2.1】报错,图表无法显示;报错内容:ReferenceError: group is not defined HOT 4
- 【V5】legend itemMarker 的内置类型是否可以扩展? HOT 3
- 柱线混合图,坐标轴刻度不对齐,有什么方法可以对齐 HOT 5
- 新版本g2 5.2.1 没有保存图片的方法了, chart.downloadImage()不能使用显示不存在这个方法 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from g2.