echarts饼图显示引导线，图例过多翻页

实现效果

父组件

  <echartsPieechartsNo="two":echartsPieData="echartsPieRecorder"/>

子组件

<template><div :id="'mainPie' + echartsNo" class="mainPie"></div>
</template><script>
import * as echarts from "echarts";export default {props: {echartsNo: {type: String,default: ""},echartsPieData: {type: Array,default: []}// echartsPieDoor: {//   type: Array,//   default: []// }},data() {return {};},mounted() {this.init();},watch: {echartsPieData() {this.init();}},methods: {init() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById("mainPie" + this.echartsNo));let colorTemp =this.echartsNo === "one"? ["#3bde77", "#0071fd", "#e0514d"]: this.echartsNo === "two"? ["#0071fd", "#fab358"]: ["#2B78A8", "#855EE9", "#35B023", "blueviolet"];let pieTitle =this.echartsNo === "one"? "出门物资申请": this.echartsNo === "two"? "执法记录仪": "车辆违章类型";// 绘制图表myChart.setOption({// title: {//   text: 'Nightingale Chart',//   subtext: 'Fake Data',//   left: 'center'// },tooltip: {show: true,trigger: "item",confine: true,backgroundColor: "rgba(0,0,0,0.5)",borderColor: "rgba(0,0,0,0.5)",borderWidth: 1,textStyle: {color: "#FFFFFF",fontSize: "14"},formatter: "{a} <br/>{b} : {c} ({d}%)"},color: colorTemp,legend: {// left: 'center',//竖直orient: "vertical",top: "bottom",z: 1,// right: "right",left: this.echartsNo === "three" ? "left" : "right",type: "scroll",//图例过多滚动翻formatter: function(params) {if (!params) {return "";}if (params.length > 7) {params = params.slice(0, 5) + "...";return params;} else {return params;}},tooltip: {show: true},pageIconColor: "#2C86FF", //翻页箭头颜色pageIconInactiveColor: "rgba(44,132,251,0.40)", //翻页（即翻页到头时箭头的颜色）pageIconSize: 10, //翻页按钮大小// itemWidth: 16, // 设置宽度// itemHeight: 16, // 设置高度pageTextStyle: {color: "#1471C8" //翻页数字颜色}, //翻页数字设置textStyle: {// fontSize: 18, //字体大小color: "#1471C8" //字体颜色}},// toolbox: {//   show: true,//   feature: {//     mark: { show: true },//     dataView: { show: true, readOnly: false },//     restore: { show: true },//     saveAsImage: { show: true }//   }// },series: [{name: pieTitle,type: "pie",// radius: [20, 140],radius: [10, 48],// center: ['25%', '50%'],roseType: "radius",avoidLabelOverlap: true, // 2、开启防重叠策略minAngle: 5,// minAngle: 15, //最小角度// startAngle: 270, //起始角度itemStyle: {borderRadius: 2// color: "#7E93B2",// emphasis: {//   shadowBlur: 10,//   shadowOffsetX: 0,//   shadowColor: "#0084ff"//   // shadowColor: "rgba(0, 0, 0, 0.5)"// }},legend: {z: 3},label: {z: 3,show: this.echartsPieData.length > 0 ? true : false,formatter: "{b} : ({c},{d}%)",color: "#fff"// position: "outer",// alignTo: "edge"// margin: 50},labelLine: {show: true},// label: {//   show: false// },// emphasis: {//   label: {//     show: true//   },//   shadowColor: "rgba(0, 0, 0, 0.5)"// },//  data: {value:100,itemStyle:{color:"#1471C8"}//这里设置了默认值data:this.echartsPieData.length > 0? this.echartsPieData: [{ value: 0, name: "无" }] //这里设置了默认值}]});}}
};
</script><style lang="scss" scoped>
.mainPie {width: 100%;height: 100%;// margin: 5%;// background: #000;
}
</style>

echarts饼图显示引导线，图例过多翻页相关推荐

Echarts 饼图视觉引导线隐藏和显示
由于饼图的数据过多,文字比较密集所以决定对数量超过10的数据隐藏其视觉引导线.直接上代码 var arr1=[{value: "10", name: "资金运用" ...
饼图加引导线_PPT里的饼图，如何显示引导线？
1.首先用电脑上的PPT 2007版软件打开目标文件,如图所示.2.然后用鼠标右击饼图,在菜单中点击选项"添加数据标签".3.然后数据就会出现在各自的饼形区域中,如图所示.4.然后 ...
echarts饼图选中时显示引导线
选中时显示引导线详细信息 ... tooltip: {trigger: 'item',// formatter: '{a} <br/>{b} : {c} ({d}%)'formatter ...
饼图加引导线_如何在饼形图中添加引导线（Excel）/
excel的饼图如何显示百分比的小数! 1.选中数据. 2.点击插入饼状图. 3.插入饼状图后中饼状图,点击右上角的加号. 4.勾据标签,数据就出来了. 5.选中数据,点击鼠标右键,选择设置数据标签格 ...
饼图加引导线_【如何在饼形图中添加引导线（Excel）】excle里面一条竖状线
EXCEL中如何插入图表,有两个竖轴,图内一个柱状,一个线状图, 在EXCEL中先做好表格(需要的数据),点击插入中的图表.选择自定义图标,其中有项柱状-线状格式.点击下一步后按步骤就可以完成了 Ex ...
解决echarts饼图显示百分比，和显示内容字体及大小,如何给eCharts饼图区域指定颜色
解决echarts饼图显示百分比,和显示内容字体及大小 // 基于准备好的dom,初始化echarts实例 var pieEchart = echarts.init(document. ...
饼图的引导线怎么加_4步学会EXCEL复合条饼图制作方法，让统计结果更直观！
饼图能够形象生动的展示各种类别数据的占比,在类别较多的情况下,单一饼图会显得很凌乱,降低了数据的对比效果,这个时候复合条饼图就可以让统计结果更直观,数据更清晰. 一.复合条饼图效果复合条饼图的特点: ...
d3为饼图增加引导线
当d3饼图数据过多或内部文字内容过长时,显示会变得不美观且不直观,常见的解决方式是添加引导线. 参考链接:链接 <body style=""><button cl ...
Echarts地图添加引导线效果(labelLine)
最近有粉丝问我能不能出个案例:地图上的地区文字,或其他标示类的图层,因为区块面积相对太小,想放在地图之外,通过labelLine连接到对应的区块上.今天就分享一个类似简单的案例,铺设散点形式铺设lab ...

echarts饼图显示引导线，图例过多翻页

echarts饼图显示引导线，图例过多翻页相关推荐

最新文章

热门文章