mirror of
https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi.git
synced 2025-06-17 06:55:26 +08:00
1129 lines
39 KiB
JavaScript
1129 lines
39 KiB
JavaScript
|
||
$(function () {
|
||
|
||
echarts_1();
|
||
echarts_2();
|
||
map();
|
||
echarts_3();
|
||
echarts_4();
|
||
echarts_5();
|
||
echarts_6();
|
||
|
||
function echarts_1() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echarts_1'));
|
||
|
||
var data = [
|
||
{value: 12,name: '行业一'},
|
||
{value: 13,name: '行业二'},
|
||
{value: 70,name: '行业三'},
|
||
{value: 52,name: '行业四'},
|
||
{value: 35,name: '行业五'}
|
||
];
|
||
|
||
option = {
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{b}: <br/>{c} ({d}%)"
|
||
},
|
||
color: ['#af89d6', '#4ac7f5', '#0089ff', '#f36f8a', '#f5c847'],
|
||
legend: { //图例组件，颜色和名字
|
||
x: '70%',
|
||
y: 'center',
|
||
orient: 'vertical',
|
||
itemGap: 12, //图例每项之间的间隔
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
icon: 'rect',
|
||
data: ['行业一', '行业二', '行业三', '行业四', '行业五'],
|
||
textStyle: {
|
||
color: [],
|
||
fontStyle: 'normal',
|
||
fontFamily: '微软雅黑',
|
||
fontSize: 12,
|
||
}
|
||
},
|
||
series: [{
|
||
name: '行业占比',
|
||
type: 'pie',
|
||
clockwise: false, //饼图的扇区是否是顺时针排布
|
||
minAngle: 20, //最小的扇区角度（0 ~ 360）
|
||
center: ['35%', '50%'], //饼图的中心（圆心）坐标
|
||
radius: [50, 75], //饼图的半径
|
||
avoidLabelOverlap: true, ////是否启用防止标签重叠
|
||
itemStyle: { //图形样式
|
||
normal: {
|
||
borderColor: '#1e2239',
|
||
borderWidth: 2,
|
||
},
|
||
},
|
||
label: { //标签的位置
|
||
normal: {
|
||
show: true,
|
||
position: 'inside', //标签的位置
|
||
formatter: "{d}%",
|
||
textStyle: {
|
||
color: '#fff',
|
||
}
|
||
},
|
||
emphasis: {
|
||
show: true,
|
||
textStyle: {
|
||
fontWeight: 'bold'
|
||
}
|
||
}
|
||
},
|
||
data: data
|
||
}, {
|
||
name: '',
|
||
type: 'pie',
|
||
clockwise: false,
|
||
silent: true,
|
||
minAngle: 20, //最小的扇区角度（0 ~ 360）
|
||
center: ['35%', '50%'], //饼图的中心（圆心）坐标
|
||
radius: [0, 40], //饼图的半径
|
||
itemStyle: { //图形样式
|
||
normal: {
|
||
borderColor: '#1e2239',
|
||
borderWidth: 1.5,
|
||
opacity: 0.21,
|
||
}
|
||
},
|
||
label: { //标签的位置
|
||
normal: {
|
||
show: false,
|
||
}
|
||
},
|
||
data: data
|
||
}]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
function echarts_2() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echarts_2'));
|
||
|
||
option = {
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: "{b} <br/>{c}辆"
|
||
},
|
||
legend: {
|
||
x: 'center',
|
||
y: '2%',
|
||
data: ['车型一', '车型二', '车型三', '车型四', '车型五'],
|
||
icon: 'circle',
|
||
textStyle: {
|
||
color: '#fff',
|
||
}
|
||
},
|
||
calculable: true,
|
||
series: [{
|
||
name: '车型',
|
||
type: 'pie',
|
||
//起始角度，支持范围[0, 360]
|
||
startAngle: 0,
|
||
//饼图的半径，数组的第一项是内半径，第二项是外半径
|
||
radius: [41, 110],
|
||
//支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
|
||
center: ['50%', '20%'],
|
||
//是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
|
||
// 'radius' 面积展现数据的百分比，半径展现数据的大小。
|
||
// 'area' 所有扇区面积相同，仅通过半径展现数据大小
|
||
roseType: 'area',
|
||
//是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
|
||
avoidLabelOverlap: false,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
formatter: '{c}辆'
|
||
},
|
||
emphasis: {
|
||
show: true
|
||
}
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: true,
|
||
length2: 1,
|
||
},
|
||
emphasis: {
|
||
show: true
|
||
}
|
||
},
|
||
data: [{
|
||
value: 600,
|
||
name: '车型一',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#f845f1'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: 1100,
|
||
name: '车型二',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#ad46f3'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: 1200,
|
||
name: '车型三',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#5045f6'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: 1300,
|
||
name: '车型四',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#4777f5'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: 1400,
|
||
name: '车型五',
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#44aff0'
|
||
}
|
||
}
|
||
},
|
||
|
||
{
|
||
value: 0,
|
||
name: "",
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
value: 0,
|
||
name: "",
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
value: 0,
|
||
name: "",
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
value: 0,
|
||
name: "",
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
},
|
||
{
|
||
value: 0,
|
||
name: "",
|
||
label: {
|
||
show: false
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
}
|
||
}
|
||
]
|
||
}]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
function map() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('map'));
|
||
|
||
var nameColor = " rgb(55, 75, 113)"
|
||
var name_fontFamily = '宋体'
|
||
var name_fontSize = 35
|
||
var mapName = 'china'
|
||
var data = []
|
||
var geoCoordMap = {};
|
||
var toolTipData = [];
|
||
|
||
/*获取地图数据*/
|
||
myChart.showLoading();
|
||
var mapFeatures = echarts.getMap(mapName).geoJson.features;
|
||
myChart.hideLoading();
|
||
mapFeatures.forEach(function(v) {
|
||
// 地区名称
|
||
var name = v.properties.name;
|
||
// 地区经纬度
|
||
geoCoordMap[name] = v.properties.cp;
|
||
data.push({
|
||
name: name,
|
||
value: Math.round(Math.random() * 100 + 10)
|
||
})
|
||
toolTipData.push({
|
||
name: name,
|
||
value: [{
|
||
name: "车型一",
|
||
value: Math.round(Math.random() * 100 + 10) + '辆'
|
||
},
|
||
{
|
||
name: "车型二",
|
||
value: Math.round(Math.random() * 100 + 10)+ '辆'
|
||
},
|
||
{
|
||
name: "车型三",
|
||
value: Math.round(Math.random() * 100 + 10)+ '辆'
|
||
},
|
||
{
|
||
name: "车型四",
|
||
value: Math.round(Math.random() * 100 + 10)+ '辆'
|
||
}
|
||
]
|
||
})
|
||
});
|
||
|
||
var max = 480,
|
||
min = 9; // todo
|
||
var maxSize4Pin = 50,
|
||
minSize4Pin = 20;
|
||
|
||
var convertData = function(data) {
|
||
var res = [];
|
||
for (var i = 0; i < data.length; i++) {
|
||
var geoCoord = geoCoordMap[data[i].name];
|
||
if (geoCoord) {
|
||
res.push({
|
||
name: data[i].name,
|
||
value: geoCoord.concat(data[i].value),
|
||
});
|
||
}
|
||
}
|
||
return res;
|
||
};
|
||
|
||
option = {
|
||
|
||
|
||
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function(params) {
|
||
if (typeof(params.value)[2] == "undefined") {
|
||
var toolTiphtml = ''
|
||
for(var i = 0;i<toolTipData.length;i++){
|
||
if(params.name==toolTipData[i].name){
|
||
toolTiphtml += toolTipData[i].name+':<br>'
|
||
for(var j = 0;j<toolTipData[i].value.length;j++){
|
||
toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
|
||
}
|
||
}
|
||
}
|
||
console.log(toolTiphtml)
|
||
// console.log(convertData(data))
|
||
return toolTiphtml;
|
||
} else {
|
||
var toolTiphtml = ''
|
||
for(var i = 0;i<toolTipData.length;i++){
|
||
if(params.name==toolTipData[i].name){
|
||
toolTiphtml += toolTipData[i].name+':<br>'
|
||
for(var j = 0;j<toolTipData[i].value.length;j++){
|
||
toolTiphtml+=toolTipData[i].value[j].name+':'+toolTipData[i].value[j].value+"<br>"
|
||
}
|
||
}
|
||
}
|
||
console.log(toolTiphtml)
|
||
// console.log(convertData(data))
|
||
return toolTiphtml;
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
y: 'bottom',
|
||
x: 'right',
|
||
data: ['credit_pm2.5'],
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
},
|
||
visualMap: {
|
||
show: false,
|
||
min: 0,
|
||
max: 600,
|
||
left: 'left',
|
||
top: 'bottom',
|
||
text: ['高', '低'], // 文本，默认为数值文本
|
||
calculable: true,
|
||
seriesIndex: [1],
|
||
inRange: {
|
||
// color: ['#3B5077', '#031525'] // 蓝黑
|
||
// color: ['#ffc0cb', '#800080'] // 红紫
|
||
// color: ['#3C3B3F', '#605C3C'] // 黑绿
|
||
// color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
|
||
// color: ['#23074d', '#cc5333'] // 紫红
|
||
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
||
// color: ['#1488CC', '#2B32B2'] // 浅蓝
|
||
// color: ['#00467F', '#A5CC82','#ffc0cb'] // 蓝绿红
|
||
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
||
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
||
// color: ['#00467F', '#A5CC82'] // 蓝绿
|
||
color: ['#22e5e8', '#0035f9','#22e5e8'] // 蓝绿
|
||
|
||
}
|
||
},
|
||
/*工具按钮组*/
|
||
toolbox: {
|
||
show: false,
|
||
orient: 'vertical',
|
||
left: 'right',
|
||
top: 'center',
|
||
feature: {
|
||
|
||
dataView: {
|
||
readOnly: false
|
||
},
|
||
restore: {},
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
geo: {
|
||
show: true,
|
||
map: mapName,
|
||
label: {
|
||
normal: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
roam: true,
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: '#031525',
|
||
borderColor: '#097bba'
|
||
},
|
||
emphasis: {
|
||
areaColor: '#2B91B7'
|
||
}
|
||
}
|
||
},
|
||
series: [{
|
||
name: '散点',
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
data: convertData(data),
|
||
symbolSize: function(val) {
|
||
return val[2] / 10;
|
||
},
|
||
label: {
|
||
normal: {
|
||
formatter: '{b}',
|
||
position: 'right',
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
show: false
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(255,255,0,0.8)'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'map',
|
||
map: mapName,
|
||
geoIndex: 0,
|
||
aspectScale: 0.75, //长宽比
|
||
showLegendSymbol: false, // 存在legend时显示
|
||
label: {
|
||
normal: {
|
||
show: true
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
roam: true,
|
||
itemStyle: {
|
||
normal: {
|
||
areaColor: '#031525',
|
||
borderColor: '#3B5077',
|
||
},
|
||
emphasis: {
|
||
areaColor: '#2B91B7'
|
||
}
|
||
},
|
||
animation: false,
|
||
data: data
|
||
},
|
||
{
|
||
name: '点',
|
||
type: 'scatter',
|
||
coordinateSystem: 'geo',
|
||
symbol: 'pin', //气泡
|
||
symbolSize: function(val) {
|
||
var a = (maxSize4Pin - minSize4Pin) / (max - min);
|
||
var b = minSize4Pin - a * min;
|
||
b = maxSize4Pin - a * max;
|
||
return a * val[2] + b;
|
||
},
|
||
label: {
|
||
|
||
normal: {
|
||
show: false,
|
||
formatter:function (params) { return params.data.value[2] },
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 9,
|
||
}
|
||
}
|
||
},
|
||
itemStyle: {
|
||
|
||
normal: {
|
||
color: 'rgba(255,255,0,0)', //标志颜色
|
||
}
|
||
},
|
||
zlevel: 6,
|
||
data: convertData(data),
|
||
},
|
||
{
|
||
name: 'Top 5',
|
||
type: 'effectScatter',
|
||
coordinateSystem: 'geo',
|
||
data: convertData(data.sort(function(a, b) {
|
||
return b.value - a.value;
|
||
}).slice(0, 5)),
|
||
symbolSize: function(val) {
|
||
return val[2] / 10;
|
||
},
|
||
showEffectOn: 'render',
|
||
rippleEffect: {
|
||
brushType: 'stroke'
|
||
},
|
||
hoverAnimation: true,
|
||
label: {
|
||
normal: {
|
||
formatter: '{b}',
|
||
position: 'right',
|
||
show: true
|
||
}
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgba(255,255,0,0.8)',
|
||
shadowBlur: 10,
|
||
shadowColor: '#05C3F9'
|
||
}
|
||
},
|
||
zlevel: 1
|
||
},
|
||
|
||
]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
function echarts_3() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echarts_3'));
|
||
|
||
option = {
|
||
|
||
tooltip : {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
data:['简易程序案件数']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '3%',
|
||
top:'8%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
color:['#a4d8cc','#25f3e6'],
|
||
toolbox: {
|
||
show : false,
|
||
feature : {
|
||
mark : {show: true},
|
||
dataView : {show: true, readOnly: false},
|
||
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
|
||
calculable : true,
|
||
xAxis : [
|
||
{
|
||
type : 'category',
|
||
|
||
axisTick:{show:false},
|
||
|
||
boundaryGap : false,
|
||
axisLabel: {
|
||
textStyle:{
|
||
color: '#ccc',
|
||
fontSize:'12'
|
||
},
|
||
lineStyle:{
|
||
color:'#2c3459',
|
||
},
|
||
interval: {default: 0},
|
||
rotate:50,
|
||
formatter : function(params){
|
||
var newParamsName = "";// 最终拼接成的字符串
|
||
var paramsNameNumber = params.length;// 实际标签的个数
|
||
var provideNumber = 4;// 每行能显示的字的个数
|
||
var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
|
||
/**
|
||
* 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
|
||
*/
|
||
// 条件等同于rowNumber>1
|
||
if (paramsNameNumber > provideNumber) {
|
||
/** 循环每一行,p表示行 */
|
||
var tempStr = "";
|
||
tempStr=params.substring(0,4);
|
||
newParamsName = tempStr+"...";// 最终拼成的字符串
|
||
} else {
|
||
// 将旧标签的值赋给新标签
|
||
newParamsName = params;
|
||
}
|
||
//将最终的字符串返回
|
||
return newParamsName
|
||
}
|
||
|
||
},
|
||
data: ['0时','1时','2时','3时','4时','5时','6时','7时','8时','9时','10时','11时','12时','13时','14时','15时','16时','17时'
|
||
,'18时','19时','20时','21时','22时','23时']
|
||
}
|
||
],
|
||
yAxis : {
|
||
|
||
type : 'value',
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#ccc',
|
||
fontSize:'12',
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle:{
|
||
color:'rgba(160,160,160,0.3)',
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle:{
|
||
color:'rgba(160,160,160,0.3)',
|
||
}
|
||
},
|
||
|
||
}
|
||
,
|
||
series : [
|
||
{
|
||
// name:'简易程序案件数',
|
||
type:'line',
|
||
areaStyle: {
|
||
|
||
normal: {type: 'default',
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.8, [{
|
||
offset: 0,
|
||
color: '#25f3e6'
|
||
}, {
|
||
offset: 1,
|
||
color: '#0089ff'
|
||
}], false)
|
||
}
|
||
},
|
||
smooth:true,
|
||
itemStyle: {
|
||
normal: {areaStyle: {type: 'default'}}
|
||
},
|
||
data:[710, 312, 321,754, 500, 830, 710, 521, 504, 660, 530, 410,710, 312, 321,754, 500, 830, 710, 521, 504, 660, 530, 410]
|
||
}
|
||
]
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
function echarts_4() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echarts_4'));
|
||
|
||
option = {
|
||
|
||
tooltip : {
|
||
trigger: 'item',
|
||
formatter: "{b}: <br/> {c} ({d}%)"
|
||
},
|
||
|
||
toolbox: {
|
||
show : false,
|
||
feature : {
|
||
mark : {show: true},
|
||
dataView : {show: true, readOnly: false},
|
||
magicType : {
|
||
show: true,
|
||
type: ['pie', 'funnel']
|
||
},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
calculable : true,
|
||
series : [
|
||
|
||
{
|
||
name:'排名',
|
||
type:'pie',
|
||
color: ['#af89d6', '#f5c847', '#ff999a', '#0089ff','#25f3e6'],
|
||
radius : [20, 100],
|
||
center : ['50%', '50%'],
|
||
roseType : 'area',
|
||
data:[
|
||
{value:70, name:'NO.4'},
|
||
{value:90, name:'NO.3'},
|
||
{value:110, name:'NO.2'},
|
||
{value:150, name:'NO.1'},
|
||
{value:40, name:'NO.5'}
|
||
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
function echarts_5() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echarts_5'));
|
||
|
||
var xData = function() {
|
||
var data = ['NO.1','NO.2','NO.3','NO.4','NO.5'];
|
||
|
||
return data;
|
||
}();
|
||
|
||
var data = [28, 22, 20, 16, 12]
|
||
|
||
option = {
|
||
// backgroundColor: "#141f56",
|
||
|
||
tooltip: {
|
||
show: "true",
|
||
trigger: 'item',
|
||
backgroundColor: 'rgba(0,0,0,0.4)', // 背景
|
||
padding: [8, 10], //内边距
|
||
// extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
|
||
formatter: function(params) {
|
||
if (params.seriesName != "") {
|
||
return params.name + ' ： ' + params.value + ' 辆';
|
||
}
|
||
},
|
||
|
||
},
|
||
grid: {
|
||
borderWidth: 0,
|
||
top: 20,
|
||
bottom: 35,
|
||
left:55,
|
||
right:30,
|
||
textStyle: {
|
||
color: "#fff"
|
||
}
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#363e83',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
inside: false,
|
||
textStyle: {
|
||
color: '#bac0c0',
|
||
fontWeight: 'normal',
|
||
fontSize: '12',
|
||
},
|
||
// formatter:function(val){
|
||
// return val.split("").join("\n")
|
||
// },
|
||
},
|
||
data: xData,
|
||
}, {
|
||
type: 'category',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
show: false
|
||
},
|
||
splitArea: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
data: xData,
|
||
}],
|
||
yAxis: {
|
||
type: 'value',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#32346c',
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#32346c ',
|
||
}
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#bac0c0',
|
||
fontWeight: 'normal',
|
||
fontSize: '12',
|
||
},
|
||
formatter: '{value}',
|
||
},
|
||
},
|
||
series: [{
|
||
// name: '生师比(%)',
|
||
type: 'bar',
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||
offset: 0,
|
||
color: '#00c0e9'
|
||
}, {
|
||
offset: 1,
|
||
color: '#3b73cf'
|
||
}]),
|
||
barBorderRadius: 50,
|
||
borderWidth: 0,
|
||
},
|
||
emphasis: {
|
||
shadowBlur: 15,
|
||
shadowColor: 'rgba(105,123, 214, 0.7)'
|
||
}
|
||
},
|
||
zlevel: 2,
|
||
barWidth: '20%',
|
||
data: data,
|
||
},
|
||
{
|
||
name: '',
|
||
type: 'bar',
|
||
xAxisIndex: 1,
|
||
zlevel: 1,
|
||
itemStyle: {
|
||
normal: {
|
||
color: '#121847',
|
||
borderWidth: 0,
|
||
shadowBlur: {
|
||
shadowColor: 'rgba(255,255,255,0.31)',
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 0,
|
||
shadowOffsetY: 2,
|
||
},
|
||
}
|
||
},
|
||
barWidth: '20%',
|
||
data: [30, 30, 30, 30, 30]
|
||
}
|
||
]
|
||
}
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
function echarts_6() {
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('echarts_6'));
|
||
|
||
var data = {
|
||
"chart": [{
|
||
month: "NO.1",
|
||
value: 600,
|
||
|
||
},
|
||
|
||
{
|
||
month: "NO.2",
|
||
value: 500,
|
||
|
||
},
|
||
|
||
{
|
||
month: "NO.3",
|
||
value: 614,
|
||
|
||
},
|
||
|
||
{
|
||
month: "NO.4",
|
||
value: 442,
|
||
|
||
},
|
||
|
||
{
|
||
month: "NO.5",
|
||
value: 322
|
||
|
||
}
|
||
|
||
]
|
||
}
|
||
|
||
|
||
var xAxisMonth = [],
|
||
barData = [],
|
||
lineData = [];
|
||
for (var i = 0; i < data.chart.length; i++) {
|
||
xAxisMonth.push(data.chart[i].month);
|
||
barData.push({
|
||
"name": xAxisMonth[i],
|
||
"value": data.chart[i].value
|
||
});
|
||
lineData.push({
|
||
"name": xAxisMonth[i],
|
||
"value": data.chart[i].ratio
|
||
});
|
||
}
|
||
|
||
option = {
|
||
// backgroundColor: "#020d22",
|
||
title: '',
|
||
grid: {
|
||
top: '10%',
|
||
left: '18%',
|
||
bottom: '3%',
|
||
right:'5%',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'none'
|
||
},
|
||
formatter: function(params) {
|
||
return params[0]["data"].name + "<br/>" + '报警次数: ' + params[1]["data"].value+'次' ;
|
||
}
|
||
},
|
||
xAxis: [{
|
||
type: 'category',
|
||
show: false,
|
||
data: ['NO.1', 'NO.2', 'NO.3', 'NO.4', 'NO.5'],
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#b6b5ab'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'category',
|
||
position: "bottom",
|
||
data: xAxisMonth,
|
||
boundaryGap: true,
|
||
// offset: 40,
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.2)"
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
color: "rgba(255,255,255,0.2)"
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#b6b5ab'
|
||
}
|
||
}
|
||
}
|
||
|
||
],
|
||
yAxis: [{
|
||
show: true,
|
||
offset: 52,
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
color: "rgba(255,255,255,0.2)"
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
color: "rgba(255,255,255,0.2)"
|
||
},
|
||
axisLabel: {
|
||
show: true,
|
||
color: '#b6b5ab'
|
||
}
|
||
}, {
|
||
show: false,
|
||
type: "value",
|
||
// name: "合格率(%)",
|
||
nameTextStyle: {
|
||
color: '#ccc'
|
||
},
|
||
axisLabel: {
|
||
color: '#ccc'
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true
|
||
},
|
||
axisTick: {
|
||
show: true
|
||
}
|
||
}],
|
||
color: ['#e54035'],
|
||
series: [{
|
||
name: '训练人次',
|
||
type: 'pictorialBar',
|
||
xAxisIndex: 1,
|
||
barCategoryGap: '-80%',
|
||
// barCategoryGap: '-5%',
|
||
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
|
||
itemStyle: {
|
||
normal: {
|
||
color: function(params) {
|
||
var colorList = [
|
||
'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
|
||
'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)',
|
||
'rgba(13,177,205,0.8)', 'rgba(29,103,182,0.6)'
|
||
];
|
||
return colorList[params.dataIndex];
|
||
}
|
||
},
|
||
emphasis: {
|
||
opacity: 1
|
||
}
|
||
},
|
||
data: barData,
|
||
},
|
||
{
|
||
symbol: 'image://data:image/png;base64,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',
|
||
symbolSize: 42,
|
||
name: "完成率",
|
||
type: "line",
|
||
yAxisIndex: 1,
|
||
data: lineData,
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 5,
|
||
color: {
|
||
colorStops: [{
|
||
offset: 0,
|
||
color: '#821eff'
|
||
},
|
||
|
||
{
|
||
offset: 1,
|
||
color: '#204fff'
|
||
}
|
||
],
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
window.addEventListener("resize",function(){
|
||
myChart.resize();
|
||
});
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
})
|
||
|