vue中使用echarts制作圆环图的实例代码

 更新时间:2018年07月27日 11:47:51   作者:Eternal-memory   我要评论
这篇文章主要介绍了vue中使用echarts制作圆环图的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

vue使用echarts制作圆环图,代码如下所示:

<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','#fc6e51'],
     series: [
      {
       name: '访问来源',
       type: 'pie',
       radius: ['90%', '65%'],
       avoidLabelOverlap: false,
       label: {
        normal: {
         show: false,
         position: 'center'
        },
        emphasis: {
         show: true,
         testStyle: {
          fontSize: '30',
          fontWeight: 'bold'
         }
        }
       },
       //根据数值判断颜色
//       itemStyle:{
//        normal:{
//         color:function(params){
//          console.log(params)
//          console.log(params.dataIndex)
//          console.log(params.data.value)
//          console.log(params.value)
//          if(params.value > 0){
//           return "#2872ef";
//          }else if(params.value[0] < 0 ){
//           return "#fc6e51";
//          }
//          return "#d6d6d6";
//         }
//        }
//       },
       labelLine: {
        normal: {
         show: false
        }
       },
       data: this.opinionData
      }
     ]
    })
   }
  },
  mounted () {
   this.$nextTick(function () {
    this.drawPie('main')
   })
  },
 }
</script>

父组件传值给子组件

<template>
  <div class="index-wrapper">
   <tittle :chartT="chart_tit"></tittle>
  </div>
</template>
<script type="text/ecmascript-6">
 import axios from 'axios'
 import Tittle from './applicationDetail/appTittle'
 export default {
  data(){
   return{
    chart_tit:{}
   }
  }
}
</script>

总结

以上所述是小编给大家介绍的vue中使用echarts制作圆环图的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对澳门金沙网上娱乐网站的支持!

相关文章

  • 详解Vue组件之间的数据通信实例

    详解Vue组件之间的数据通信实例

    本篇文章主要介绍了详解Vue组件之间的数据通信实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue使用代理解决请求跨域问题详解

    vue使用代理解决请求跨域问题详解

    这篇文章主要为大家详细介绍了vue使用代理解决请求跨域问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • Vue插件写、用详解(附demo)

    Vue插件写、用详解(附demo)

    本篇文章主要介绍了Vue插件写、用详解(附demo),插件就是指对Vue的功能的增强或补充。有兴趣的可以了解一下。
    2017-03-03
  • VUE axios上传图片到七牛的实例代码

    VUE axios上传图片到七牛的实例代码

    本篇文章主要介绍了VUE axios上传图片到七牛的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 详解打造 Vue.js 可复用组件

    详解打造 Vue.js 可复用组件

    Vue.js 是一套构建用户界面的渐进式框架。我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件。
    2017-03-03
  • vue的状态管理模式vuex

    vue的状态管理模式vuex

    本篇文章主要介绍了深入理解vue的状态管理模式vuex,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名

    这篇文章主要介绍了解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,需要的朋友可以参考下
    2019-10-10
  • Vue filters过滤器的使用方法

    Vue filters过滤器的使用方法

    这篇文章主要为大家详细介绍了Vue filters过滤器的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 详解Vue.js动态绑定class

    详解Vue.js动态绑定class

    Vue.js的核心是一个响应的数据绑定系统,它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步,每当数据有改动,相应的DOM视图也会更新。基于这种特性,通过vue.js动态绑定class就变得非常简单。一起来看下吧
    2016-12-12
  • VueJs 搭建Axios接口请求工具

    VueJs 搭建Axios接口请求工具

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。今天我们来介绍VueJs 搭建Axios接口请求工具,需要的朋友参考下本文吧
    2017-11-11

最新评论