echarts饼状图标签自定义不显示

Jazmine · 发表于 2021-6-22 11:42:35

【myApps/OBPM版本号】：v4.4- sp XX
【浏览器类型】：Chrome/其他
【联系方式-QQ】：请留下您的QQ号码1250496032
【联系电话】: 请留下您的联系电话，以便技术同事更好解决您的问题17865923357
【问题描述】：

您好，我在使用统计图制作饼状图时，需要自定义标签内容，但我设置好后，在我们的系统前端不显示，但是可以在echarts的官方平台测试通过。代码如下所示。

另外，我设置的是环形饼状图，就是嵌套的饼状图，每个环我都需要设置标签，那就需要标签线的长度不同，而且根据条件选择，环的个数还不固定，这个时候我需要怎么动态生成标签线？

1、问题描述最好图文并茂，如有视频/脚本可直接放出，这样技术同事在处理该问题时效率更加高效哦~
2、如果该问题已得到解决，请在该帖子下回复\"已解决可结帖\"

jerry · 发表于 2021-6-22 14:31:40

在前台不显示，前台有出现报错吗

Jazmine · 发表于 2021-6-22 14:37:38

jerry 发表于 2021-6-22 14:31
在前台不显示，前台有出现报错吗

没，没报错。贴的图片代码是我的正式项目代码。我还有一个test测试代码，只是数据源不一样，这个test数据源我是弄的死数，存在数组里。而我的正式项目代码是用sql获取的数据，也是存数组里。除此之外，其他代码完全一样，那我的这个test就能实现formatter的内容。而且我写的formatter内容在echarts官网示例里测试过，也能显示。不知道为啥在OA里就不能显示

白日蜜语 · 发表于 2021-6-23 23:43:32

Jazmine 发表于 2021-6-22 14:37
没，没报错。贴的图片代码是我的正式项目代码。我还有一个test测试代码，只是数据源不一样，这个test数据 ...

待我们验证一下回复您！

Jazmine · 发表于 2021-6-24 17:15:48

白日蜜语发表于 2021-6-23 23:43
待我们验证一下回复您！

大约什么时候验证完？我着急使用

白日蜜语 · 发表于 2021-6-24 19:25:29

你好源代码可以给一下吗这个echart的

白日蜜语 · 发表于 2021-6-24 19:39:26

你的图片代码不显示对吧，可能是你的图片位置存放错误了

Jazmine · 发表于 2021-6-24 21:34:27

白日蜜语发表于 2021-6-24 19:25
你好源代码可以给一下吗这个echart的

(function(){
var xDataArr = [];
var yDataArr1 = []; //总客户数
var yDataArr2 = []; //拜访人数
var country = getItemValueAsString("市");
var m = getItemValueAsString("月份");
var year = getYear(getToday());
var ym = year + "-" + m;
var countryDefault = "where k.item_行政县 IN ( '321302','321311','341323','321322','341324','341302') "; //一直是默认的县变量
if (country != "") {
countryDefault = ",(SELECT domainid, item_市, item_编码 from obpm_oa.tlk_市级) c " +
"WHERE " +
"c.`item_编码`='" + country + "' and c.item_编码 = x.item_上级 ";
}
var sql =
"SELECT x.`item_县`, (SELECT COUNT(item_客户姓名) from obpm_oa.tlk_客户 WHERE item_行政县=x.item_编码) as 总客户数, COUNT(DISTINCT v.`ITEM_客户姓名`) as 拜访数 " +
"from " +
"(SELECT domainid, item_县, item_编码, item_上级 from obpm_oa.tlk_县级) x, " +
"obpm_oa.tlk_客户 k," +
"(SELECT DOMAINID, `ITEM_客户姓名`, `ITEM_联系时间` from obpm_oa.tlk_拜访联系记录 WHERE `ITEM_拜访联系方式`='上门' AND `ITEM_客户姓名`!='' " +
"AND `ITEM_联系时间` BETWEEN '"+ym+"-1' and '"+ym+"-31 23:59:59') v " + countryDefault +
"and x.item_编码 = k.item_行政县 " +
"and k.`item_客户姓名` = v.`ITEM_客户姓名` " +
"GROUP BY x.`item_县`";
var query = queryByDSName("OA", sql);
if (query.size() > 0) {
for (var it = query.iterator(); it.hasNext();) {
var its = it.next();
var country = its.get("item_县");
var sumNum = its.get("总客户数");
var num = its.get("拜访数");
xDataArr.push(new String(country));
yDataArr1.push(new String(sumNum));
yDataArr2.push(new String(num));
}
}
var yDataArr3 = []; //未拜访数
for (var i = 0; i < yDataArr1.length; i++) {
yDataArr3[i] = yDataArr1[i] - yDataArr2[i];
}
var option = {
title: {
text: '市场客户拜访占有率',
right: 'center',
top: '5%',
textStyle: {
fontSize: 20
}
},
toolbox: {
feature: { //必有的
saveAsImage: {}, //导出图片
dataView: {}, //数据视图
restore: {}, //重置
dataZoom: {}, //区域缩放
magicType: { //动态功能切换
type: ['bar', 'line']
}
},
orient: 'vertical',
right: '15%',
top: '10%'
},
grid: {
left: '20%',
right: '30%',
bottom: '45%',
top: '15%',
width: '60%',
height: '50%'
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
legend: { //对系列进行筛选
data: ['未拜访', '拜访数'],
width: '30%',
right: 'center',
bottom: '25%'
},
series: [{
name: '拜访数',
type: 'bar',
stack: '客户情况',
data: yDataArr2,
z:10,
label: {
show: true,
position: 'top',
fontWeight: 'bold',
color:'white'
//formatter:'{a}{b}{c}'
},
barWidth: '30%',
itemStyle: {
// color: 'rgba(201, 108, 21,1)'
},
},
{
name: '未拜访',
type: 'bar',
stack: '客户情况',
z:9,
data: yDataArr3,
label: { //显示数据
show: 'true',
position: 'top', //数据显示位置，默认inside
color: 'rgba(126, 100, 52, 5)',
formatter:'未拜访：{c}',
//formatter: '总数:' + yDataArr1[0] + '\n拜访率：' + (yDataArr2[0] / yDataArr1[0] * 100).toFixed(2) +
// '%',
/* formatter: function(params) {
//console.log(params);
var sum = yDataArr1[params.dataIndex];
return params.seriesName + ' ' + sum + '\n' + params.name + ':' + params.value +
' (' + (params.value/sum*100).toFixed(2) + '%)';
},*/
lineHeight: 17
},
barWidth: '30%',
itemStyle: { //柱状条颜色
// color: 'rgba(61, 147, 37, 0.6)'
}
}
]
}
return option;
})()

复制代码

你好，这是我的源代码。

Jazmine · 发表于 2021-6-24 21:37:44

白日蜜语发表于 2021-6-24 19:39
你的图片代码不显示对吧，可能是你的图片位置存放错误了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../echarts_lib/echarts.min.js"></script>
</head>
<!--
1. 引入echarts.js文件
2. 准备一个呈现图表的盒子
3. 初始化echarts实例对象
4. 准备配置项
5. 将配置项设置给echarts实例对象
-->
<body>
<div style="width: 600px; height: 600px; position: center;"></div>
<script type="text/javascript">
//3. 初始化echarts实例对象
var mcharts = echarts.init(document.querySelector('div'))
//4. 准备配置项
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'];
var yDataArr1 = ['1', '1', '1', '1', '1', '1', '1', '1']; //总客户数
var yDataArr2 = ['0.12', '0.08', '0.37', '0.23', '0.06', '0.2', '0.28', '0.14']; //拜访数
var yDataArr3 = []; //未拜访数
for (var i = 0; i < yDataArr1.length; i++) {
yDataArr3[i] = yDataArr1[i] - yDataArr2[i];
}
var option = {
title: {
text: '市场客户拜访占有率',
right: 'center',
top: '5%',
textStyle: {
fontSize: 20
}
},
toolbox: {
feature: { //必有的
saveAsImage: {}, //导出图片
dataView: {}, //数据视图
restore: {}, //重置
dataZoom: {}, //区域缩放
magicType: { //动态功能切换
type: ['bar', 'line']
}
},
orient: 'vertical',
right: '15%',
top: '10%'
},
grid: {
left: '20%',
right: '30%',
bottom: '45%',
top: '15%',
width: '60%',
height: '50%'
},
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
legend: { //对系列进行筛选
data: ['未拜访', '拜访数'],
width: '30%',
right: 'center',
bottom: '25%'
},
series: [{
name: '拜访数',
type: 'bar',
stack: '客户情况',
data: yDataArr2,
z: 100,
label: {
show: true,
position: 'top',
fontWeight: 'bold',
color: 'black',
formatter:'{c}'
},
barWidth: '40%',
itemStyle: {
// color: 'rgba(201, 108, 21,1)'
},
},
{
name: '未拜访',
type: 'bar',
stack: '客户情况',
data: yDataArr2,
z: 90,
label: { //显示数据
show: 'true',
position: 'top', //数据显示位置，默认inside
color: 'rgba(126, 100, 52, 5)',
// formatter:'未拜访：{c}',
//formatter: '总数:' + yDataArr1[0] + '\n拜访率：' + (yDataArr2[0] / yDataArr1[0] * 100).toFixed(2) +
// '%',
formatter: function(params) {
//console.log(params);
var sum = yDataArr1[params.dataIndex];
return '客户总数 ' + sum + '\n' + params.name + ':' + params.value +
' (' + (params.value/sum*100).toFixed(2) + '%)';
},
lineHeight: 17
},
barWidth: '40%',
itemStyle: { //柱状条颜色
// color: 'rgba(61, 147, 37, 0.6)'
}
}
]
}
//5. 将配置项设置给echarts实例对象
mcharts.setOption(option)
</script>
</body>
</html>

复制代码

上一个代码是从sql中获取数，可能不方便您查看，这个是我写的死数，您可以直接运行，代码基本是一样的。

白日蜜语 · 发表于 2021-6-25 09:09:03

可能是您哪里代码写错了导致的，那个你用统计图不要全盘导入，就好比做好了一个Html，你直接输入option的内容就行，就类似直接输入data就好了

		自动登录	找回密码
密码			注册成为天翎用户

[已解决] echarts饼状图标签自定义不显示

本帖子中包含更多资源

本帖子中包含更多资源