echart图表-刷新界面.初始化时默认显示hover提示内容
2024-04-08 09:19:15
(function() {// 路径配置
require.config({paths: {echarts: '../../lib/echarts-2.2.7/build/dist'
}});
require(['echarts',
'echarts/chart/line',
'echarts/chart/bar',
'echarts/chart/pie'
],
function(ec) {// 中间圆环
var radiusChart = ec.init(document.getElementById('radiusChart'));
//中间柱状图1
var topBarChart=ec.init(document.getElementById('topBarChart'));
//中间柱状图2
var bottomBarChart=ec.init(document.getElementById('bottomBarChart'));
// 左上饼图
var proClassChart=ec.init(document.getElementById('proClassChart'));
// 右上饼图
var proLevelChart=ec.init(document.getElementById('proLevelChart'));
//咨询单位十强柱状图
var advisoryCompanyChart=ec.init(document.getElementById('advisoryCompanyChart'));
// 混凝土企业十强柱状图
var concreteCompanyChart=ec.init(document.getElementById('concreteCompanyChart'));
// 材价趋势区域图
var priceTrendChart=ec.init(document.getElementById('priceTrendChart'));
//中间圆环
var radiusOption= {color: ['#2bc6e5','#9cd2dc','#8eacb6','#369ce1','#76aad1','#b0d7dd','#57b8f9','#29b2d2','#8eacb6','#76aad1','#9cd2dc','#2bc6e5','#369ce1','#76aad1','#2890cd','#24a9c3','#b0d7dd','#76aad1','#2890cd'],
tooltip: {showDelay:0,
transitionDuration:0,
trigger: 'item',
padding: 10,
textStyle:{fontSize:12},
formatter: function(params) {return '造价数据' + '<br/>' + params.name + '：' + params.value + '元' + '<br/>' + '占 比：' + params.data.percent + '%';
}},
// legend: {
// orient: 'vertical',
// x:15,
// y: 'center',
// itemGap: 7,
// padding:[0,0,40,0],
// textStyle: {
// color: '#bcbcbc',
// backgroundColor:'rgba(0,0,0,0)',
// fontSize: 12
// },
// data: ['监测', '车站主体','车站装饰', '出入口通道', '风道、风井', '车站附属设施', '其他']
// },
calculable: false,
series: [{type: 'pie',
center: ['50%', '50%'],
radius: ['75%', '85%'],
itemStyle: {normal: {label: {show: true
},
labelLine: { //牵引线
show: true,
length :5
}},
emphasis: {label: { //中间显示文字
show: false,
position: 'center',
textStyle: {color: '#967adc',
fontSize: '16',
fontWeight: 'bold'
}}}},
data: [{value: 335,
percent: 25,
name: '人工'
}, {value: 310,
percent: 34,
name: '水泥及制品'
}, {value: 234,
percent: 4,
name: '黑色及有色金属'
},{value: 325,
percent: 14,
name: '劳保用品'
}, {value: 135,
percent: 6,
name: '劳保用品'
}, {value: 1548,
percent: 9,
name: '五金'
}, {value: 543,
percent: 8,
name: '周转材料'
}, {value: 543,
percent: 6,
name: '轨道材料'
}, {value: 543,
percent: 4,
name: '管材'
}, {value: 543,
percent: 2,
name: '装饰石材'
}, {value: 543,
percent: 2,
name: '化工产品'
}, {value: 543,
percent: 2,
name: '绝热材料'
}, {value: 543,
percent: 2,
name: '门窗楼梯'
}, {value: 543,
percent: 3,
name: '陶瓷地砖'
}, {value: 543,
percent: 3,
name: '天花墙板'
}, {value: 543,
percent: 3,
name: '玻璃'
}, {value: 543,
percent: 2,
name: '竹木'
}]}]};
//中间柱状图1
var topBarOption = {tooltip: {trigger: 'item',
padding: 10,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: '{a}<br/>{b}：{c}'
},
grid: {x: 60,
x2: 20,
y: 28,
y2: 60,
borderWidth: '1',
borderColor:'#1c3a64'
},
xAxis: [{type: 'category',
// name: '价格',
nameTextStyle: {color: '#999'
},
splitLine: false,
axisLabel: {textStyle: {color: '#32b3dc'
},
rotate: 35 //文字旋转
},
axisTick: {show:true,
lineStyle: {width: 2,
color: '#496185'
}},
axisLine: {textStyle: {color: '#457591'
},
lineStyle: {width: 2,
color: '#496185'
}},
data: ['广州造价站','造价通','数据公司','咨询公司','混凝土企业','交易中心','其他造价站']}],
yAxis: [{type: 'value',
// name: '工时',
nameTextStyle: {color: '#999'
},
splitLine: {lineStyle: {color: ['#1c3a64'],
width: 1
}},
splitArea:{ //背景区域
show:false
},
axisLine: {lineStyle: {width: 2,
color: '#457591'
}},
axisLabel: {textStyle: {color: '#32b3dc'
}},
axisTick: {show: false
}}],
series: [{name: '来源分布',
type: 'bar',
itemStyle: {normal: {barBorderRadius: [8, 8, 0, 0],
barBorderColor: 'rgba(0,0,0,0)',
areaStyle: {type: 'default'
},
color: function(params) {var colorList = [ //柱子颜色
'#55dbf4','#4dd3f3','#42c8f3','#36bcf2','#29aff1','#20a6f1','#199ef0'
];
return colorList[params.dataIndex]}},
emphasis: { //鼠标悬停时
barBorderRadius: [8, 8, 0, 0]}},
barMaxWidth: 10,
data: [400,500,800,1500,2000,1800,1300]}]};
//中间柱状图2
var bottomBarOption = {tooltip: {trigger: 'item',
padding: 10,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: '{a}<br/>{b}：{c}'
},
grid: {x: 60,
x2: 20,
y: 28,
y2: 60,
borderWidth: '1',
borderColor:'#1c3a64'
},
xAxis: [{type: 'category',
// name: '价格',
nameTextStyle: {color: '#999'
},
splitLine: false,
axisLabel: {textStyle: {color: '#32b3dc'
},
rotate: 35 //文字旋转
},
axisTick: {show:true,
lineStyle: {width: 2,
color: '#496185'
}},
axisLine: {textStyle: {color: '#457591'
},
lineStyle: {width: 2,
color: '#496185'
}},
data: ['信息价','参考价','供应商报价','招标控制价','中标价','合同价','投标价']}],
yAxis: [{type: 'value',
// name: '工时',
nameTextStyle: {color: '#999'
},
splitLine: {lineStyle: {color: ['#1c3a64'],
width: 1
}},
splitArea:{ //背景区域
show:false
},
axisLine: {lineStyle: {width: 2,
color: '#457591'
}},
axisLabel: {textStyle: {color: '#32b3dc'
}},
axisTick: {show: false
}}],
series: [{name: '类型分布',
type: 'bar',
itemStyle: {normal: {barBorderRadius: [8, 8, 0, 0],
barBorderColor: 'rgba(0,0,0,0)',
areaStyle: {type: 'default'
},
color: function(params) {var colorList = [ //柱子颜色
'#55dbf4','#4dd3f3','#42c8f3','#36bcf2','#29aff1','#20a6f1','#199ef0'
];
return colorList[params.dataIndex]}},
emphasis: { //鼠标悬停时
barBorderRadius: [8, 8, 0, 0]}},
barMaxWidth: 10,
data: [400,500,800,1500,2000,1800,1300]}]};
//左上饼图(项目类别分布)
var proClassOption = {title : {// text: '材价来源占比分析',
x: 15,
y: 15,
textStyle:{fontSize: '12',
fontWeight: 'normal',
color: '#666'
}},
tooltip : {trigger: 'item',
formatter:'{b}:{c}({d}%)'
// formatter:function(params){
// return params.name+'<br/>总条数 : '+params.data.totalNumber+'条 <br/>占比：'+ (params.percent - 0).toFixed(2)+'%';
// }
},
calculable : false,
color: ['#9cd2dc','#76aad1','#2890cd','#2bc6e5'],
series : [{name:'项目类别分布',
type:'pie',
// roseType: 'angle',
radius : '80%', //饼图大小
center: ['50%', '50%'],
itemStyle: {normal: {labelLine: { //牵引线
show: true
// length :15
}},
emphasis: {label: { //中间显示文字
show: false,
position: 'center',
textStyle: {color: '#967adc',
fontSize: '16',
fontWeight: 'bold'
}}}},
data:[{name: '招标控制价备案',value: 25,totalNumber:250},
{name: '材评备案',value: 15,totalNumber:60},
{name: '投标中标备案',value: 30,totalNumber:300},
{name: '合同备案',value: 30,totalNumber:30}]}]};
//右上饼图(项目阶段占比)
var proLevelOption = {title : {// text: '材价来源占比分析',
x: 15,
y: 15,
textStyle:{fontSize: '12',
fontWeight: 'normal',
color: '#666'
}},
tooltip : {trigger: 'item',
formatter:'{b}:{c}({d}%)'
// formatter:function(params){
// return params.name+'<br/>总条数 : '+params.data.totalNumber+'条 <br/>占比：'+ (params.percent - 0).toFixed(2)+'%';
// }
},
calculable : false,
color: ['#9cd2dc','#8eacb6','#369ce1','#76aad1','#b0d7dd','#57b8f9','#29b2d2','#2890cd','#2bc6e5'],
series : [{name:'项目阶段占比',
type:'pie',
// roseType: 'angle',
radius : '80%', //饼图大小
center: ['50%', '50%'],
itemStyle: {normal: {labelLine: { //牵引线
show: true
// length :15
}},
emphasis: {label: { //中间显示文字
show: false,
position: 'center',
textStyle: {color: '#967adc',
fontSize: '16',
fontWeight: 'bold'
}}}},
data:[{name: '投标价',value: 25,totalNumber:250},
{name: '合同',value: 15,totalNumber:60},
{name: '结算',value: 30,totalNumber:300},
{name: '招标控制',value: 30,totalNumber:30},
{name: '结算',value: 12,totalNumber:30},
{name: '预算',value: 10,totalNumber:30},
{name: '概算',value: 20,totalNumber:30},
{name: '估算',value: 10,totalNumber:30},
{name: '中标价',value: 30,totalNumber:30}]}]};
//右中柱状图(咨询单位十强)
var advisoryCompanyOption = {title : {// text: '世界人口总量',
textStyle: {fontSize: '14',
fontWeight: 'normal',
color: '#333'
}},
tooltip : {trigger: 'item'
},
grid: {x: 75,
x2: 20,
y: 5,
y2: 5,
borderWidth: '0'
// borderColor:'#E0EBFF'
},
calculable : true,
xAxis : [{type : 'value',
splitLine:false,
axisLine: {show:false,
lineStyle: {width: 1,
color: '#999'
}},
axisTick: {show:false,
lineStyle: {width: 2,
color: '#999'
}},
axisLabel: {show:false,
textStyle: {color: '#999'
}},
boundaryGap : [0, 0.01]}],
yAxis : [{type : 'category',
splitLine:false,
axisTick:false,
axisLine: {show:false,
lineStyle: {width: 2,
color: '#999'
}},
axisLabel: {interval:0, //y轴信息全部显示
textStyle: {color: '#fff'
}},
data : ['尚顶咨询','尚顶咨询','广州堂询','联云众咨','广州堂询','广州伯龙','尚顶咨询','自由人咨询','金誉咨询','珠江众申']}],
series : [{name:'咨询单位',
type:'bar',
barWidth:8,
itemStyle: {normal: {barBorderRadius: [8, 8, 8, 8],
barBorderColor: 'rgba(0,0,0,0)',
areaStyle: {type: 'default'
},
color: function(params) {var colorList = [ //柱子颜色
'#189df0','#1da2f0','#23a8f1','#2aaff1','#32b7f2','#3ac0f2','#43c8f3','#4ad0f3','#50D6F4','#55dbf4'
];
return colorList[params.dataIndex]}//每两个柱子的颜色为一组，循环
// color: function(params) {
// var colorItem = ['#B5C334','#C1232B'];
// var currentItem=0;
// var colorList=[];
// for(var i=0;i<params.series.data.length;i++){
// colorList.push(colorItem[currentItem]);
// if(currentItem==0){
// currentItem=1;
// }
// else {
// currentItem=0;
// }
// }
// return colorList[params.dataIndex]
// }
},
emphasis: { //鼠标悬停时
barBorderRadius: [8, 8, 8, 8]}},
data:[300, 500, 400, 800, 1000, 500,400, 800, 1000,1500]}]};
//右下柱状图(混凝土企业十强)
var concreteCompanyOption = {title : {// text: '世界人口总量',
textStyle: {fontSize: '14',
fontWeight: 'normal',
color: '#333'
}},
tooltip : {trigger: 'item'
},
grid: {x: 75,
x2: 20,
y: 5,
y2: 5,
borderWidth: '0'
// borderColor:'#E0EBFF'
},
calculable : true,
xAxis : [{type : 'value',
splitLine:false,
axisLine: {show:false,
lineStyle: {width: 1,
color: '#999'
}},
axisTick: {show:false,
lineStyle: {width: 2,
color: '#999'
}},
axisLabel: {show:false,
textStyle: {color: '#999'
}},
boundaryGap : [0, 0.01]}],
yAxis : [{type : 'category',
splitLine:false,
axisTick:false,
axisLine: {show:false,
lineStyle: {width: 2,
color: '#999'
}},
axisLabel: {interval:0, //y轴信息全部显示
textStyle: {color: '#fff'
}},
data : ['尚顶咨询','尚顶咨询','广州堂询','联云众咨','广州堂询','广州伯龙','尚顶咨询','自由人咨询','金誉咨询','珠江众申']}],
series : [{name:'混凝土企业',
type:'bar',
barWidth:8,
itemStyle: {normal: {barBorderRadius: [8, 8, 8, 8],
barBorderColor: 'rgba(0,0,0,0)',
areaStyle: {type: 'default'
},
color: function(params) {var colorList = [ //柱子颜色
'#189df0','#1da2f0','#23a8f1','#2aaff1','#32b7f2','#3ac0f2','#43c8f3','#4ad0f3','#50D6F4','#55dbf4'
];
return colorList[params.dataIndex]}},
emphasis: { //鼠标悬停时
barBorderRadius: [8, 8, 8, 8]}},
data:[300, 500, 400, 800, 1000, 500,400, 800, 1000,1500]}]};
//左边材价趋势区域图
var priceTrendOption = {title: {show:false,
// subtext: '用户量',
x: 10,
y: 10,
textStyle: {fontSize: '12',
fontWeight: 'normal',
color: '#999'
}},
tooltip: {trigger: 'item', //设置初始化时显示hover数据必须设为item
padding: 10,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
}},
legend: {data: ['材价趋势'],
x: 'center',
y: '410',
itemGap: 15,
itemHeight: 19,
itemWidth: 30,
textStyle: {color: '#fff',
fontSize: 14
}},
grid: {x:50,
x2:20,
y:30,
y2:25,
borderWidth:'1',
borderColor: '#496185'
},
calculable: true,
xAxis: [{type: 'category',
show: true,
splitLine: false,
axisLine: {lineStyle: {width: 2,
color: '#457591'
}},
axisLabel: {textStyle: {align: 'center',
color: '#fff'
}},
axisTick: {show: true, //刻度
lineStyle: {color: '#457591'
}},
boundaryGap: false,
data: function () {var list = [];
for(var i = 1;i<=7;i++){list.push('201'+i);
}return list;
}()}],
yAxis: [{// name: '注册用户量',
nameTextStyle:{color: '#999'
},
type: 'value',
show: true,
splitLine: {lineStyle: {color: ['#1b385e'],
width: 1
}},
axisLine: {lineStyle: {width: 2,
color: '#457591'
}},
// splitArea:true,
// areaStyle: {
// color: [
// 'rgba(250,250,250,0.3)',
// 'rgba(200,200,200,0.3)',
// 'rgba(200,200,200,0.3)'
// ]
// },
axisLabel: {textStyle: {color: '#fff'
}}}],
series: [{name: '材价趋势',
type: 'line',
scale: true,
symbol: 'emptyCircle',
symbolSize: [3, 3],
smooth: true,
// yAxisIndex:1, /*设置双Y轴时需要设置*/
itemStyle: { //区域颜色填充
normal: {lineStyle: {// width: 1,
color: '#fff'
},
areaStyle: {type: 'default'
},
color: '#31a5d4'
}},
data: [4634, 3034, 4634, 2809, 3947,3034, 4634]}]};
// 为echarts对象加载数据
radiusChart.setOption(radiusOption);
topBarChart.setOption(topBarOption);
bottomBarChart.setOption(bottomBarOption);
proClassChart.setOption(proClassOption);
proLevelChart.setOption(proLevelOption);
advisoryCompanyChart.setOption(advisoryCompanyOption);
concreteCompanyChart.setOption(concreteCompanyOption);
priceTrendChart.setOption(priceTrendOption);
//初始化时显示tip内容
// radiusChart.component.tooltip.showTip({seriesIndex: 0, name:'人工'});
topBarChart.component.tooltip.showTip({seriesIndex: 0, dataIndex:0});
bottomBarChart.component.tooltip.showTip({seriesIndex: 0, dataIndex:0});
proClassChart.component.tooltip.showTip({ seriesIndex: 0, name:'合同备案'});
proLevelChart.component.tooltip.showTip({ seriesIndex: 0, name:'中标价'});
advisoryCompanyChart.component.tooltip.showTip({ seriesIndex: 0, dataIndex:9 });
concreteCompanyChart.component.tooltip.showTip({ seriesIndex: 0, dataIndex:9 });
priceTrendChart.component.tooltip.showTip({ seriesIndex: 0, dataIndex:0 });
// 自适应echarts
setTimeout(function() {$(window).resize(function() {// distrLevelChart.resize();
radiusChart.resize();
topBarChart.resize();
bottomBarChart.resize();
proClassChart.resize();
proLevelChart.resize();
advisoryCompanyChart.resize();
concreteCompanyChart.resize();
priceTrendChart.resize();
});
}, 200);
});
//加载数字滚动
$('.scroll-number').countUp({time: 1000
});
})();
附图：
echart图表-刷新界面.初始化时默认显示hover提示内容相关推荐
- c#关于int（或其他类型）的字段在对象初始化时默认初始化问题的解决方法
c#关于int(或其他类型)的字段在对象初始化时默认初始化问题的解决方法 参考文章: (1)c#关于int(或其他类型)的字段在对象初始化时默认初始化问题的解决方法 (2)https://www.cn ...
- 计算机中pdf怎么预览,如何在浏览器中开启PDF时默认显示Adobe Reader XI工具栏
如何在浏览器中开启PDF时默认显示Adobe Reader XI工具栏_电脑基础知识_IT/计算机_资料 3682人阅读|3次下载 如何在浏览器中开启PDF时默认显示Adobe Reader XI工具 ...
- bootstrap-multiselect.js多选下拉框初始化时默认选中初始值
bootstrap-multiselect.js多选下拉框默认值设置 一.案例数据格式 二.HTML代码 <select id="msgRoles" multiple=&q ...
- vue img初始化时不显示图片错误图标
如果vue页面的图片是根据后台来的,就像这样: <img :src="'data:image/png;base64,'+imgs" alt="" /> ...
- echarts多条折线时,默认显示一条
需求:当前有4条折线,默认只显示两条折线 看了一下echarts的文档,legend属性的selected可以控制 legend: {orient: "vertical",show ...
- angularjs初始化时不显示模板内容, 不显示html, 不显示template
template的内容可能在需要的数据准备好之前就显示出来了, ng-cloak可以解决这个问题 ng-cloak <div id="template1" ng-cloak& ...
- 解决QT5 VS2010调试时不能显示字符串的内容
我安装了qt485和qt521,公司处于qt4到qt5的过渡阶段,所以两个环境都需要.两个qt add-in可以交替使用,使用vs的工具->外界程序管理器就可以了.不过很遗憾的发现调试qt5的项 ...
- 仿 淘宝搜索栏，实现 用户输入搜索关键字时可以显示 搜索提示 的效果 Ajax
要实现的 UI 功能 依赖文件: jQuery https://jquery.com/ art-template 模板引擎 https://aui.github.io/art-template/ 实现 ...
- android菜单键 r9,【报Bug】android oppoR9tm 使用subnvue导航栏初始化时 导航栏阴影闪烁...
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] 重现步骤 andr ...
最新文章
- Gradle 1.12用户指南翻译——第三十五章. Sonar 插件
- C中常用字符串处理函数
- vbs禁用任务管理器
- DisplayPowerState
- 区县级政府网站群建设要点
- 华北科技学院计算机期末考试,华北科技学院 专业计算机 考试专用
- 深度学习的实用层面 —— 1.12 梯度的数值逼近
- java虚拟机可以处理_Java虚拟机对类加载的处理机制
- 视频内容理解核心技术解密：Partial re-ID 在成片体检中的技术实践
- 阿里再发最严口罩禁令；铁路再次调整免费退票；iOS 13.4 测试版发布 | 极客头条...
- 【数据结构笔记10】二叉树的先序、中序、后序遍历，中序遍历的堆栈/非递归遍历算法，层序遍历，确定一个二叉树，树的同构
- 【计算机网络】数据通信的基础知识
- 海康SDK如何实现视频流转发
- Echart 四象限图
- IT 面试常见IQ试题
- policy服务器未能登陆,开机出现Group Policy Client服务未能登录的解决措施
- 三种近场通信技术的特点
- SQLServer LDF日志文件过大解决方案 2021-09-26
- 非贪婪匹配：如何使用正则表达式碰到到第一个匹配到的字符串就停止
- 关于最近GD32F103替代STM32F103方案个人记录