怎么在vue中使用echarts制作一个圆环图-创新互联-绵竹浩晨建站

新闻中心

这里有您想知道的互联网营销解决方案

怎么在vue中使用echarts制作一个圆环图-创新互联

这篇文章给大家介绍怎么在vue中使用echarts制作一个圆环图，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

在做网站、成都网站建设中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手，突出企业的产品/服务/品牌，帮助企业锁定精准用户，提高在线咨询和转化，使成都网站营销成为有效果、有回报的无锡营销推广。创新互联专业成都网站建设十年了，客户满意度97.8%，欢迎成都创新互联客户联系。

代码如下所示：

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}
{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') }) }, }

父组件传值给子组件



 import axios from 'axios'
 import Tittle from './applicationDetail/appTittle'
 export default {
  data(){
   return{
    chart_tit:{}
   }
  }
}

关于怎么在vue中使用echarts制作一个圆环图就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

分享题目：怎么在vue中使用echarts制作一个圆环图-创新互联
链接URL：http://tyjierui.cn/article/djshgc.html

新闻中心

其他资讯