vue中使用echarts制作圆环图的实例代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了vue中使用echarts制作圆环图的实例代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1803字,纯文字阅读大概需要3分钟。
内容图文
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中使用echarts制作圆环图的实例代码全部内容,希望文章能够帮你解决vue中使用echarts制作圆环图的实例代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。