589 lines
17 KiB
JavaScript
589 lines
17 KiB
JavaScript
// ==============================================================
|
||
// Bar chart option
|
||
// ==============================================================
|
||
var myChart = echarts.init(document.getElementById('bar-chart'));
|
||
|
||
// specify chart configuration item and data
|
||
option = {
|
||
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: ["#55ce63", "#009efb"],
|
||
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, true), $(function() {
|
||
function resize() {
|
||
setTimeout(function() {
|
||
myChart.resize()
|
||
}, 100)
|
||
}
|
||
$(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
|
||
});
|
||
|
||
// ==============================================================
|
||
// Line chart
|
||
// ==============================================================
|
||
var dom = document.getElementById("main");
|
||
var mytempChart = echarts.init(dom);
|
||
var app = {};
|
||
option = null;
|
||
option = {
|
||
|
||
tooltip : {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data:['max temp','min temp']
|
||
},
|
||
toolbox: {
|
||
show : true,
|
||
feature : {
|
||
magicType : {show: true, type: ['line', 'bar']},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
color: ["#55ce63", "#009efb"],
|
||
calculable : true,
|
||
xAxis : [
|
||
{
|
||
type : 'category',
|
||
|
||
boundaryGap : false,
|
||
data : ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
|
||
}
|
||
],
|
||
yAxis : [
|
||
{
|
||
type : 'value',
|
||
axisLabel : {
|
||
formatter: '{value} °C'
|
||
}
|
||
}
|
||
],
|
||
|
||
series : [
|
||
{
|
||
name:'max temp',
|
||
type:'line',
|
||
color:['#000'],
|
||
data:[11, 11, 15, 13, 12, 13, 10],
|
||
markPoint : {
|
||
data : [
|
||
{type : 'max', name: 'Max'},
|
||
{type : 'min', name: 'Min'}
|
||
]
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
shadowColor : 'rgba(0,0,0,0.3)',
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 8,
|
||
shadowOffsetY: 8
|
||
}
|
||
}
|
||
},
|
||
markLine : {
|
||
data : [
|
||
{type : 'average', name: 'Average'}
|
||
]
|
||
}
|
||
},
|
||
{
|
||
name:'min temp',
|
||
type:'line',
|
||
data:[1, -2, 2, 5, 3, 2, 0],
|
||
markPoint : {
|
||
data : [
|
||
{name : 'Week minimum', value : -2, xAxis: 1, yAxis: -1.5}
|
||
]
|
||
},
|
||
itemStyle: {
|
||
normal: {
|
||
lineStyle: {
|
||
shadowColor : 'rgba(0,0,0,0.3)',
|
||
shadowBlur: 10,
|
||
shadowOffsetX: 8,
|
||
shadowOffsetY: 8
|
||
}
|
||
}
|
||
},
|
||
markLine : {
|
||
data : [
|
||
{type : 'average', name : 'Average'}
|
||
]
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
if (option && typeof option === "object") {
|
||
mytempChart.setOption(option, true), $(function() {
|
||
function resize() {
|
||
setTimeout(function() {
|
||
mytempChart.resize()
|
||
}, 100)
|
||
}
|
||
$(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
|
||
});
|
||
}
|
||
|
||
// ==============================================================
|
||
// Pie chart option
|
||
// ==============================================================
|
||
var pieChart = echarts.init(document.getElementById('pie-chart'));
|
||
|
||
// specify chart configuration item and data
|
||
option = {
|
||
|
||
tooltip : {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
x : 'center',
|
||
y : 'bottom',
|
||
data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
|
||
},
|
||
toolbox: {
|
||
show : true,
|
||
feature : {
|
||
|
||
dataView : {show: true, readOnly: false},
|
||
magicType : {
|
||
show: true,
|
||
type: ['pie', 'funnel']
|
||
},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
color: ["#f62d51", "#dddddd","#ffbc34", "#7460ee","#009efb", "#2f3d4a","#90a4ae", "#55ce63"],
|
||
calculable : true,
|
||
series : [
|
||
{
|
||
name:'Radius mode',
|
||
type:'pie',
|
||
radius : [20, 110],
|
||
center : ['25%', 200],
|
||
roseType : 'radius',
|
||
width: '40%', // for funnel
|
||
max: 40, // for funnel
|
||
itemStyle : {
|
||
normal : {
|
||
label : {
|
||
show : false
|
||
},
|
||
labelLine : {
|
||
show : false
|
||
}
|
||
},
|
||
emphasis : {
|
||
label : {
|
||
show : true
|
||
},
|
||
labelLine : {
|
||
show : true
|
||
}
|
||
}
|
||
},
|
||
data:[
|
||
{value:10, name:'rose1'},
|
||
{value:5, name:'rose2'},
|
||
{value:15, name:'rose3'},
|
||
{value:25, name:'rose4'},
|
||
{value:20, name:'rose5'},
|
||
{value:35, name:'rose6'},
|
||
{value:30, name:'rose7'},
|
||
{value:40, name:'rose8'}
|
||
]
|
||
},
|
||
{
|
||
name:'Area mode',
|
||
type:'pie',
|
||
radius : [30, 110],
|
||
center : ['75%', 200],
|
||
roseType : 'area',
|
||
x: '50%', // for funnel
|
||
max: 40, // for funnel
|
||
sort : 'ascending', // for funnel
|
||
data:[
|
||
{value:10, name:'rose1'},
|
||
{value:5, name:'rose2'},
|
||
{value:15, name:'rose3'},
|
||
{value:25, name:'rose4'},
|
||
{value:20, name:'rose5'},
|
||
{value:35, name:'rose6'},
|
||
{value:30, name:'rose7'},
|
||
{value:40, name:'rose8'}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
|
||
// use configuration item and data specified to show chart
|
||
pieChart.setOption(option, true), $(function() {
|
||
function resize() {
|
||
setTimeout(function() {
|
||
pieChart.resize()
|
||
}, 100)
|
||
}
|
||
$(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
|
||
});
|
||
|
||
// ==============================================================
|
||
// Radar chart option
|
||
// ==============================================================
|
||
var radarChart = echarts.init(document.getElementById('radar-chart'));
|
||
|
||
// specify chart configuration item and data
|
||
|
||
option = {
|
||
|
||
tooltip : {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
orient : 'vertical',
|
||
x : 'right',
|
||
y : 'bottom',
|
||
data:['Allocated Budget','Actual Spending']
|
||
},
|
||
toolbox: {
|
||
show : true,
|
||
feature : {
|
||
dataView : {show: true, readOnly: false},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
polar : [
|
||
{
|
||
indicator : [
|
||
{ text: 'sales', max: 6000},
|
||
{ text: 'Administration', max: 16000},
|
||
{ text: 'Information Techology', max: 30000},
|
||
{ text: 'Customer Support', max: 38000},
|
||
{ text: 'Development', max: 52000},
|
||
{ text: 'Marketing', max: 25000}
|
||
]
|
||
}
|
||
],
|
||
color: ["#55ce63", "#009efb"],
|
||
calculable : true,
|
||
series : [
|
||
{
|
||
name: 'Budget vs spending',
|
||
type: 'radar',
|
||
data : [
|
||
{
|
||
value : [4300, 10000, 28000, 35000, 50000, 19000],
|
||
name : 'Allocated Budget'
|
||
},
|
||
{
|
||
value : [5000, 14000, 28000, 31000, 42000, 21000],
|
||
name : 'Actual Spending'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
|
||
|
||
// use configuration item and data specified to show chart
|
||
radarChart.setOption(option, true), $(function() {
|
||
function resize() {
|
||
setTimeout(function() {
|
||
radarChart.resize()
|
||
}, 100)
|
||
}
|
||
$(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
|
||
});
|
||
|
||
// ==============================================================
|
||
// doughnut chart option
|
||
// ==============================================================
|
||
var doughnutChart = echarts.init(document.getElementById('doughnut-chart'));
|
||
|
||
// specify chart configuration item and data
|
||
|
||
option = {
|
||
tooltip : {
|
||
trigger: 'item',
|
||
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
||
},
|
||
legend: {
|
||
orient : 'vertical',
|
||
x : 'left',
|
||
data:['Item A','Item B','Item C','Item D','Item E']
|
||
},
|
||
toolbox: {
|
||
show : true,
|
||
feature : {
|
||
dataView : {show: true, readOnly: false},
|
||
magicType : {
|
||
show: true,
|
||
type: ['pie', 'funnel'],
|
||
option: {
|
||
funnel: {
|
||
x: '25%',
|
||
width: '50%',
|
||
funnelAlign: 'center',
|
||
max: 1548
|
||
}
|
||
}
|
||
},
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
color: ["#f62d51", "#009efb", "#55ce63", "#ffbc34", "#2f3d4a"],
|
||
calculable : true,
|
||
series : [
|
||
{
|
||
name:'Source',
|
||
type:'pie',
|
||
radius : ['80%', '90%'],
|
||
itemStyle : {
|
||
normal : {
|
||
label : {
|
||
show : false
|
||
},
|
||
labelLine : {
|
||
show : false
|
||
}
|
||
},
|
||
emphasis : {
|
||
label : {
|
||
show : true,
|
||
position : 'center',
|
||
textStyle : {
|
||
fontSize : '30',
|
||
fontWeight : 'bold'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data:[
|
||
{value:335, name:'Item A'},
|
||
{value:310, name:'Item B'},
|
||
{value:234, name:'Item C'},
|
||
{value:135, name:'Item D'},
|
||
{value:1548, name:'Item E'}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
|
||
|
||
// use configuration item and data specified to show chart
|
||
doughnutChart.setOption(option, true), $(function() {
|
||
function resize() {
|
||
setTimeout(function() {
|
||
doughnutChart.resize()
|
||
}, 100)
|
||
}
|
||
$(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
|
||
});
|
||
|
||
// ==============================================================
|
||
// Gauge chart option
|
||
// ==============================================================
|
||
var gaugeChart = echarts.init(document.getElementById('gauge-chart'));
|
||
|
||
// specify chart configuration item and data
|
||
option = {
|
||
tooltip : {
|
||
formatter: "{a} <br/>{b} : {c}%"
|
||
},
|
||
toolbox: {
|
||
show : true,
|
||
feature : {
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
|
||
series : [
|
||
{
|
||
name:'Speed',
|
||
type:'gauge',
|
||
detail : {formatter:'{value}%'},
|
||
data:[{value: 50, name: 'Speed'}],
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: [[0.2, '#55ce63'],[0.8, '#009efb'],[1, '#f62d51']],
|
||
|
||
}
|
||
},
|
||
|
||
}
|
||
]
|
||
};
|
||
timeTicket = setInterval(function (){
|
||
option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
|
||
gaugeChart.setOption(option, true);
|
||
},2000);
|
||
|
||
|
||
// use configuration item and data specified to show chart
|
||
gaugeChart.setOption(option, true), $(function() {
|
||
function resize() {
|
||
setTimeout(function() {
|
||
gaugeChart.resize()
|
||
}, 100)
|
||
}
|
||
$(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
|
||
});
|
||
|
||
// ==============================================================
|
||
// Radar chart option
|
||
// ==============================================================
|
||
var gauge2Chart = echarts.init(document.getElementById('gauge2-chart'));
|
||
|
||
// specify chart configuration item and data
|
||
option = {
|
||
tooltip : {
|
||
formatter: "{a} <br/>{b} : {c}%"
|
||
},
|
||
toolbox: {
|
||
show : true,
|
||
feature : {
|
||
restore : {show: true},
|
||
saveAsImage : {show: true}
|
||
}
|
||
},
|
||
series : [
|
||
{
|
||
name:'Market',
|
||
type:'gauge',
|
||
splitNumber: 10, // 分割段数，默认为5
|
||
axisLine: { // 坐标轴线
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: [[0.2, '#55ce63'],[0.8, '#009efb'],[1, '#f62d51']],
|
||
width: 8
|
||
}
|
||
},
|
||
axisTick: { // 坐标轴小标记
|
||
splitNumber: 10, // 每份split细分多少段
|
||
length :12, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle控制线条样式
|
||
color: 'auto'
|
||
}
|
||
},
|
||
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
|
||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
color: 'auto'
|
||
}
|
||
},
|
||
splitLine: { // 分隔线
|
||
show: true, // 默认显示，属性show控制显示与否
|
||
length :30, // 属性length控制线长
|
||
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
|
||
color: 'auto'
|
||
}
|
||
},
|
||
pointer : {
|
||
width : 5
|
||
},
|
||
title : {
|
||
show : true,
|
||
offsetCenter: [0, '-40%'], // x, y，单位px
|
||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
fontWeight: 'bolder'
|
||
}
|
||
},
|
||
detail : {
|
||
formatter:'{value}%',
|
||
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
|
||
color: 'auto',
|
||
fontWeight: 'bolder'
|
||
}
|
||
},
|
||
data:[{value: 50, name: 'Rate'}]
|
||
}
|
||
]
|
||
};
|
||
|
||
clearInterval(timeTicket);
|
||
timeTicket = setInterval(function (){
|
||
option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
|
||
gauge2Chart.setOption(option,true);
|
||
},2000)
|
||
|
||
|
||
// use configuration item and data specified to show chart
|
||
gauge2Chart.setOption(option, true), $(function() {
|
||
function resize() {
|
||
setTimeout(function() {
|
||
gauge2Chart.resize()
|
||
}, 100)
|
||
}
|
||
$(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
|
||
}); |