Echart通用模板

关注

原创最新推荐文章于 2026-04-06 09:11:13 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

Flutter插件Echart 两年之前公司做RN开发，写了RN-Echart的版本的插件供公司使用，在学习Flutter的过程中，顺手就把Flutter-Echart写了。但是因为期间个人原因，无瑕维护项目。两年时间收到了34个star和18个fork，非常感谢github上的各位。还发现有人专门为我的lib写了篇博客介绍，非常感谢那位作者。近日来有空，再加上年初将公司项目改造成Flutter版，故对Flutter有了更深一点的了解，现已将Echart插件的功能根据出现的issue进行了fix，并新增了刷新数据的功能。以阅读详情

Echarts中所有数据的通用模板
只需要将数据添加至

  myChart.setOption(
      //放入Echart数据对象
    )

<template>
  <div :id="id" class="chart" />
</template>

<script>
// 引入基本模板
const echarts = require('echarts')
// 必须要引入的词云包 如果使用词云则需要解开以下注解
// import 'echarts-wordcloud';
export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    id: {
      type: String,
      default: 'id'
    }
  },
  watch: {
    data: {
      deep: true, // 深度监听
      handler() {
        this.initData()
      }
    }
  },
  created() {
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 初始化数据
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(this.id))
      // 绘制图表
      myChart.setOption(
        // 放入Echart数据对象
        }
      )
    }
  }
}
</script>
<style scoped>
.chart {
  width: 100%;
  height: 400px;
}
</style>

收录于