ECharts 饼图将标签设置在视觉引导线上方

1 使用详解

（1）series.labelLine.length

说明：视觉引导线第一段的长度。

（2）series.labelLine.length2

说明：视觉引导线第二段的长度。

（3）series.label.formatter

说明：标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。

（4）series.label.padding

说明：文字块的内边距。

2 原始效果图

3 实现代码

                formatter: '{a} <br/>{b} : {c} ({d}%)'},legend: {orient: 'vertical',left: 'left',data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']},series: [{name: '访问来源',type: 'pie',radius: '55%',labelLine:{length:20,length2:50},label:{formatter:"{b}\n\n",padding:[0,-55]},center: ['50%', '60%'],data: [{value: 335, name: '直接访问'},{value: 310, name: '邮件营销'},{value: 234, name: '联盟广告'},{value: 135, name: '视频广告'},{value: 1548, name: '搜索引擎'}],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};
// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>

4 最终效果图

ECharts 饼图将标签设置在视觉引导线上方相关推荐

Echarts 饼图视觉引导线隐藏和显示
由于饼图的数据过多,文字比较密集所以决定对数量超过10的数据隐藏其视觉引导线.直接上代码 var arr1=[{value: "10", name: "资金运用" ...
echarts饼状图设置label的交互效果，饼状图鼠标浮上图形才显示label和视觉引导线
echarts饼状图默认label和视觉引导线效果: 这个效果没有没有形成与用户的交互,此时添加如下设置: label: {show: false,position: 'outside'},empha ...
echarts设置视觉引导线穿过两行文字的效果
实现效果: 代码: label: {formatter: '数量\n350', // \n设置文字换行lineHeight: 24 // 设置一个合适的行高 },// 设置视觉引导线结束点的位置,让其 ...
Echarts显示自定义标注点/地图map引导线
Echarts显示自定义标注点/地图map引导线先贴效果.这里实现了 1.地图上县区名的显示,鼠标移入显示相应的项目数(如下图东源县) 2.地图上增加自定义地图(这里增加了没有的高新区&市辖 ...
Echarts饼状图视觉引导线设置
如何设置饼状图引导线位置我们在使用Echarts绘制饼状图时,经常需要确定引导线位置,官网给出的示例并未明确哪些属性决定了引导方式及位置,例如: 如下外部引导线方式: 有内部引导线方式如何设置这两 ...
word饼图如何画引导线_excle怎么画立体饼图/如何在饼形图中添加引导线（Excel）...
2016版的Excel 里的三维饼图怎么制作? 2016版的Excel 里的三维饼图的制作如下: 1.首先我们打我们的电脑后我们打开excel,之后我们在excel中输入数据:之后我们选中这些数据的单 ...
如何通过给echarts饼形图加标签引导线
在series下面的合适位置复制如下代码即可 label: { // 饼图图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等. ...
echarts中饼图引导线加圆点
推荐网址该网站里面有很多大佬贡献的图表,总能找到你想要的点击链接抵达 (1)我们需要完成的样子如下 (2)echarts主要部分配置 series: [ label: { //饼图图形上的文本标签 ...
a标签传参接收_[pyecharts1.8] 系列配置之标签设置
今日心情 :em....又是一堆蛋疼的事情堆积的一周...文章会迟到,但不会缺席,准备好脑子接收下 [pyecharts1.8] 系列配置之标签设置本文档(以及pyecharts使用手册中的其他文档 ...

ECharts 饼图将标签设置在视觉引导线上方

1 使用详解

2 原始效果图

3 实现代码

4 最终效果图

ECharts 饼图将标签设置在视觉引导线上方相关推荐

最新文章

热门文章