echarts饼图左右两边的label溢出div怎么解决呢?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了echarts饼图左右两边的label溢出div怎么解决呢?相关的知识,希望对你有一定的参考价值。
把饼图半径调小一点,或者把label的两条指示线缩短一些,我记得也可以改一下文字的position,让问题在指示的线段上。 参考技术A 最好截图出来看下。可能1、labelLine: length: 20 中length长度的问题。
可能2、legend: left: 10中的left的问题
echarts饼图
参考技术A //基于准备好的dom,初始化echarts实例var myChart = echarts.init(this.$refs.main);
/* 深拷贝一下 生成两个不同的对象 */
this.lineList = JSON.parse(JSON.stringify(this.reportsList));
/* 展示标题 */
this.lineList.title =
text: "华东饼图数据",
;
/* 展示提示框组件 */
this.lineList.tooltip =
/* a表示系列名 <br/>表示换行 b表示数据名 c表示数据值 d表示所占的百分比 */
formatter: 'a <br> b <br> c <br> (d%)'
;
/* 把图例的位置调整一下 */
this.lineList.legend.top = '10%';
this.lineList.legend.left = '0';
/* 只显示华东的饼图数据 */
this.lineList.series.splice(1)
/* 先把图标的类型都改成饼图 */
this.lineList.series[0].type = 'pie';
/* 把图例中除了华东的图例都删掉 */
this.lineList.legend.data.splice(1);
/* 拿到时间集合用来展示饼图的name值 */
let nameList = this.lineList.xAxis[0].data;
/* 拿到数据用来展示饼图的value值 */
let valueList = this.lineList.series[0].data;
/* let data = [
name:"2017-12-27",
value:2999
] */
let newArr = [];
/* 下面的操作是为了把两个数组整合成上面的格式 */
nameList.forEach((r, i) =>
let obj =
name: r,
/* 因为两个数组的长度是一样的,
索引对应的值也是一样的,key和value的值是相对应,
所以直接使用如下方式取值 */
value: valueList[i]
/* 把组装好的对象塞到新数组中 */
newArr.push(obj)
)
/* 给华东的数据组转好格式后重新赋值,为了展示饼图线对应的名字 */
this.lineList.series[0].data = newArr;
/* 设置饼图的圆心的大小和圆的大小 */
this.lineList.series[0].radius = ['10%', '45%'];
/* 设置圆的上下左右的距离 */
this.lineList.series[0].center = ['58%', '60%'];
/* 把圆的形状设置成玫瑰形 */
this.lineList.series[0].roseType = 'area';
/* 给圆设置圆角 */
this.lineList.series[0].itemStyle =
borderRadius: 5
/* 把x轴隐藏 */
this.lineList.xAxis =
show: false
/* 把y轴隐藏 */
this.lineList.yAxis =
show: false
// 绘制图表
myChart.setOption(this.lineList);
window.PieChart = myChart;
,
以上是关于echarts饼图左右两边的label溢出div怎么解决呢?的主要内容,如果未能解决你的问题,请参考以下文章