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图片滚动图片的效果(另类实现)
Jun 02 Javascript
浅谈JavaScript字符集
May 22 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
Mar 28 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
解决Layui 表格自适应高度的问题
Nov 15 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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获取某个目录大小的代码
2008/09/10 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
微信支付扫码支付php版
2016/07/22 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
用显卡加速,轻松把笔记本打造成取暖器的办法!
2013/04/17 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
2016/03/11 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
微信小程序实现根据字母选择城市功能
2017/08/16 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
2018/07/19 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
python清理子进程机制剖析
2017/11/23 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
Python控制台实现交互式环境执行
2020/06/09 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
采购主管工作职责
2013/12/12 职场文书
员工晚婚的请假条
2014/02/08 职场文书
网站美工岗位职责
2014/04/02 职场文书
白岩松演讲
2014/05/21 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
导游词之任弼时故居
2020/01/07 职场文书
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS