Primer Commit
This commit is contained in:
LuisAngelSalinasl
360
dist/js/pages/echarts/bar/bar.js
vendored
Normal file
360
dist/js/pages/echarts/bar/bar.js
vendored
Normal file
@@ -0,0 +1,360 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
// ------------------------------
|
||||
// Basic bar chart
|
||||
// ------------------------------
|
||||
// based on prepared DOM, initialize echarts instance
|
||||
var myChart = echarts.init(document.getElementById('basic-bar'));
|
||||
|
||||
// specify chart configuration item and data
|
||||
var option = {
|
||||
// Setup grid
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
// Add Tooltip
|
||||
tooltip : {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
||||
legend: {
|
||||
data:['Site A','Site B']
|
||||
},
|
||||
toolbox: {
|
||||
show : true,
|
||||
feature : {
|
||||
|
||||
magicType : {show: true, type: ['line', 'bar']},
|
||||
restore : {show: true},
|
||||
saveAsImage : {show: true}
|
||||
}
|
||||
},
|
||||
color: ["#2962FF", "#4fc3f7"],
|
||||
calculable : true,
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
data : ['Jan','Feb','Mar','Apr','May','Jun','July','Aug','Sept','Oct','Nov','Dec']
|
||||
}
|
||||
],
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value'
|
||||
}
|
||||
],
|
||||
series : [
|
||||
{
|
||||
name:'Site A',
|
||||
type:'bar',
|
||||
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
|
||||
markPoint : {
|
||||
data : [
|
||||
{type : 'max', name: 'Max'},
|
||||
{type : 'min', name: 'Min'}
|
||||
]
|
||||
},
|
||||
markLine : {
|
||||
data : [
|
||||
{type : 'average', name: 'Average'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'Site B',
|
||||
type:'bar',
|
||||
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
|
||||
markPoint : {
|
||||
data : [
|
||||
{name : 'The highest year', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
|
||||
{name : 'Year minimum', value : 2.3, xAxis: 11, yAxis: 3}
|
||||
]
|
||||
},
|
||||
markLine : {
|
||||
data : [
|
||||
{type : 'average', name : 'Average'}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// use configuration item and data specified to show chart
|
||||
myChart.setOption(option);
|
||||
|
||||
|
||||
// ------------------------------
|
||||
// Stacked bar chart
|
||||
// ------------------------------
|
||||
// based on prepared DOM, initialize echarts instance
|
||||
var stackedChart = echarts.init(document.getElementById('stacked-bar'));
|
||||
|
||||
// specify chart configuration item and data
|
||||
var option = {
|
||||
// Setup grid
|
||||
grid: {
|
||||
x: 40,
|
||||
x2: 40,
|
||||
y: 45,
|
||||
y2: 25
|
||||
},
|
||||
|
||||
// Add tooltip
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
axisPointer : { // Axis indicator axis trigger effective
|
||||
type : 'shadow' // The default is a straight line, optionally: 'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
|
||||
// Add legend
|
||||
legend: {
|
||||
data: ['Direct access', 'Email marketing', 'Advertising alliance', 'Video ads', 'Search Engine']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#2962FF', '#4fc3f7', '#212529', '#f62d51', '#dadada'],
|
||||
|
||||
// Horizontal axis
|
||||
xAxis: [{
|
||||
type: 'value',
|
||||
}],
|
||||
|
||||
// Vertical axis
|
||||
yAxis: [{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}],
|
||||
|
||||
// Add series
|
||||
series : [
|
||||
{
|
||||
name:'Direct access',
|
||||
type:'bar',
|
||||
stack: 'Total',
|
||||
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
|
||||
data:[320, 302, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name:'Email marketing',
|
||||
type:'bar',
|
||||
stack: 'Total',
|
||||
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
|
||||
data:[120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name:'Advertising alliance',
|
||||
type:'bar',
|
||||
stack: 'Total',
|
||||
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
|
||||
data:[220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name:'Video ads',
|
||||
type:'bar',
|
||||
stack: 'Total',
|
||||
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
|
||||
data:[150, 212, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name:'Search Engine',
|
||||
type:'bar',
|
||||
stack: 'Total',
|
||||
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
|
||||
data:[820, 832, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
};
|
||||
// use configuration item and data specified to show chart
|
||||
stackedChart.setOption(option);
|
||||
|
||||
|
||||
//***************************
|
||||
// Stacked chart
|
||||
//***************************
|
||||
|
||||
|
||||
//***************************
|
||||
// Stacked Area chart
|
||||
//***************************
|
||||
var stackedbarcolumnChart = echarts.init(document.getElementById('stacked-column'));
|
||||
var option = {
|
||||
|
||||
// Setup grid
|
||||
grid: {
|
||||
x: 40,
|
||||
x2: 40,
|
||||
y: 45,
|
||||
y2: 25
|
||||
},
|
||||
|
||||
// Add tooltip
|
||||
tooltip : {
|
||||
trigger: 'axis',
|
||||
axisPointer : { // Axis indicator axis trigger effective
|
||||
type : 'shadow' // The default is a straight line, optionally: 'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
|
||||
// Add legend
|
||||
legend: {
|
||||
data: [ 'Video', 'Search engine', 'Google', 'Safari', 'Opera', 'Firefox']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#2962FF', '#4fc3f7', '#212529', '#f62d51', '#dadada'],
|
||||
|
||||
// Enable drag recalculate
|
||||
calculable: true,
|
||||
|
||||
// Horizontal axis
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
}],
|
||||
|
||||
// Vertical axis
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
}],
|
||||
|
||||
// Add series
|
||||
series : [
|
||||
|
||||
{
|
||||
name:'Video',
|
||||
type:'bar',
|
||||
stack: 'advertising',
|
||||
data:[150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name:'Search engine',
|
||||
type:'bar',
|
||||
data:[862, 1018, 964, 1026, 1679, 1600, 1570],
|
||||
markLine : {
|
||||
itemStyle:{
|
||||
normal:{
|
||||
lineStyle:{
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
},
|
||||
data : [
|
||||
[{type : 'min'}, {type : 'max'}]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'Google',
|
||||
type:'bar',
|
||||
barWidth : 12,
|
||||
stack: 'search engine',
|
||||
data:[620, 732, 701, 734, 1090, 1130, 1120]
|
||||
},
|
||||
{
|
||||
name:'Safari',
|
||||
type:'bar',
|
||||
stack: 'search engine',
|
||||
data:[120, 132, 101, 134, 290, 230, 220]
|
||||
},
|
||||
{
|
||||
name:'Opera',
|
||||
type:'bar',
|
||||
stack: 'search engine',
|
||||
data:[60, 72, 71, 74, 190, 130, 110]
|
||||
},
|
||||
{
|
||||
name:'Firefox',
|
||||
type:'bar',
|
||||
stack: 'search engine',
|
||||
data:[62, 82, 91, 84, 109, 110, 120]
|
||||
}
|
||||
]
|
||||
// Add series
|
||||
|
||||
};
|
||||
stackedbarcolumnChart.setOption(option);
|
||||
|
||||
// ------------------------------
|
||||
// Basic line chart
|
||||
// ------------------------------
|
||||
// based on prepared DOM, initialize echarts instance
|
||||
var barbasicChart = echarts.init(document.getElementById('bar-basic'));
|
||||
|
||||
var option = {
|
||||
|
||||
// Setup grid
|
||||
grid: {
|
||||
x: 60,
|
||||
x2: 40,
|
||||
y: 45,
|
||||
y2: 25
|
||||
},
|
||||
|
||||
// Add tooltip
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
||||
// Add legend
|
||||
legend: {
|
||||
data: ['2017', '2018']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#2962FF', '#4fc3f7'],
|
||||
|
||||
// Horizontal axis
|
||||
xAxis: [{
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
}],
|
||||
|
||||
// Vertical axis
|
||||
yAxis: [{
|
||||
type: 'category',
|
||||
data: ['Apple', 'Samsung', 'HTC', 'Nokia', 'Sony', 'LG']
|
||||
}],
|
||||
|
||||
// Add series
|
||||
series : [
|
||||
{
|
||||
name:'2017',
|
||||
type:'bar',
|
||||
data:[600, 450, 350, 268, 474, 315]
|
||||
},
|
||||
{
|
||||
name:'2018',
|
||||
type:'bar',
|
||||
data:[780, 689, 468, 174, 436, 482]
|
||||
}
|
||||
]
|
||||
};
|
||||
// use configuration item and data specified to show chart
|
||||
barbasicChart.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
|
||||
myChart.resize();
|
||||
stackedChart.resize();
|
||||
stackedbarcolumnChart.resize();
|
||||
barbasicChart.resize();
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
});
|
||||
469
dist/js/pages/echarts/line/line-charts.js
vendored
Normal file
469
dist/js/pages/echarts/line/line-charts.js
vendored
Normal file
@@ -0,0 +1,469 @@
|
||||
$(function() {
|
||||
"use strict";
|
||||
// ------------------------------
|
||||
// Basic line chart
|
||||
// ------------------------------
|
||||
// based on prepared DOM, initialize echarts instance
|
||||
var myChart = echarts.init(document.getElementById('basic-line'));
|
||||
|
||||
// specify chart configuration item and data
|
||||
var option = {
|
||||
// Setup grid
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
// Add Tooltip
|
||||
tooltip : {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
||||
// Add Legend
|
||||
legend: {
|
||||
data:['Max temp','Min temp']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#2962FF', '#f62d51'],
|
||||
|
||||
// Enable drag recalculate
|
||||
calculable : true,
|
||||
|
||||
// Horizontal Axiz
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
boundaryGap : false,
|
||||
data : ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
|
||||
}
|
||||
],
|
||||
|
||||
// Vertical Axis
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
axisLabel : {
|
||||
formatter: '{value} °C'
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
// Add Series
|
||||
series : [
|
||||
{
|
||||
name:'Max temp',
|
||||
type:'line',
|
||||
data:[5, 15, 11, 15, 12, 13, 10],
|
||||
markPoint : {
|
||||
data : [
|
||||
{type : 'max', name: 'Max'},
|
||||
{type : 'min', name: 'Min'}
|
||||
]
|
||||
},
|
||||
markLine : {
|
||||
data : [
|
||||
{type : 'average', name: 'Average'}
|
||||
]
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
shadowColor: 'rgba(0,0,0,0.1)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 10
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name:'Min temp',
|
||||
type:'line',
|
||||
data:[1, -2, 2, 5, 3, 2, 0],
|
||||
markPoint : {
|
||||
data : [
|
||||
{name : 'Week low', value : -2, xAxis: 1, yAxis: -1.5}
|
||||
]
|
||||
},
|
||||
markLine : {
|
||||
data : [
|
||||
{type : 'average', name : 'Average'}
|
||||
]
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
shadowColor: 'rgba(0,0,0,0.1)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 10
|
||||
}
|
||||
},
|
||||
}
|
||||
]
|
||||
};
|
||||
// use configuration item and data specified to show chart
|
||||
myChart.setOption(option);
|
||||
|
||||
|
||||
// ------------------------------
|
||||
// Basic line chart
|
||||
// ------------------------------
|
||||
// based on prepared DOM, initialize echarts instance
|
||||
var bareaChart = echarts.init(document.getElementById('basic-area'));
|
||||
|
||||
// specify chart configuration item and data
|
||||
var option = {
|
||||
// Setup grid
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
|
||||
// Add Tooltip
|
||||
tooltip : {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
||||
// Add Legend
|
||||
legend: {
|
||||
data:['Max temp','Min temp']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#2962FF', '#4fc3f7'],
|
||||
|
||||
// Enable drag recalculate
|
||||
calculable : true,
|
||||
|
||||
// Horizontal Axiz
|
||||
xAxis : [
|
||||
{
|
||||
type : 'category',
|
||||
boundaryGap : false,
|
||||
data : ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
|
||||
}
|
||||
],
|
||||
|
||||
// Vertical Axis
|
||||
yAxis : [
|
||||
{
|
||||
type : 'value',
|
||||
axisLabel : {
|
||||
formatter: '{value} °C'
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
// Add Series
|
||||
series : [
|
||||
{
|
||||
name:'Max temp',
|
||||
type:'line',
|
||||
areaStyle: {},
|
||||
data:[5, 15, 11, 15, 12, 13, 10],
|
||||
markPoint : {
|
||||
data : [
|
||||
{type : 'max', name: 'Max'},
|
||||
{type : 'min', name: 'Min'}
|
||||
]
|
||||
},
|
||||
markLine : {
|
||||
data : [
|
||||
{type : 'average', name: 'Average'}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name:'Min temp',
|
||||
type:'line',
|
||||
areaStyle: {},
|
||||
data:[1, 8, 2, 5, 3, 2, 0],
|
||||
markPoint : {
|
||||
data : [
|
||||
{name : 'Week low', value : -2, xAxis: 1, yAxis: -1.5}
|
||||
]
|
||||
},
|
||||
markLine : {
|
||||
data : [
|
||||
{type : 'average', name : 'Average'}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// use configuration item and data specified to show chart
|
||||
bareaChart.setOption(option);
|
||||
|
||||
|
||||
//***************************
|
||||
// Stacked chart
|
||||
//***************************
|
||||
var stackedChart = echarts.init(document.getElementById('stacked-line'));
|
||||
var option = {
|
||||
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
// Add legend
|
||||
legend: {
|
||||
data: ['Elite admin', 'Monster admin', 'Ample admin', 'Material admin', 'Angular admin']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#2962FF', '#7460ee', '#f62d51', '#36bea6', '#212529'],
|
||||
|
||||
// Enable drag recalculate
|
||||
calculable: true,
|
||||
|
||||
// Hirozontal axis
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
|
||||
]
|
||||
}],
|
||||
|
||||
// Vertical axis
|
||||
yAxis: [{
|
||||
type: 'value'
|
||||
}],
|
||||
|
||||
// Add series
|
||||
series: [
|
||||
{
|
||||
name: 'Elite admin',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Monster admin',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Ample admin',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'Material admin',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Angular admin',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
// Add series
|
||||
|
||||
};
|
||||
stackedChart.setOption(option);
|
||||
|
||||
//***************************
|
||||
// Stacked Area chart
|
||||
//***************************
|
||||
var stackedareaChart = echarts.init(document.getElementById('stacked-area'));
|
||||
var option = {
|
||||
|
||||
grid: {
|
||||
left: '1%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
// Add legend
|
||||
legend: {
|
||||
data: ['Elite admin', 'Monster admin', 'Ample admin', 'Material admin', 'Angular admin']
|
||||
},
|
||||
|
||||
// Add custom colors
|
||||
color: ['#212529', '#7460ee', '#f62d51', '#36bea6','#2962FF' ],
|
||||
|
||||
// Enable drag recalculate
|
||||
calculable: true,
|
||||
|
||||
// Hirozontal axis
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
|
||||
]
|
||||
}],
|
||||
|
||||
// Vertical axis
|
||||
yAxis: [{
|
||||
type: 'value'
|
||||
}],
|
||||
|
||||
// Add series
|
||||
series: [
|
||||
{
|
||||
name: 'Elite admin',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
data: [120, 132, 101, 134, 90, 230, 210]
|
||||
},
|
||||
{
|
||||
name: 'Monster admin',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
data: [220, 182, 191, 234, 290, 330, 310]
|
||||
},
|
||||
{
|
||||
name: 'Ample admin',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
data: [150, 232, 201, 154, 190, 330, 410]
|
||||
},
|
||||
{
|
||||
name: 'Material admin',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
data: [320, 332, 301, 334, 390, 330, 320]
|
||||
},
|
||||
{
|
||||
name: 'Angular admin',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320]
|
||||
}
|
||||
]
|
||||
// Add series
|
||||
|
||||
};
|
||||
stackedareaChart.setOption(option);
|
||||
|
||||
// ------------------------------
|
||||
// Basic line chart
|
||||
// ------------------------------
|
||||
// based on prepared DOM, initialize echarts instance
|
||||
var gradiantChart = echarts.init(document.getElementById('g-line'));
|
||||
|
||||
// specify chart configuration item and data
|
||||
var data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];
|
||||
|
||||
var dateList = data.map(function (item) {
|
||||
return item[0];
|
||||
});
|
||||
var valueList = data.map(function (item) {
|
||||
return item[1];
|
||||
});
|
||||
|
||||
var option = {
|
||||
|
||||
// Make gradient line here
|
||||
visualMap: [{
|
||||
show: false,
|
||||
type: 'continuous',
|
||||
seriesIndex: 0,
|
||||
min: 0,
|
||||
max: 400
|
||||
}, {
|
||||
show: false,
|
||||
type: 'continuous',
|
||||
seriesIndex: 1,
|
||||
dimension: 0,
|
||||
min: 0,
|
||||
max: dateList.length - 1
|
||||
}],
|
||||
|
||||
|
||||
title: [{
|
||||
left: 'center',
|
||||
text: 'Gradient along the y axis'
|
||||
}, {
|
||||
top: '55%',
|
||||
left: 'center',
|
||||
text: 'Gradient along the x axis'
|
||||
}],
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
|
||||
xAxis: [{
|
||||
data: dateList
|
||||
}, {
|
||||
data: dateList,
|
||||
gridIndex: 1
|
||||
}],
|
||||
yAxis: [{
|
||||
splitLine: {show: false}
|
||||
}, {
|
||||
splitLine: {show: false},
|
||||
gridIndex: 1
|
||||
}],
|
||||
grid: [{
|
||||
bottom: '60%',
|
||||
left:'3%',
|
||||
right:'3%'
|
||||
}, {
|
||||
top: '60%',
|
||||
left:'3%',
|
||||
right:'3%'
|
||||
}],
|
||||
|
||||
series: [{
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: valueList
|
||||
}, {
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
data: valueList,
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1
|
||||
}]
|
||||
};
|
||||
// use configuration item and data specified to show chart
|
||||
gradiantChart.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
|
||||
myChart.resize();
|
||||
bareaChart.resize();
|
||||
stackedChart.resize();
|
||||
stackedareaChart.resize();
|
||||
gradiantChart.resize();
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
});
|
||||
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