vue使用echarts制作圓環(huán)圖,代碼如下所示:
<div id="main"></div><script type="text/ecmascript-6"> export default { //從父組件中接收到的數(shù)據(jù) props:{ chartT:{ type:Object, required:true } }, data () { return { charts: '', totalIncome:'', opinionData: [ {value: Math.abs(this.chartT.imp_rate)},//取絕對(duì)值 {value: 100} ] } }, methods: { drawPie (id) { this.charts = this.$echarts.init(document.getElementById(id)); this.charts.setOption({ tooltip: { trigger: 'item', formatter: '{a}<br/>{b}:{c} (iwvjtn8m0%)' }, legend: { orient: 'vertical', x: 'left', data: this.opinion }, color:['#2872ef','#d6d6d6','#fc6e51'], series: [ { name: '訪問來(lái)源', type: 'pie', radius: ['90%', '65%'], avoidLabelOverlap: false, label: { normal: { show: false, position: 'center' }, emphasis: { show: true, testStyle: { fontSize: '30', fontWeight: 'bold' } } }, //根據(jù)數(shù)值判斷顏色// 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>總結(jié)
以上所述是小編給大家介紹的vue中使用echarts制作圓環(huán)圖的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持!
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注