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 相关文章推荐
通过Unicode转义序列来加密,按你说的可以算是混淆吧
May 06 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
写给vue新手们的vue渲染页面教程
Sep 01 Javascript
解读vue生成的文件目录结构及说明
Nov 27 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
搭建vue开发环境
Jul 19 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
二招解决php乱码问题
2012/03/25 PHP
php按单词截取字符串的方法
2015/04/07 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
js图片处理示例代码
2014/05/12 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
python进阶教程之文本文件的读取和写入
2014/08/29 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
CentOS6.5设置Django开发环境
2016/10/13 Python
Python 装饰器深入理解
2017/03/16 Python
浅析使用Python操作文件
2017/07/31 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
给排水专业应届生求职信
2013/10/12 职场文书
公务员的自我鉴定
2013/10/26 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
土木工程专业推荐信
2014/02/19 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
导游词之镜泊湖
2019/12/09 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
Redis 哨兵集群的实现
2021/06/18 Redis
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers