介绍 & lt; div id=癿ain"祝辞& lt;/div>
& lt; script 类型=拔谋?ecmascript-6"比;
,export default {//从才能父组件中接收到的数据
道具:{才能
,,chartT: {
,,,类型:对象,
,,,要求:真的
,,}
,,},
data 才能;(),{
,,return {
,,,图表:,& # 39;& # 39;
,,,totalIncome: & # 39; & # 39;
,,,opinionData:,
,,,,{值:,Math.abs (this.chartT.imp_rate)},//取绝对值
,,,,{值:100}
,,,)
,,}
,,},
方法:才能,{
,,drawPie (id), {
,,,this.charts =, echarts.init美元。(. getelementbyid (id));
,,,this.charts.setOption ({
,,,,提示:,{
,,,,,触发:,& # 39;项目# 39;
,,,,,格式化程序:,& # 39;{一}& lt; br/祝辞{b}: {c}, ({d} %) & # 39;
,,,,},
,,,,传说:,{
,,,,,东方:,& # 39;垂直# 39;
,,,,,x:, & # 39;左# 39;
,,,,,数据:this.opinion
,,,,},
,,,,颜色:[& # 39;# 2872 ef # 39;, & # 39; # d6d6d6& # 39;, & # 39; # fc6e51& # 39;],
,,,,系列:,(
,,,,,{
,,,,,,名字:,& # 39;访问来源& # 39;,
,,,,,,类型:,& # 39;派# 39;
,,,,,,半径:,(& # 39;90% & # 39;,& # 39;& # 39;65%),
,,,,,,avoidLabelOverlap:,假的,
,,,,,,标签:,{
,,,,,,,正常:,{
,,,,,,,,显示:,假的,
,,,,,,,,位置:,& # 39;中心# 39;
,,,,,,,},
,,,,,,,重点:,{
,,,,,,,,显示:,真的,
,,,,,,,,testStyle:, {
,,,,,,,,,字形大小:,& # 39;30 & # 39;
,,,,,,,,,fontWeight:, & # 39;大胆# 39;
,,,,,,,,}
,,,,,,,}
,,,,,,},
,,,,,,//根据数值判断颜色//,,,,,,,itemStyle: {//,,,,,,,,正常:{//,,,,,,,,,颜色:函数(params) {//,,,,,,,,,,console.log (params)//,,,,,,,,,,console.log (params.dataIndex)//,,,,,,,,,,console.log (params.data.value)//,,,,,,,,,,console.log (params.value)//,,,,,,,,,,如果(params.value 祝辞,0){//,,,,,,,,,,,return “# 2872 ef";//,,,,,,,,,,}else 如果(params.value [0], & lt;, 0,) {//,,,,,,,,,,,return “# fc6e51";//,,,,,,,,,,}//,,,,,,,,,,return “# d6d6d6";//,,,,,,,,,}//,,,,,,,,}//,,,,,,,},
,,,,,,labelLine:, {
,,,,,,,正常:,{
,,,,,,,,表明:假
,,,,,,,}
,,,,,,},
,,,,,,数据:this.opinionData
,,,,,}
,,,,)
,,,})
,,}
,,},
mounted 才能;(),{
这。才能nextTick美元(function (), {
,,,this.drawPie(& # 39;主要# 39;)
,,})
,,},
,}
& lt;/script> & lt; template>
& lt;才能div 类=癷ndex-wrapper"比;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家介绍怎么在vue中使用echarts制作一个圆环图,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
代码如下所示:
父组件传值给子组件
