echart生成饼状图

女爷i 2021-09-29 09:08 431阅读 0赞

//绘制图表.  
echarts.init(document.getElementById('main')).setOption(\{  
tooltip : \{  
trigger: 'item', //触发类型，默认数据触发 (可选为：'item' | 'axis')  
formatter: "\{a\} \{b\} : \{c\} (\{d\}%)", //这里可以使用默认；  
axisPointer: \{  
type: 'cross'  
\},  
backgroundColor: 'rgba(107, 107, 107, 0.5)',  
borderWidth: 1,  
borderColor: '\#ccc',  
padding: 8,  
textStyle: \{  
color: 'white'  
\},  
position: function (pos, params, el, elRect, size) \{  
var obj = \{top: 10\};  
obj\[\['left', 'right'\]\[+(pos\[0\] < size.viewSize\[0\] / 2)\]\] = 30;  
return obj;  
\},  
extraCssText: 'width: 300px'  
\},  
legend: \{  
orient: 'vertical',  
left: 'left',  
data: desc\_percent\_arr,  
formatter: function(name) \{  
if(name === '相似度70%以上') \{  
return name + "："+max\_percent;  
\}else if(name === '相似度40%-70%')\{  
return name + "："+min\_percent;  
\}else\{  
return name + "："+normal\_percent;  
\}  
\},  
tooltip:\{  
show:true,  
\},  
\},  
series : \[  
\{  
name: '访问来源',  
type: 'pie',  
radius: '50%',  
data: echatrs\_data  
\}  
\]  
\});

转载于:https://www.cnblogs.com/jasonxiaoqinde/p/8276463.html

发表评论取消回复

表情：

评论列表（有 0 条评论，431人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts的饼状图变成环形图

首先实现一个饼状图 <!DOCTYPE html> <html> <head> <met

末蓝、/ 2022年12月23日 00:49/ 0 赞/ 190 阅读

相关修改echarts饼状图位置

目录一：修改方法二：效果三：参考一：修改方法 1. `属性` series-pie.center 2. 官方文档

Dear 丶/ 2022年12月19日 11:38/ 0 赞/ 392 阅读

相关 echarts饼状图实战实例

基于echarts的饼状图 echarts本人也是用的很少的了，有缘碰到公司在用，于是便熟悉熟悉。这里就指出一些日常简单参数和图形做参考。来看看效果图吧！ !

谁借莪１个温暖的怀抱￠/ 2022年11月18日 13:47/ 0 赞/ 216 阅读

相关 echarts饼状图指定颜色

为每个饼图的扇面指定不同的颜色指定PIE饼图扇形每个扇面的颜指定PIE饼图扇形每个扇面的颜 > 指定PIE饼图扇形每个扇面的颜色，修改每个data

- 日理万妓/ 2022年11月07日 05:47/ 0 赞/ 251 阅读

相关 vue echarts饼状图百分比展示

设置label的formatter。 label: { show: true, formatter: '{b} : {d}%' }, 已

谁践踏了优雅/ 2022年10月13日 05:24/ 0 赞/ 511 阅读

相关 ECharts图表------饼状图

效果图: ![SouthEast][] <!DOCTYPE html> <html> <head> <meta charset=

谁借莪１个温暖的怀抱￠/ 2022年06月01日 01:14/ 0 赞/ 296 阅读

相关 echarts饼状图

使用echarts实现个人月消费统计，下面是我写的一个案例：效果图： ![70][] html代码： <html> <head> <me

川长思鸟来/ 2022年05月14日 01:41/ 0 赞/ 326 阅读

相关 Echarts使用笔记--饼图，柱状图

开始做前端了，感觉自己是要变成全栈工程师了。。。今天使用了echart，用之前觉得好高大上好厉害，肯定很复杂。用了以后才发现，使用起来超简单，当然，精通很难，里面的各种配

痛定思痛。/ 2022年01月26日 09:35/ 0 赞/ 341 阅读

相关 ECharts之饼状图

效果图 ![在这里插入图片描述][20190725130341211.gif] 背景图片 ![20190725170845879.png][] 下载EChar

╰+哭是因爲堅強的太久メ/ 2021年09月30日 05:32/ 0 赞/ 906 阅读

相关 echart生成饼状图

//绘制图表. echarts.init(document.getElementById('main')).setOption(\{ tooltip : \{ tr

女爷i/ 2021年09月29日 09:08/ 0 赞/ 432 阅读