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 相关文章推荐
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
详解微信小程序之一键复制到剪切板
Apr 24 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
JavaScript实现拖拽效果
Mar 16 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
原生js实现下拉框选择组件
Jan 20 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获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
popdiv
2006/07/14 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
巧用局部变量提升javascript性能
2014/02/24 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
jquery实现动态画圆
2014/12/04 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
基于python实现名片管理系统
2018/11/30 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
python中reload重载实例用法
2020/12/15 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
电子商务应届生求职信
2013/11/16 职场文书
简历中自我评价范文
2015/03/11 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
MySQL 逻辑备份 into outfile
2022/05/15 MySQL