Primer Commit
This commit is contained in:
LuisAngelSalinasl
678
dist/js/pages/echarts/pie-doughnut/pie-doghnut.js
vendored
Normal file
678
dist/js/pages/echarts/pie-doughnut/pie-doghnut.js
vendored
Normal file
@@ -0,0 +1,678 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
// ------------------------------
|
||||
// Basic pie chart
|
||||
// ------------------------------
|
||||
// based on prepared DOM, initialize echarts instance
|
||||
var basicpieChart = echarts.init(document.getElementById('basic-pie'));
|
||||
var option = {
|
||||
// Add title
|
||||
title: {
|
||||
text: 'Browser popularity',
|
||||
subtext: 'Open source information',
|
||||
x: 'center'
|
||||
},
|
||||
|
||||
// Add tooltip
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||||
},
|
||||
|
||||
// Add legend
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data: ['IE', 'Opera', 'Safari', 'Firefox', 'Chrome']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#ffbc34', '#4fc3f7', '#212529', '#f62d51', '#2962FF'],
|
||||
|
||||
// Display toolbox
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
feature: {
|
||||
mark: {
|
||||
show: true,
|
||||
title: {
|
||||
mark: 'Markline switch',
|
||||
markUndo: 'Undo markline',
|
||||
markClear: 'Clear markline'
|
||||
}
|
||||
},
|
||||
dataView: {
|
||||
show: true,
|
||||
readOnly: false,
|
||||
title: 'View data',
|
||||
lang: ['View chart data', 'Close', 'Update']
|
||||
},
|
||||
magicType: {
|
||||
show: true,
|
||||
title: {
|
||||
pie: 'Switch to pies',
|
||||
funnel: 'Switch to funnel',
|
||||
},
|
||||
type: ['pie', 'funnel'],
|
||||
option: {
|
||||
funnel: {
|
||||
x: '25%',
|
||||
y: '20%',
|
||||
width: '50%',
|
||||
height: '70%',
|
||||
funnelAlign: 'left',
|
||||
max: 1548
|
||||
}
|
||||
}
|
||||
},
|
||||
restore: {
|
||||
show: true,
|
||||
title: 'Restore'
|
||||
},
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
title: 'Same as image',
|
||||
lang: ['Save']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Enable drag recalculate
|
||||
calculable: true,
|
||||
|
||||
// Add series
|
||||
series: [{
|
||||
name: 'Browsers',
|
||||
type: 'pie',
|
||||
radius: '70%',
|
||||
center: ['50%', '57.5%'],
|
||||
data: [
|
||||
{value: 335, name: 'IE'},
|
||||
{value: 310, name: 'Opera'},
|
||||
{value: 234, name: 'Safari'},
|
||||
{value: 135, name: 'Firefox'},
|
||||
{value: 1548, name: 'Chrome'}
|
||||
]
|
||||
}]
|
||||
};
|
||||
|
||||
basicpieChart.setOption(option);
|
||||
// ------------------------------
|
||||
// Basic pie chart
|
||||
// ------------------------------
|
||||
// based on prepared DOM, initialize echarts instance
|
||||
var basicdoughnutChart = echarts.init(document.getElementById('basic-doughnut'));
|
||||
var option = {
|
||||
// Add title
|
||||
title: {
|
||||
text: 'Browser popularity',
|
||||
subtext: 'Open source information',
|
||||
x: 'center'
|
||||
},
|
||||
|
||||
// Add legend
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data: ['Internet Explorer','Opera','Safari','Firefox','Chrome']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#ffbc34', '#4fc3f7', '#212529', '#f62d51', '#2962FF'],
|
||||
|
||||
// Display toolbox
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
feature: {
|
||||
mark: {
|
||||
show: true,
|
||||
title: {
|
||||
mark: 'Markline switch',
|
||||
markUndo: 'Undo markline',
|
||||
markClear: 'Clear markline'
|
||||
}
|
||||
},
|
||||
dataView: {
|
||||
show: true,
|
||||
readOnly: false,
|
||||
title: 'View data',
|
||||
lang: ['View chart data', 'Close', 'Update']
|
||||
},
|
||||
magicType: {
|
||||
show: true,
|
||||
title: {
|
||||
pie: 'Switch to pies',
|
||||
funnel: 'Switch to funnel',
|
||||
},
|
||||
type: ['pie', 'funnel'],
|
||||
option: {
|
||||
funnel: {
|
||||
x: '25%',
|
||||
y: '20%',
|
||||
width: '50%',
|
||||
height: '70%',
|
||||
funnelAlign: 'left',
|
||||
max: 1548
|
||||
}
|
||||
}
|
||||
},
|
||||
restore: {
|
||||
show: true,
|
||||
title: 'Restore'
|
||||
},
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
title: 'Same as image',
|
||||
lang: ['Save']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Enable drag recalculate
|
||||
calculable: true,
|
||||
|
||||
// Add series
|
||||
series: [
|
||||
{
|
||||
name: 'Browsers',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
center: ['50%', '57.5%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}' + '\n\n' + '{c} ({d}%)',
|
||||
position: 'center',
|
||||
textStyle: {
|
||||
fontSize: '17',
|
||||
fontWeight: '500'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data: [
|
||||
{value: 335, name: 'Internet Explorer'},
|
||||
{value: 310, name: 'Opera'},
|
||||
{value: 234, name: 'Safari'},
|
||||
{value: 135, name: 'Firefox'},
|
||||
{value: 1548, name: 'Chrome'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
basicdoughnutChart.setOption(option);
|
||||
// ------------------------------
|
||||
// customized chart
|
||||
// ------------------------------
|
||||
// based on prepared DOM, initialize echarts instance
|
||||
var customizedChart = echarts.init(document.getElementById('customized-chart'));
|
||||
var option = {
|
||||
|
||||
backgroundColor: '#fff',
|
||||
|
||||
title: {
|
||||
text: 'Customized Pie',
|
||||
left: 'center',
|
||||
top: 20,
|
||||
textStyle: {
|
||||
color: '#ccc'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip : {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 80,
|
||||
max: 600,
|
||||
inRange: {
|
||||
colorLightness: [0, 1]
|
||||
}
|
||||
},
|
||||
series : [
|
||||
{
|
||||
name:'Browsers',
|
||||
type:'pie',
|
||||
radius : '55%',
|
||||
center: ['50%', '50%'],
|
||||
data:[
|
||||
{value:335, name:'Firefox'},
|
||||
{value:310, name:'Safari'},
|
||||
{value:274, name:'IE'},
|
||||
{value:235, name:'Opera'},
|
||||
{value:400, name:'Chrome'}
|
||||
].sort(function (a, b) { return a.value - b.value; }),
|
||||
roseType: 'radius',
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.3)'
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
lineStyle: {
|
||||
color: 'rgba(0, 0, 0, 0.3)'
|
||||
},
|
||||
smooth: 0.2,
|
||||
length: 10,
|
||||
length2: 20
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#2962FF',
|
||||
shadowBlur: 200,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
|
||||
animationType: 'scale',
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelay: function (idx) {
|
||||
return Math.random() * 200;
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
customizedChart.setOption(option);
|
||||
// ------------------------------
|
||||
// Nested chart
|
||||
// ------------------------------
|
||||
// based on prepared DOM, initialize echarts instance
|
||||
var nestedChart = echarts.init(document.getElementById('nested-pie'));
|
||||
var option = {
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||||
},
|
||||
|
||||
// Add legend
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: 'left',
|
||||
data: ['Italy','Spain','Austria','Germany','Poland','Denmark','Hungary','Portugal','France','Netherlands']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#ffbc34', '#4fc3f7', '#212529', '#f62d51', '#2962FF'],
|
||||
|
||||
// Display toolbox
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
feature: {
|
||||
mark: {
|
||||
show: true,
|
||||
title: {
|
||||
mark: 'Markline switch',
|
||||
markUndo: 'Undo markline',
|
||||
markClear: 'Clear markline'
|
||||
}
|
||||
},
|
||||
dataView: {
|
||||
show: true,
|
||||
readOnly: false,
|
||||
title: 'View data',
|
||||
lang: ['View chart data', 'Close', 'Update']
|
||||
},
|
||||
magicType: {
|
||||
show: true,
|
||||
title: {
|
||||
pie: 'Switch to pies',
|
||||
funnel: 'Switch to funnel',
|
||||
},
|
||||
type: ['pie', 'funnel']
|
||||
},
|
||||
restore: {
|
||||
show: true,
|
||||
title: 'Restore'
|
||||
},
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
title: 'Same as image',
|
||||
lang: ['Save']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Enable drag recalculate
|
||||
calculable: false,
|
||||
|
||||
// Add series
|
||||
series: [
|
||||
|
||||
// Inner
|
||||
{
|
||||
name: 'Countries',
|
||||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
radius: [0, '40%'],
|
||||
|
||||
// for funnel
|
||||
x: '15%',
|
||||
y: '7.5%',
|
||||
width: '40%',
|
||||
height: '85%',
|
||||
funnelAlign: 'right',
|
||||
max: 1548,
|
||||
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
position: 'inner'
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data: [
|
||||
{value: 535, name: 'Italy'},
|
||||
{value: 679, name: 'Spain'},
|
||||
{value: 1548, name: 'Austria'}
|
||||
]
|
||||
},
|
||||
|
||||
// Outer
|
||||
{
|
||||
name: 'Countries',
|
||||
type: 'pie',
|
||||
radius: ['60%', '85%'],
|
||||
|
||||
// for funnel
|
||||
x: '55%',
|
||||
y: '7.5%',
|
||||
width: '35%',
|
||||
height: '85%',
|
||||
funnelAlign: 'left',
|
||||
max: 1048,
|
||||
|
||||
data: [
|
||||
{value: 535, name: 'Italy'},
|
||||
{value: 310, name: 'Germany'},
|
||||
{value: 234, name: 'Poland'},
|
||||
{value: 135, name: 'Denmark'},
|
||||
{value: 948, name: 'Hungary'},
|
||||
{value: 251, name: 'Portugal'},
|
||||
{value: 147, name: 'France'},
|
||||
{value: 202, name: 'Netherlands'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
|
||||
nestedChart.setOption(option);
|
||||
// ------------------------------
|
||||
// pole chart
|
||||
// ------------------------------
|
||||
// based on prepared DOM, initialize echarts instance
|
||||
var poleChart = echarts.init(document.getElementById('pole-chart'));
|
||||
// Data style
|
||||
var dataStyle = {
|
||||
normal: {
|
||||
label: {show: false},
|
||||
labelLine: {show: false}
|
||||
}
|
||||
};
|
||||
|
||||
// Placeholder style
|
||||
var placeHolderStyle = {
|
||||
normal: {
|
||||
color: 'rgba(0,0,0,0)',
|
||||
label: {show: false},
|
||||
labelLine: {show: false}
|
||||
},
|
||||
emphasis: {
|
||||
color: 'rgba(0,0,0,0)'
|
||||
}
|
||||
};
|
||||
var option = {
|
||||
title: {
|
||||
text: 'Are you Satisfied?',
|
||||
subtext: 'Ahmedabad, India',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
itemGap: 10,
|
||||
textStyle: {
|
||||
color: 'rgba(30,144,255,0.8)',
|
||||
fontSize: 19,
|
||||
fontWeight: '500'
|
||||
}
|
||||
},
|
||||
|
||||
// Add tooltip
|
||||
tooltip: {
|
||||
show: true,
|
||||
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||||
},
|
||||
|
||||
// Add legend
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
x: document.getElementById('pole-chart').offsetWidth / 2,
|
||||
y: 30,
|
||||
x: '55%',
|
||||
itemGap: 15,
|
||||
data: ['60% Definitely yes','30% Could be better','10% Not at the moment']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#2962FF', '#4fc3f7', '#f62d51'],
|
||||
|
||||
// Add series
|
||||
series: [
|
||||
{
|
||||
name: '1',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
radius: ['75%', '90%'],
|
||||
itemStyle: dataStyle,
|
||||
data: [
|
||||
{
|
||||
value: 60,
|
||||
name: '60% Definitely yes'
|
||||
},
|
||||
{
|
||||
value: 40,
|
||||
name: 'invisible',
|
||||
itemStyle: placeHolderStyle
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: '2',
|
||||
type:'pie',
|
||||
clockWise: false,
|
||||
radius: ['60%', '75%'],
|
||||
itemStyle: dataStyle,
|
||||
data: [
|
||||
{
|
||||
value: 30,
|
||||
name: '30% Could be better'
|
||||
},
|
||||
{
|
||||
value: 70,
|
||||
name: 'invisible',
|
||||
itemStyle: placeHolderStyle
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
name: '3',
|
||||
type: 'pie',
|
||||
clockWise: false,
|
||||
radius: ['45%', '60%'],
|
||||
itemStyle: dataStyle,
|
||||
data: [
|
||||
{
|
||||
value: 10,
|
||||
name: '10% Not at the moment'
|
||||
},
|
||||
{
|
||||
value: 90,
|
||||
name: 'invisible',
|
||||
itemStyle: placeHolderStyle
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
poleChart.setOption(option);
|
||||
// ------------------------------
|
||||
// nightingale chart
|
||||
// ------------------------------
|
||||
// based on prepared DOM, initialize echarts instance
|
||||
var nightingaleChart = echarts.init(document.getElementById('nightingale-chart'));
|
||||
var option = {
|
||||
title: {
|
||||
text: 'Employee\'s salary review',
|
||||
subtext: 'Senior front end developer',
|
||||
x: 'center'
|
||||
},
|
||||
|
||||
// Add tooltip
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: "{a} <br/>{b}: +{c}$ ({d}%)"
|
||||
},
|
||||
|
||||
// Add legend
|
||||
legend: {
|
||||
x: 'left',
|
||||
y: 'top',
|
||||
orient: 'vertical',
|
||||
data: ['January','February','March','April','May','June','July','August','September','October','November','December']
|
||||
},
|
||||
|
||||
color: ['#ffbc34', '#4fc3f7', '#212529', '#f62d51', '#2962FF', '#FFC400', '#006064', '#FF1744', '#1565C0', '#FFC400', '#64FFDA', '#607D8B'],
|
||||
|
||||
// Display toolbox
|
||||
toolbox: {
|
||||
show: true,
|
||||
orient: 'vertical',
|
||||
feature: {
|
||||
mark: {
|
||||
show: true,
|
||||
title: {
|
||||
mark: 'Markline switch',
|
||||
markUndo: 'Undo markline',
|
||||
markClear: 'Clear markline'
|
||||
}
|
||||
},
|
||||
dataView: {
|
||||
show: true,
|
||||
readOnly: false,
|
||||
title: 'View data',
|
||||
lang: ['View chart data', 'Close', 'Update']
|
||||
},
|
||||
magicType: {
|
||||
show: true,
|
||||
title: {
|
||||
pie: 'Switch to pies',
|
||||
funnel: 'Switch to funnel',
|
||||
},
|
||||
type: ['pie', 'funnel']
|
||||
},
|
||||
restore: {
|
||||
show: true,
|
||||
title: 'Restore'
|
||||
},
|
||||
saveAsImage: {
|
||||
show: true,
|
||||
title: 'Same as image',
|
||||
lang: ['Save']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Enable drag recalculate
|
||||
calculable: true,
|
||||
|
||||
// Add series
|
||||
series: [
|
||||
{
|
||||
name: 'Increase (brutto)',
|
||||
type: 'pie',
|
||||
radius: ['15%', '73%'],
|
||||
center: ['50%', '57%'],
|
||||
roseType: 'area',
|
||||
|
||||
// Funnel
|
||||
width: '40%',
|
||||
height: '78%',
|
||||
x: '30%',
|
||||
y: '17.5%',
|
||||
max: 450,
|
||||
sort: 'ascending',
|
||||
|
||||
data: [
|
||||
{value: 440, name: 'January'},
|
||||
{value: 260, name: 'February'},
|
||||
{value: 350, name: 'March'},
|
||||
{value: 250, name: 'April'},
|
||||
{value: 210, name: 'May'},
|
||||
{value: 350, name: 'June'},
|
||||
{value: 300, name: 'July'},
|
||||
{value: 430, name: 'August'},
|
||||
{value: 400, name: 'September'},
|
||||
{value: 450, name: 'October'},
|
||||
{value: 330, name: 'November'},
|
||||
{value: 200, name: 'December'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
nightingaleChart.setOption(option);
|
||||
//------------------------------------------------------
|
||||
// Resize chart on menu width change and window resize
|
||||
//------------------------------------------------------
|
||||
$(function () {
|
||||
|
||||
// Resize chart on menu width change and window resize
|
||||
$(window).on('resize', resize);
|
||||
$(".sidebartoggler").on('click', resize);
|
||||
|
||||
// Resize function
|
||||
function resize() {
|
||||
setTimeout(function() {
|
||||
|
||||
// Resize chart
|
||||
basicpieChart.resize();
|
||||
basicdoughnutChart.resize();
|
||||
customizedChart.resize();
|
||||
nestedChart.resize();
|
||||
poleChart.resize();
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user