vue中使用echarts制作圆环图

最新推荐文章于 2024-07-26 15:37:42 发布

Eternal-memory

最新推荐文章于 2024-07-26 15:37:42 发布

阅读量4.2k

点赞数

分类专栏： vue-js

本文链接：https://blog.csdn.net/liuxin_1991/article/details/81234636

版权

本文介绍如何在Vue项目中利用ECharts库来实现动态的圆环图展示。通过父组件传递数据给子组件，子组件接收到数据后配置ECharts实例，展示出丰富的圆环图表效果。

摘要由CSDN通过智能技术生成

<div id="main"></div>

<script type="text/ecmascript-6">
  export default {
    //从父组件中接收到的数据
    props:{
      chartT:{
        type:Object,
        required:true
      }
    },
    data () {
      return {
        charts: '',
        totalIncome:'',
        opinionData: [
          {value: Math.abs(this.chartT.imp_rate)},//取绝对值
          {value: 100}
        ]
      }
    },
    methods: {
      drawPie (id) {
        this.charts = this.$echarts.init(document.getElementById(id));
        this.charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: this.opinion
          },
          color:['#2872ef','#d6d6d6'