简单说下antv图表的使用

最新推荐文章于 2025-10-03 10:45:00 发布

原创

最新推荐文章于 2025-10-03 10:45:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #java #vue #vue.js

<template>
//定义一个容器
  <div id="containerPie" style="height: 100%;width: 100%"></div>
</template>

<script>

export default {
  name: "leftFirst",
  mounted() {
    this.initPie()
  },
  methods: {
    initPie() {
    //此处放复制的代码
    }  
  }
}
</script>

<style scoped>

</style>

举例：

<template>
  <div  style="width: 100%;height:100%">
    <div style="width: 100%;height:10%">
      <span class="text">数据占比</span>
    </div>
    <div id="containerPie" style="height: 90%;width: 100%;padding: 2% 8% 2% 5%"></div>
  </div>

</template>

<script>
import { Pie ,G2} from '@antv/g2plot';

export default {
  name: "leftFirst",
  mounted() {
    this.initPie()
  },
  methods: {
    initPie() {
      const { registerTheme } = G2;
      registerTheme('custom-theme', {  //设置饼图的颜色 从上往下挨个取
        colors10: