<!--引入echarts -->
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
<div class="v-panel-module" draggable="false" style="">
<div class="v-panel-module-content">
<!--观众满意度-->
<div id="registerSatisfaction" style="width: 100%; height: 400px;"></div>
<!--观众所属企业类型-->
<div id="registerEnterpriseType" style="width: 100%; height: 400px;"></div>
<!--观众参观目的-->
<div id="registerPurpose" style="width: 100%; height: 400px;"></div>
<!--观众感兴趣的产品-->
<div id="registerProduct" style="width: 100%; height: 400px;"></div>
<!--展商满意度-->
<div id="exhibitorSatisfaction" style="width: 100%; height: 400px;"></div>
<!--展商职务-->
<div id="exhibitorPosition" style="width: 100%; height: 400px;"></div>
<!--展商类型-->
<div id="exhibitorType" style="width: 100%; height: 400px;"></div>
<!--展商参展主要目的-->
<div id="exhibitorPurpose" style="width: 100%; height: 400px;"></div>
<script>
// 获取图像
function getChart(elem) {
return echarts.init(document.getElementById(elem), {
noDataLoadingOption: {
text: "点击“查看统计”按钮查看数据",
effect: 'whirling',
effectOption: {
backgroundColor: "#f9f9f9"
},
textStyle: {
fontSize: 20
}
}
});
}
//填充统计数据
function pushData(legendData,seriesData,data){
for (var i = 0; i < legendData.length; i++) {
seriesData.push({
name: legendData[i],
value: data['q'+(i+1)]
});
}
}
//观众满意度
function initRegisterSatisfaction() {
//q1 对大会整体感到满意
//q2 表示继续参加下届药交会
//q3 愿意把展会推荐给同事及同行
var registerSatisfactionChart = getChart('registerSatisfaction');
$.ajax({
type: "post",
url: "/exhibitionReview/registerSatisfaction/info",
dataType: "json",
success: function (data) {
var legendData = ['对大会整体感到满意', '表示继续参加下届药交会', '愿意把展会推荐给同事及同行'];
var seriesData = [];
pushData(legendData,seriesData,data);
var option = {
title: {
text: '观众满意度'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: legendData
},
grid: {
left: 200
},
xAxis: {
type: 'value',
name: '',
axisLabel: {
formatter: '{value}'
}
},
yAxis: {
type: 'category',
data:legendData
},
series: [
{
type: 'bar',
barWidth: '40%',
data:seriesData
}
]
};
registerSatisfactionChart.clear();
registerSatisfactionChart.setOption(option);
},
error: function () {
console.log('加载失败')
},
complete: function () {
console.log('加载完成')
}
});
}
//观众所属企业类型
function initRegisterEnterpriseType() {
//q1 代理商
//q2 经销商/分销商/物流
//q3 连锁药店单体药店
//q4 药物制剂生产
//q5 医疗器械生产
//q6 保健食品/食品/营养品生产
//q7 医疗器械设计、研发企业
//q8 商超/零售店
//q9 化妆品/母婴产品/成人用品生产
var registerEnterpriseTypeChart = getChart('registerEnterpriseType');
$.ajax({
type: "post",
url: "/exhibitionReview/registerEnterpriseType/info",
dataType: "json",
success: function (data) {
var legendData = ['代理商', '经销商/分销商/物流', '连锁药店单体药店', '药物制剂生产', '医疗器械生产', '保健食品/食品/营养品生产', '医疗器械设计、研发企业', '商超/零售店', '化妆品/母婴产品/成人用品生产'];
var seriesData = [];
pushData(legendData,seriesData,data);
var option = {
title: {
text: '观众所属企业类型',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: legendData
},
series: [
{
name: '观众所属企业类型',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data:seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
registerEnterpriseTypeChart.clear();
registerEnterpriseTypeChart.setOption(option);
},
error: function () {
console.log('加载失败')
},
complete: function () {
console.log('加载完成')
}
});
}
//观众参会目的
function initRegisterPurpose() {
//q1 获知行业最新趋势，产品和技术
//q2 尽可能多地寻找新的产品或服务提供商
//q3 寻找合适的供应商并确定采购计划
//q4 寻找潜在代理商或生意合作伙伴
//q5 与现有供应商会面
//q6 参加会议或研讨会
//q7 与业界同行建立关系网
//q8 评估展会，为将来是否参加做参考
var registerPurposeChart = getChart('registerPurpose');
$.ajax({
type: "post",
url: "/exhibitionReview/registerPurpose/info",
dataType: "json",
success: function (data) {
var legendData = ['获知行业最新趋势，产品和技术', '尽可能多地寻找新的产品或服务提供商', '寻找合适的供应商并确定采购计划', '寻找潜在代理商或生意合作伙伴'
, '与现有供应商会面', '参加会议或研讨会', '与业界同行建立关系网', '评估展会，为将来是否参加做参考'];
var seriesData = [];
pushData(legendData,seriesData,data);
var option = {
title: {
text: '观众参会目的',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: legendData
},
series: [
{
name: '观众参会目的',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data:seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
registerPurposeChart.clear();
registerPurposeChart.setOption(option);
},
error: function () {
console.log('加载失败')
},
complete: function () {
console.log('加载完成')
}
});
}
//观众感兴趣的产品
function initRegisterProduct() {
//q1 化学药
//q2 OTC
//q3 中成药/民族药
//q4 保健食品（蓝帽子）
//q5 中药材/中药饮片/中药配方颗粒
//q6 互联网+医药
//q7 生物技术与创新（ 基因检测、 诊断试剂、 医药研发、 合同定制、生物制药、生物技术、生物制品）
//q8 家用医疗器械
//q9 医用耗材
//q10 其他
var registerProductChart = getChart('registerProduct');
$.ajax({
type: "post",
url: "/exhibitionReview/registerProduct/info",
dataType: "json",
success: function (data) {
var legendData = ['化学药',
'OTC',
'中成药/民族药',
'保健食品（蓝帽子）',
'中药材/中药饮片/中药配方颗粒',
'互联网+医药',
'生物技术与创新（ 基因检测、 诊断试剂、 医药研发、 合同定制、生物制药、生物技术、生物制品）',
'家用医疗器械',
'医用耗材',
'其他'];
var seriesData = [];
pushData(legendData,seriesData,data);
var option = {
title: {
text: '观众感兴趣的产品'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: legendData
},
xAxis: {
type: 'category',
data: legendData
},
yAxis: {
type: 'value'
},
grid: {
left: 200
},
series: [
{
type: 'bar',
barWidth: '40%',
data: seriesData
}
]
};
registerProductChart.clear();
registerProductChart.setOption(option);
},
error: function () {
console.log('加载失败')
},
complete: function () {
console.log('加载完成')
}
});
}
//展商满意度
function initExhibitorSatisfaction() {
// q1 对参展效果感到满意
// q2 将继续参加下次展会
// q3 愿意给同行推荐
var exhibitorSatisfactionChart = getChart('exhibitorSatisfaction');
$.ajax({
type: "post",
url: "/exhibitionReview/exhibitorSatisfaction/info",
dataType: "json",
success: function (data) {
var legendData = ['对参展效果感到满意',
'将继续参加下次展会',
'愿意给同行推荐'];
var seriesData = [];
pushData(legendData,seriesData,data);
var option = {
title: {
text: '展商满意度'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data:legendData
},
grid: {
left: 200
},
xAxis: {
type: 'value',
name: '',
axisLabel: {
formatter: '{value}'
}
},
yAxis: {
type: 'category',
data:legendData
},
series: [
{
type: 'bar',
barWidth: '40%',
data: seriesData
}
]
};
exhibitorSatisfactionChart.clear();
exhibitorSatisfactionChart.setOption(option);
},
error: function () {
console.log('加载失败')
},
complete: function () {
console.log('加载完成')
}
});
}
//展商职务
function initExhibitorPosition() {
// q1 总经理/董事长
// q2 副总经理
// q3 总监
// q4 部门经理/项目经理
// q5 职员
var rexhibitorPositionChart = getChart('exhibitorPosition');
$.ajax({
type: "post",
url: "/exhibitionReview/exhibitorPosition/info",
dataType: "json",
success: function (data) {
var legendData = ['总经理/董事长', '副总经理', '总监', '部门经理/项目经理', '职员'];
var seriesData = [];
pushData(legendData,seriesData,data);
var option = {
title: {
text: '展商职务',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: legendData
},
series: [
{
name: '展商职务',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data:seriesData.sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
rexhibitorPositionChart.clear();
rexhibitorPositionChart.setOption(option);
},
error: function () {
console.log('加载失败')
},
complete: function () {
console.log('加载完成')
}
});
}
//展商类型
function initExhibitorType() {
// q1 中成药
// q2 OTC
// q3 化学药
// q4 保健品/保健食品
// q5 医疗器械
// q6 中药材/中饮片
// q7 生物制药
// q8 民族药
// q9 医疗耗材/诊断试剂
// q10 药妆及日化用品
// q11 医药技术及服务
// q12 健康茶
// q13 生殖健康用品
// q14 母婴用品（含婴幼儿奶粉）
var exhibitorTypeChart = getChart('exhibitorType');
$.ajax({
type: "post",
url: "/exhibitionReview/exhibitorType/info",
dataType: "json",
success: function (data) {
var legendData = ['中成药',
'OTC',
'化学药',
'保健品/保健食品',
'医疗器械',
'中药材/中饮片',
'生物制药',
'民族药',
'医疗耗材/诊断试剂',
'药妆及日化用品',
'医药技术及服务',
'健康茶',
'生殖健康用品',
'母婴用品（含婴幼儿奶粉）'];
var seriesData = [];
pushData(legendData,seriesData,data);
var option = {
title: {
text: '展商类型'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: legendData
},
toolbox: {
show: true,
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: {
type: 'category',
data: legendData
},
yAxis: [{
type: 'value'
}],
grid: {
left: 200
},
series: [
{
type: 'bar',
barWidth: '40%',
data: seriesData,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
exhibitorTypeChart.clear();
exhibitorTypeChart.setOption(option);
},
error: function () {
console.log('加载失败')
},
complete: function () {
console.log('加载完成')
}
});
}
//展商参展主要目的
function initExhibitorPurpose() {
// q1 寻找新的代理商/经销商
// q2 展示企业形象，提升品牌知名度
// q3 推广/销售企业产品
// q4 维护和已有客户的关系/进行客户答谢活动
// q5 开拓零售药店市场
// q6 收集/获取行业信息
// q7 结交业界的朋友
// q8 收购生产批件/OEM代工
// q9 有竞争对手参加
// q10 转让生产批件/生产线
var exhibitorPurposeChart = getChart('exhibitorPurpose');
$.ajax({
type: "post",
url: "/exhibitionReview/exhibitorPurpose/info",
dataType: "json",
success: function (data) {
var legendData = ['寻找新的代理商/经销商',
'展示企业形象，提升品牌知名度',
'推广/销售企业产品',
'维护和已有客户的关系/进行客户答谢活动',
'开拓零售药店市场',
'收集/获取行业信息',
'结交业界的朋友',
'收购生产批件/OEM代工',
'有竞争对手参加',
'转让生产批件/生产线'];
var seriesData = [];
pushData(legendData,seriesData,data);
var option = {
title: {
text: '参展主要目的',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: legendData
},
series: [
{
name: '参展主要目的',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data:seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
exhibitorPurposeChart.clear();
exhibitorPurposeChart.setOption(option);
},
error: function () {
console.log('加载失败')
},
complete: function () {
console.log('加载完成')
}
});
}
$(function () {
initRegisterSatisfaction();//观众满意度
initRegisterEnterpriseType();//观众所属企业类别
initRegisterPurpose();//观众参会目的
initRegisterProduct();//观众感兴趣的产品
initExhibitorSatisfaction();//展商满意度
initExhibitorPosition();//展商职务
initExhibitorType();//展商类型
initExhibitorPurpose();//参展主要目的
});
</script>
</div>
</div>
展会回顾demo示例
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
