$(document).ready(function() {
// Chart in Dashboard version 1
let echartElemBar = document.getElementById('echartBar');
if (echartElemBar) {
let echartBar = echarts.init(echartElemBar);
echartBar.setOption({
legend: {
borderRadius: 0,
orient: 'horizontal',
x: 'right',
data: ['Online', 'Offline']
},
grid: {
left: '8px',
right: '8px',
bottom: '0',
containLabel: true
},
tooltip: {
show: true,
backgroundColor: 'rgba(0, 0, 0, .8)'
},
xAxis: [{
type: 'category',
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
axisTick: {
alignWithLabel: true
},
splitLine: {
show: false
},
axisLine: {
show: true
}
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: '${value}'
},
min: 0,
max: 100000,
interval: 25000,
axisLine: {
show: false
},
splitLine: {
show: true,
interval: 'auto'
}
}
],
series: [{
name: 'Online',
data: [35000, 69000, 22500, 60000, 50000, 50000, 30000, 80000, 70000, 60000, 20000, 30005],
label: { show: false, color: '#0168c1' },
type: 'bar',
barGap: 0,
color: '#bcbbdd',
smooth: true,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: -2,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
}
},
{
name: 'Offline',
data: [45000, 82000, 35000, 93000, 71000, 89000, 49000, 91000, 80200, 86000, 35000, 40050],
label: { show: false, color: '#639' },
type: 'bar',
color: '#7569b3',
smooth: true,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: -2,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
}
}
]
});
$(window).on('resize', function() {
setTimeout(() => {
echartBar.resize();
}, 500);
});
}
// Chart in Dashboard version 1
let echartElemPie = document.getElementById('echartPie');
if (echartElemPie) {
let echartPie = echarts.init(echartElemPie);
echartPie.setOption({
color: ['#62549c', '#7566b5', '#7d6cbb', '#8877bd', '#9181bd', '#6957af'],
tooltip: {
show: true,
backgroundColor: 'rgba(0, 0, 0, .8)'
},
series: [{
name: 'Sales by Country',
type: 'pie',
radius: '60%',
center: ['50%', '50%'],
data: [
{ value: 535, name: 'USA' },
{ value: 310, name: 'Brazil' },
{ value: 234, name: 'France' },
{ value: 155, name: 'BD' },
{ value: 130, name: 'UK' },
{ value: 348, name: 'India' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
$(window).on('resize', function() {
setTimeout(() => {
echartPie.resize();
}, 500);
});
}
// line charts
// ================= Basic Line ================
let basicLineElem = document.getElementById('basicLine');
if (basicLineElem) {
let basicLine = echarts.init(basicLineElem);
basicLine.setOption({
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'line',
animation: true
}
},
grid: {
top: '10%',
left: '40',
right: '40',
bottom: '40'
},
xAxis: {
type: 'category',
data: ['1/11/2018', '2/11/2018', '3/11/2018', '4/11/2018', '5/11/2018', '6/11/2018', '7/11/2018', '8/11/2018', '9/11/2018', '10/11/2018', '11/11/2018', '12/11/2018', '13/11/2018', '14/11/2018', '15/11/2018', '16/11/2018', '17/11/2018', '18/11/2018', '19/11/2018', '20/11/2018', '21/11/2018', '22/11/2018', '23/11/2018', '24/11/2018', '25/11/2018', '26/11/2018', '27/11/2018', '28/11/2018', '29/11/2018', '30/11/2018'],
axisLine: {
show: false
},
axisLabel: {
show: true
},
axisTick: {
show: false
}
},
yAxis: {
type: 'value',
axisLine: {
show: false
},
axisLabel: {
show: true
},
axisTick: {
show: false
},
splitLine: {
show: true
}
},
series: [{
data: [400, 800, 325, 900, 700, 800, 400, 900, 800, 800, 300, 405, 500, 1100, 900, 1450, 1200, 1350, 1200, 1400, 1000, 800, 950, 705, 690, 921, 1020, 903, 852, 630],
type: 'line',
showSymbol: true,
smooth: true,
color: '#639',
lineStyle: {
opacity: 1,
width: 2,
},
},
// {
// data: [100, 400, 225, 800, 550, 860, 300, 400, 1200, 200, 1300, 1405, 900, 500, 1100, 850, 1200, 1150, 1200, 500, 800, 400, 750, 905, 690, 921, 1020, 903, 852, 630],
// type: 'line',
// showSymbol: true,
// smooth: true,
// lineStyle: {
// opacity: 1,
// width: 2,
// },
// }
]
});
$(window).on('resize', function() {
setTimeout(() => {
basicLine.resize();
}, 500);
});
}
// ================= Multi Line ================
let multiLineElem = document.getElementById('multiLine');
if (multiLineElem) {
let multiLine = echarts.init(multiLineElem);
multiLine.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
top: '10%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
boundaryGap: false,
axisLabel: {
color: '#999'
},
axisLine: {
color: '#999',
lineStyle: {
color: '#999999'
}
}
},
yAxis: {
type: 'value',
min: 65,
max: 110,
axisLine: {
show: false
},
axisTick: {
show: false
},
},
series: [{
name: 'Alpha',
data: [70, 65, 85, 75, 95, 86, 93],
type: 'line',
smooth: true,
symbolSize: 8,
lineStyle: {
color: '#ff5721',
opacity: 1,
width: 1.5,
},
itemStyle: {
color: '#fff',
borderColor: '#ff5721',
borderWidth: 1.5
}
},
{
name: 'Beta',
data: [80, 90, 75, 104, 75, 80, 70],
type: 'line',
smooth: true,
symbolSize: 8,
lineStyle: {
color: '#5f6cc1',
opacity: 1,
width: 1.5,
},
itemStyle: {
color: '#fff',
borderColor: '#5f6cc1',
borderWidth: 1.5
}
},
{
name: 'Gama',
data: [110, 95, 102, 90, 105, 95, 108],
type: 'line',
smooth: true,
symbolSize: 10,
lineStyle: {
color: '#4cae50',
opacity: 1,
width: 1.5,
},
itemStyle: {
color: '#fff',
borderColor: '#4cae50',
borderWidth: 1.5
}
}
]
});
$(window).on('resize', function() {
setTimeout(() => {
multiLine.resize();
}, 500);
});
}
// ================= Basic bar ================
let basicBarElem = document.getElementById('basicBar');
if (basicBarElem) {
let basicBar = echarts.init(basicBarElem);
basicBar.setOption({
grid: {
show: false,
top: 5,
left: 0,
right: 0,
bottom: 0
},
color: ['#5f6bc2'],
tooltip: {
show: true,
backgroundColor: 'rgba(0, 0, 0, 0.8)'
},
xAxis: [{
type: 'category',
axisTick: {
alignWithLabel: true
},
splitLine: {
show: false
},
axisLine: {
show: false
}
}],
yAxis: [{
type: 'value',
label: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
}
}],
series: [{
data: [400, 800, 325, 900, 700, 800, 400, 900, 800, 800, 300, 405, 500, 1100, 900, 1450, 1200, 1350, 1200, 1400, 1000, 800, 950, 705, 690, 921, 1020, 903, 852, 630],
label: {
show: false,
color: '#0168c1'
},
type: 'bar',
barWidth: '70%',
smooth: true
}]
});
$(window).on('resize', function() {
setTimeout(() => {
basicBar.resize();
}, 500);
});
}
// ================= Multiple bar ================
let multipleBarElem = document.getElementById('multipleBar');
if (multipleBarElem) {
let multipleBar = echarts.init(multipleBarElem);
multipleBar.setOption({
grid: {
show: false,
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
borderRadius: 0,
orient: 'horizontal',
x: 'right',
data: ['Online', 'Offline']
},
tooltip: {
show: true,
backgroundColor: 'rgba(0, 0, 0, 0.8)'
},
xAxis: [{
type: 'category',
axisLabel: {
color: '#444'
},
axisTick: {
alignWithLabel: true,
lineStyle: {
color: '#aaa'
},
color: '#eee'
},
splitLine: {
show: false
},
axisLine: {
show: true,
lineStyle: {
color: '#aaa'
}
}
}],
yAxis: [{
type: 'value',
axisLabel: {
formatter: '${value}'
},
min: 0,
max: 100000,
interval: 25000,
axisLine: {
show: false
},
splitLine: {
show: true,
interval: 'auto'
},
axisTick: {
show: false,
color: '#eee'
},
}
],
series: [{
name: 'Series 1',
data: [35000, 69000, 22500, 60000, 50000, 50000, 30000, 80000, 70000, 60000, 20000, 30005],
label: {
show: false,
color: '#0168c1'
},
type: 'bar',
barGap: 0,
smooth: true
},
{
name: 'Series 2',
data: [45000, 82000, 35000, 93000, 71000, 89000, 49000, 91000, 80200, 86000, 35000, 40050],
label: {
show: false,
color: '#0168c1'
},
type: 'bar',
smooth: true
}
]
});
$(window).on('resize', function() {
setTimeout(() => {
multipleBar.resize();
}, 500);
});
}
// ================= Multiple bar 2 ================
let multipleBar2Elem = document.getElementById('multipleBar2');
if (multipleBar2Elem) {
let multipleBar2 = echarts.init(multipleBar2Elem);
multipleBar2.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '8%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
yAxis: {
type: 'value',
min: 0,
max: 500,
interval: 100,
axisLabel: {
formatter: '{value}k',
color: '#333',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 400
},
axisLine: {
show: false,
lineStyle: {
color: '#ccc',
width: 1
}
},
axisTick: {
show: false,
lineStyle: {
color: '#ccc',
width: 1
}
},
splitLine: {
lineStyle: {
color: '#ddd',
width: 1,
opacity: 0.5
}
}
},
xAxis: {
type: 'category',
boundaryGap: true,
data: [
'Dec, 1', 'Dec, 2', 'Dec, 3', 'Dec, 4', 'Dec, 5', 'Dec, 6', 'Dec, 7'
],
axisLabel: {
formatter: '{value}',
color: '#333',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 400,
},
axisLine: {
show: false,
lineStyle: {
color: '#ccc',
width: 1
}
},
axisTick: {
show: false,
lineStyle: {
color: '#ccc',
width: 1
}
},
splitLine: {
show: false,
lineStyle: {
color: '#ccc',
width: 1
}
}
},
series: [{
color: '#3182bd',
name: 'Campaign',
type: 'bar',
barGap: 0,
label: {
normal: {
show: false,
position: 'insideBottom',
distance: 5,
align: 'left',
verticalAlign: 'middle',
rotate: 90,
formatter: '{c} {name|{a}}',
fontSize: 14,
fontWeight: 'bold',
rich: {
name: {
color: '#fff',
}
}
}
},
data: [320, 332, 301, 334, 390, 350, 215]
},
{
color: '#74c475',
name: 'Steppe',
type: 'bar',
label: {
normal: {
show: false,
position: 'insideBottom',
distance: 5,
align: 'left',
verticalAlign: 'middle',
rotate: 90,
formatter: '{c} {name|{a}}',
fontSize: 14,
fontWeight: 'bold',
rich: {
name: {
color: '#fff',
}
}
}
},
data: [220, 182, 191, 234, 290, 190, 210]
},
{
color: '#e6550d',
name: 'Desert',
type: 'bar',
label: {
normal: {
show: false,
position: 'insideBottom',
distance: 5,
align: 'left',
verticalAlign: 'middle',
rotate: 90,
formatter: '{c} {name|{a}}',
fontSize: 14,
fontWeight: 'bold',
rich: {
name: {
color: '#fff',
}
}
}
},
data: [150, 232, 201, 154, 190, 150, 130]
},
{
color: '#756bb1',
name: 'Wetland',
type: 'bar',
label: {
normal: {
show: false,
position: 'insideBottom',
distance: 5,
align: 'left',
verticalAlign: 'middle',
rotate: 90,
formatter: '{c} {name|{a}}',
fontSize: 14,
fontWeight: 'bold',
rich: {
name: {
color: '#fff',
}
}
}
},
data: [98, 77, 101, 99, 40, 30, 50]
}
]
});
$(window).on('resize', function() {
setTimeout(() => {
multipleBar2.resize();
}, 500);
});
}
// ================= Bar Zoom ================
let zoomBarElem = document.getElementById('zoomBar');
if (zoomBarElem) {
let zoomBar = echarts.init(zoomBarElem);
zoomBar.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
opacity: 0
}
}
},
grid: {
top: '8%',
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
axisLabel: {
inside: true,
textStyle: {
color: '#fff'
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
},
yAxis: {
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: '#999'
}
},
splitLine: {
show: false
}
},
dataZoom: [{
type: 'inside'
}],
series: [{ // For shadow
name: 'Interested',
type: 'bar',
itemStyle: {
normal: {
color: 'rgba(0,0,0,0.05)'
}
},
barGap: '-100%',
barCategoryGap: '40%',
data: [500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500, 500],
animation: false
},
{
name: 'Going',
type: 'bar',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#83bff6'
},
{
offset: 0.5,
color: '#188df0'
},
{
offset: 1,
color: '#188df0'
}
]
)
},
emphasis: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#2378f7'
},
{
offset: 0.7,
color: '#2378f7'
},
{
offset: 1,
color: '#83bff6'
}
]
)
}
},
data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123, 125, 220, 220, 182, 191, 234, 290, 330, 310, 123, 442, 212]
}
]
});
$(window).on('resize', function() {
setTimeout(() => {
zoomBar.resize();
}, 500);
});
}
// ================= Basic dounut chart ================
let basicDoughnutElem = document.getElementById('basicDoughnut');
if (basicDoughnutElem) {
let basicDoughnut = echarts.init(basicDoughnutElem);
basicDoughnut.setOption({
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
color: ['#c13018', '#f36e12', '#ebcb37', '#a1b968', '#0d94bc', '#135bba'],
tooltip: {
show: false,
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
xAxis: [{
axisLine: {
show: false
},
splitLine: {
show: false
}
}
],
yAxis: [{
axisLine: {
show: false
},
splitLine: {
show: false
}
}
],
series: [{
name: 'Sessions',
type: 'pie',
radius: ['50%', '85%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
hoverOffset: 5,
label: {
normal: {
show: false,
position: 'center',
textStyle: {
fontSize: '13',
fontWeight: 'normal'
},
formatter: "{a}",
},
emphasis: {
show: true,
textStyle: {
fontSize: '15',
fontWeight: 'bold'
},
formatter: "{b} \n{c} ({d}%)",
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 335, name: 'Organic' },
{ value: 310, name: 'Search Eng.' },
{ value: 234, name: 'Email' },
{ value: 135, name: 'Referal' },
{ value: 148, name: 'Social' },
{ value: 548, name: 'Others' }
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
$(window).on('resize', function() {
setTimeout(() => {
basicDoughnut.resize();
}, 500);
});
}
// BASIC Area Charts
let basicAreaElem = document.getElementById('basicArea');
if (basicAreaElem) {
let basicArea = echarts.init(basicAreaElem);
basicArea.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
animation: true
}
},
grid: {
left: '4%',
top: '4%',
right: '3%',
bottom: '10%'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct',
'Nov', 'Dec'
],
axisLabel: {
formatter: '{value}',
color: '#666',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 400,
},
axisLine: {
lineStyle: {
color: '#ccc',
width: 1
}
},
axisTick: {
lineStyle: {
color: '#ccc',
width: 1
}
},
splitLine: {
show: false,
lineStyle: {
color: '#ccc',
width: 1
}
}
},
yAxis: {
type: 'value',
min: 0,
max: 200,
interval: 50,
axisLabel: {
formatter: '{value}k',
color: '#666',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 400,
},
axisLine: {
lineStyle: {
color: '#ccc',
width: 1
}
},
axisTick: {
lineStyle: {
color: '#ccc',
width: 1
}
},
splitLine: {
lineStyle: {
color: '#ddd',
width: 1,
opacity: 0.5
}
}
},
series: [{
name: 'Visit',
type: 'line',
smooth: true,
data: [140, 135, 95, 115, 95, 126, 93, 145, 115,
140, 135, 95, 115, 95, 126, 125, 145, 115, 140,
135, 95, 115, 95, 126, 93, 145, 115, 140, 135, 95
],
symbolSize: 8,
showSymbol: false,
lineStyle: {
color: 'rgb(255, 87, 33)',
opacity: 1,
width: 1.5,
},
itemStyle: {
show: false,
color: '#ff5721',
borderColor: '#ff5721',
borderWidth: 1.5
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(255, 87, 33, 1)'
}, {
offset: 0.3,
color: 'rgba(255, 87, 33, 0.7)'
}, {
offset: 1,
color: 'rgba(255, 87, 33, 0)'
}]
}
}
}
}]
});
$(window).on('resize', function() {
setTimeout(() => {
basicArea.resize();
}, 500);
});
}
// STACKED
let stackedAreaElem = document.getElementById('stackedArea');
if (stackedAreaElem) {
let stackedArea = echarts.init(stackedAreaElem);
stackedArea.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
animation: true
}
},
grid: {
left: '4%',
top: '4%',
right: '3%',
bottom: '10%'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct',
'Nov', 'Dec'
],
axisLabel: {
formatter: '{value}',
color: '#666',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 400,
},
axisLine: {
lineStyle: {
color: '#ccc',
width: 1
}
},
axisTick: {
lineStyle: {
color: '#ccc',
width: 1
}
},
splitLine: {
show: false,
lineStyle: {
color: '#ccc',
width: 1
}
}
},
yAxis: {
type: 'value',
min: 0,
max: 200,
interval: 50,
axisLabel: {
formatter: '{value}k',
color: '#666',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 400,
},
axisLine: {
lineStyle: {
color: '#ccc',
width: 1
}
},
axisTick: {
lineStyle: {
color: '#ccc',
width: 1
}
},
splitLine: {
lineStyle: {
color: '#ddd',
width: 1,
opacity: 0.5
}
}
},
series: [{
name: 'Visit',
type: 'line',
smooth: true,
data: [140, 135, 95, 115, 95, 126, 93, 145, 115,
140, 135, 95, 115, 95, 126, 125, 145, 115, 140,
135, 95, 115, 95, 126, 93, 145, 115, 140, 135, 95
],
symbolSize: 8,
showSymbol: false,
lineStyle: {
color: 'rgb(255, 87, 33)',
opacity: 1,
width: 1.5,
},
itemStyle: {
show: false,
color: '#ff5721',
borderColor: '#ff5721',
borderWidth: 1.5
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(255, 87, 33, 1)'
}, {
offset: 0.3,
color: 'rgba(255, 87, 33, 0.7)'
}, {
offset: 1,
color: 'rgba(255, 87, 33, 0)'
}]
}
}
}
},
{
name: 'Sales',
type: 'line',
smooth: true,
data: [50, 70, 65, 84, 75, 80, 70, 50, 70, 65,
104, 75, 80, 70, 50, 70, 65, 94, 75, 80, 70, 50,
70, 65, 86, 75, 80, 70, 50, 70
],
symbolSize: 8,
showSymbol: false,
lineStyle: {
color: 'rgb(95, 107, 194)',
opacity: 1,
width: 1.5,
},
itemStyle: {
color: '#5f6cc1',
borderColor: '#5f6cc1',
borderWidth: 1.5
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(95, 107, 194, 1)'
}, {
offset: 0.5,
color: 'rgba(95, 107, 194, 0.7)'
}, {
offset: 1,
color: 'rgba(95, 107, 194, 0)'
}]
}
}
}
},
]
});
$(window).on('resize', function() {
setTimeout(() => {
stackedArea.resize();
}, 500);
});
}
// STACKED POINTER
let stackedPointerAreaElem = document.getElementById('stackedPointerArea');
if (stackedPointerAreaElem) {
let stackedPointerArea = echarts.init(stackedPointerAreaElem);
stackedPointerArea.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
animation: true
}
},
grid: {
left: '4%',
top: '4%',
right: '3%',
bottom: '10%'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [
'1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
'11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
'21', '22', '23', '24', '25', '26', '27', '28', '29', '30'
],
axisLabel: {
formatter: '{value}',
color: '#666',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 400,
},
axisLine: {
lineStyle: {
color: '#ccc',
width: 1
}
},
axisTick: {
lineStyle: {
color: '#ccc',
width: 1
}
},
splitLine: {
show: false,
lineStyle: {
color: '#ccc',
width: 1
}
}
},
yAxis: {
type: 'value',
min: 0,
max: 200,
interval: 50,
axisLabel: {
formatter: '{value}k',
color: '#666',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 400,
},
axisLine: {
lineStyle: {
color: '#ccc',
width: 1
}
},
axisTick: {
lineStyle: {
color: '#ccc',
width: 1
}
},
splitLine: {
lineStyle: {
color: '#ddd',
width: 1,
opacity: 0.5
}
}
},
series: [{
name: 'Impression',
type: 'line',
smooth: true,
data: [140, 135, 95, 115, 95, 126, 93, 145, 115,
140, 135, 95, 115, 95, 126, 125, 145, 115, 140,
135, 95, 115, 95, 126, 93, 145, 115, 140, 135, 95
],
symbolSize: 8,
lineStyle: {
color: 'rgb(255, 87, 33)',
opacity: 1,
width: 1.5,
},
itemStyle: {
color: '#ff5721',
borderColor: '#ff5721',
borderWidth: 1.5
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(255, 87, 33, 1)'
}, {
offset: 0.3,
color: 'rgba(255, 87, 33, 0.7)'
}, {
offset: 1,
color: 'rgba(255, 87, 33, 0)'
}]
}
}
}
},
{
name: 'Clicks',
type: 'line',
smooth: true,
data: [50, 70, 65, 84, 75, 80, 70, 50, 70, 65,
104, 75, 80, 70, 50, 70, 65, 94, 75, 80, 70, 50,
70, 65, 86, 75, 80, 70, 50, 70
],
symbolSize: 8,
lineStyle: {
color: 'rgb(95, 107, 194)',
opacity: 1,
width: 1.5,
},
itemStyle: {
color: '#5f6cc1',
borderColor: '#5f6cc1',
borderWidth: 1.5
},
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(95, 107, 194, 1)'
}, {
offset: 0.5,
color: 'rgba(95, 107, 194, 0.7)'
}, {
offset: 1,
color: 'rgba(95, 107, 194, 0)'
}]
}
}
}
},
]
});
$(window).on('resize', function() {
setTimeout(() => {
stackedPointerArea.resize();
}, 500);
});
}
// SOLID AREA
let solidAreaElem = document.getElementById('solidArea');
if (solidAreaElem) {
let solidArea = echarts.init(solidAreaElem);
solidArea.setOption({
tooltip: {
show: true,
trigger: 'axis'
},
grid: {
top: '3%',
left: '1%',
right: '1%',
bottom: '3%',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['1 Dec', '2 Dec', '3 Dec', '4 Dec', '5 Dec', '6 Dec', '7 Dec', '8 Dec', '9 Dec', '10 Dec', '11 Dec', '12 Dec', '13 Dec', '14 Dec', '15 Dec', '16 Dec', '17 Dec', '18 Dec', '19 Dec', '20 Dec', '21 Dec', '22 Dec', '23 Dec', '24 Dec', '25 Dec', '26 Dec', '27 Dec', '28 Dec', '29 Dec', '30 Dec', '31 Dec'],
axisLabel: {
show: true,
color: '#639',
interval: 5,
inside: false,
align: 'center'
},
axisLine: {
color: '#999',
lineStyle: {
color: '#999'
}
},
axisTick: {
interval: 0,
lineStyle: {
color: '#999'
}
}
},
yAxis: {
type: 'value',
min: 0,
max: 7,
interval: 5,
axisLabel: {
show: false
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
series: [{
type: 'line',
data: [3, 2, 3, 2, 3, 2, 3, 2, 1, 2, 1, 2, 1, 3, 1, 3, 1, 2, 1, 2, 3, 1, 2, 3, 2, 1, 2, 3, 1, 2, 4],
smooth: true,
showSymbol: false,
itemStyle: {
borderColor: '#639',
color: ['#639']
},
lineStyle: {
opacity: 1,
width: 1,
color: ['#639']
},
areaStyle: {
opacity: 1,
color: ['#639']
}
}]
});
$(window).on('resize', function() {
setTimeout(() => {
solidArea.resize();
}, 500);
});
}
// ================= Basic Pie ================
let basicPieElem = document.getElementById('basicPie');
if (basicPieElem) {
let basicPie = echarts.init(basicPieElem);
basicPie.setOption({
color: ['#c13018', '#f36d12', '#ebcb37', '#a0b967', '#0d94bc', '#04a9f4'],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
axisLine: {
show: false
},
splitLine: {
show: false
}
}],
yAxis: [{
axisLine: {
show: false
},
splitLine: {
show: false
}
}],
series: [{
name: 'Sales by Countries',
type: 'pie',
radius: '75%',
center: ['50%', '50%'],
data: [{
value: 335,
name: 'USA'
},
{
value: 310,
name: 'CANADA'
},
{
value: 234,
name: 'MEXICO'
},
{
value: 135,
name: 'UK'
},
{
value: 148,
name: 'AUSTRALIA'
},
{
value: 548,
name: 'INDIA'
}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
$(window).on('resize', function() {
setTimeout(() => {
basicPie.resize();
}, 500);
});
}
// ================= Stacked ================
let stackedPieElem = document.getElementById('stackedPie');
if (stackedPieElem) {
let stackedPie = echarts.init(stackedPieElem);
stackedPie.setOption({
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
color: ['#639', '#63845', '#ebcb37', '#a1b968', '#0d94bc', '#135bba'],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [{
name: 'Source',
type: 'pie',
radius: '85%',
center: ['50%', '50%'],
data: [{
value: 335,
name: 'Direct Interview'
},
{
value: 310,
name: 'Email Marketing'
},
{
value: 274,
name: 'Alliance advertising'
},
{
value: 235,
name: 'Video Ads'
},
{
value: 400,
name: 'Search Engine'
}
].sort(function(a, b) {
return a.value - b.value;
}),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: '#333'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: '#333'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: 'rgb(102, 51, 153)',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.0)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function(idx) {
return Math.random() * 200;
}
}]
});
$(window).on('resize', function() {
setTimeout(() => {
stackedPie.resize();
}, 500);
});
}
// buuble charts
let bubbleChartElem = document.getElementById('bubbleChart');
if (bubbleChartElem) {
let bubbleChart = echarts.init(bubbleChartElem);
var data = [
[
[28604, 77, 17096869, 'Australia', 1990],
[31163, 77.4, 27662440, 'Canada', 1990],
[1516, 68, 1154605773, 'China', 1990],
[13670, 74.7, 10582082, 'Cuba', 1990],
[28599, 75, 4986705, 'Finland', 1990],
[29476, 77.1, 56943299, 'France', 1990],
[31476, 75.4, 78958237, 'Germany', 1990],
[28666, 78.1, 254830, 'Iceland', 1990],
[1777, 57.7, 870601776, 'India', 1990],
[29550, 79.1, 122249285, 'Japan', 1990],
[2076, 67.9, 20194354, 'North Korea', 1990],
[12087, 72, 42972254, 'South Korea', 1990],
[24021, 75.4, 3397534, 'New Zealand', 1990],
[43296, 76.8, 4240375, 'Norway', 1990],
[10088, 70.8, 38195258, 'Poland', 1990],
[19349, 69.6, 147568552, 'Russia', 1990],
[10670, 67.3, 53994605, 'Turkey', 1990],
[26424, 75.7, 57110117, 'United Kingdom', 1990],
[37062, 75.4, 252847810, 'United States', 1990]
],
[
[44056, 81.8, 23968973, 'Australia', 2015],
[43294, 81.7, 35939927, 'Canada', 2015],
[13334, 76.9, 1376048943, 'China', 2015],
[21291, 78.5, 11389562, 'Cuba', 2015],
[38923, 80.8, 5503457, 'Finland', 2015],
[37599, 81.9, 64395345, 'France', 2015],
[44053, 81.1, 80688545, 'Germany', 2015],
[42182, 82.8, 329425, 'Iceland', 2015],
[5903, 66.8, 1311050527, 'India', 2015],
[36162, 83.5, 126573481, 'Japan', 2015],
[1390, 71.4, 25155317, 'North Korea', 2015],
[34644, 80.7, 50293439, 'South Korea', 2015],
[34186, 80.6, 4528526, 'New Zealand', 2015],
[64304, 81.6, 5210967, 'Norway', 2015],
[24787, 77.3, 38611794, 'Poland', 2015],
[23038, 73.13, 143456918, 'Russia', 2015],
[19360, 76.5, 78665830, 'Turkey', 2015],
[38225, 81.4, 64715810, 'United Kingdom', 2015],
[53354, 79.1, 321773631, 'United States', 2015]
]
];
bubbleChart.setOption({
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
// backgroundColor: new echarts.graphic.RadialGradient(255, 255, 255, [{
// offset: 0,
// color: '#f7f8fa'
// }, {
// offset: 1,
// color: '#cdd0d5'
// }]),
title: {
text: 'Life expectancy and GDP of families in 1990 and 2015'
},
legend: {
right: 10,
data: ['1990', '2015']
},
xAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true
},
series: [{
name: '1990',
data: data[0],
type: 'scatter',
symbolSize: function(data) {
return Math.sqrt(data[2]) / 5e2;
},
label: {
emphasis: {
show: true,
formatter: function(param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(251, 118, 123)'
}, {
offset: 1,
color: 'rgb(204, 46, 72)'
}])
}
}
}, {
name: '2015',
data: data[1],
type: 'scatter',
symbolSize: function(data) {
return Math.sqrt(data[2]) / 5e2;
},
label: {
emphasis: {
show: true,
formatter: function(param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: 'rgb(129, 227, 238)'
}, {
offset: 1,
color: 'rgb(25, 183, 207)'
}])
}
}
}]
});
$(window).on('resize', function() {
setTimeout(() => {
bubbleChart.resize();
}, 500);
});
}
// gauge charts
let gaugeChartElem = document.getElementById('gaugeChart');
if (gaugeChartElem) {
let gaugeChart = echarts.init(gaugeChartElem);
var option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
tooltip: {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
// feature: {
// restore: {},
// saveAsImage: {}
// }
},
series: [{
name: 'Business indicator',
type: 'gauge',
detail: {
formatter: '{value}%'
},
data: [{
value: 50,
name: 'Completion rate'
}]
}]
};
gaugeChart.setOption({
option
});
setInterval(function() {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
gaugeChart.setOption(option, true);
}, 2000);
$(window).on('resize', function() {
setTimeout(() => {
gaugeChart.resize();
}, 500);
});
}
// dummy charts
// let dummyChartElem = document.getElementById('dummyChart');
// if (dummyChartElem) {
// let dummyChart = echarts.init(dummyChartElem);
// dummyChart.setOption({
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
// });
// $(window).on('resize', function() {
// setTimeout(() => {
// dummyChart.resize();
// }, 500);
// });
// }
});