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


Posted in Javascript onJuly 27, 2018

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制作圆环图的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS网络游戏-(模拟城市webgame)提供的一些例子下载
Oct 14 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
jquery删除数组中重复元素
Dec 05 Javascript
利用webstrom调试Vue.js单页面程序的方法教程
Jun 06 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 Javascript
使用jQuery实现购物车
Oct 29 jQuery
vue 录制视频并压缩视频文件的方法
Jul 27 #Javascript
JavaScript事件对象event用法分析
Jul 27 #Javascript
详解vue.js下引入百度地图jsApi的两种方法
Jul 27 #Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 #Javascript
浅谈Redux中间件的实践
Jul 27 #Javascript
JavaScript多态与封装实例分析
Jul 27 #Javascript
Vue配合iView实现省市二级联动的示例代码
Jul 27 #Javascript
You might like
php中autoload的用法总结
2013/11/08 PHP
PHP代码优化技巧小结
2015/09/29 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
微信小程序 animation API详解及实例代码
2016/10/08 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
2016/12/24 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
2020/02/13 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
python 上下文管理器使用方法小结
2017/10/10 Python
对python中大文件的导入与导出方法详解
2018/12/28 Python
Django实现学生管理系统
2019/02/26 Python
详解Python字典的操作
2019/03/04 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python数字类型math库原理解析
2020/03/02 Python
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
小学生学习感言
2014/03/10 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫