简单说下antv图表的使用

最新推荐文章于 2025-04-21 07:02:12 发布

骑士树

最新推荐文章于 2025-04-21 07:02:12 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： html java vue vue.js

本文链接：https://blog.youkuaiyun.com/lc7756/article/details/119778601

<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: