| Mandotary code to get color array from string for every chart. |
function getChartColorsArray(chartId) {
if (document.getElementById(chartId) !== null) {
var colors = document.getElementById(chartId).getAttribute("data-colors");
colors = JSON.parse(colors);
return colors.map(function (value) {
var newValue = value.replace(" ", "");
if (newValue.indexOf(",") === -1) {
var color = getComputedStyle(document.documentElement).getPropertyValue(newValue);
if (color) return color; else return newValue;;
} else {
var val = value.split(',');
if(val.length == 2){
var rgbaColor = getComputedStyle(document.documentElement).getPropertyValue(val[0]);
rgbaColor = "rgba("+rgbaColor+","+val[1]+")";
return rgbaColor;
} else {
return newValue;
}
}
});
}
}
|
| Line Chart |
var chartLineColors = getChartColorsArray("chart-line");
var chartDom = document.getElementById('chart-line');
var myChart = echarts.init(chartDom);
var option;
option = {
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '4%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
lineStyle: {
color: '#858d98'
},
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
],
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
color: chartLineColors
};
if (option && typeof option === "object") {
option && myChart.setOption(option);
}
|
| Stacked Line Chart |
var chartLineStackedColors = getChartColorsArray("chart-line-stacked");
var chartDom = document.getElementById('chart-line-stacked');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
textStyle: {//The style of the legend text
color:'#858d98',
},
},
grid: {
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
lineStyle: {
color: '#858d98'
},
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210],
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
],
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
color: chartLineStackedColors
};
option && myChart.setOption(option);
|
| Area Chart |
var chartAreaColors = getChartColorsArray("chart-area");
var chartDom = document.getElementById('chart-area');
var myChart = echarts.init(chartDom);
var option;
option = {
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '4%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
lineStyle: {
color: '#858d98'
},
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}
],
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
color: chartAreaColors[0],
backgroundColor: chartAreaColors[1],
};
option && myChart.setOption(option);
|
| Stacked Area Chart |
var chartAreaStackedColors = getChartColorsArray("chart-area-stacked");
var chartDom = document.getElementById('chart-area-stacked');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
textStyle: {//The style of the legend text
color:'#858d98',
},
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
lineStyle: {
color: '#858d98'
},
},
}
],
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
color: chartAreaStackedColors,
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
option && myChart.setOption(option);
|
| Step Line |
var chartStepLineColors = getChartColorsArray("chart-step-line");
var chartDom = document.getElementById('chart-step-line');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Step Start', 'Step Middle', 'Step End'],
textStyle: {//The style of the legend text
color:'#858d98',
},
},
grid: {
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
lineStyle: {
color: '#858d98'
},
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
color: chartStepLineColors,
series: [
{
name: 'Step Start',
type: 'line',
step: 'start',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Step Middle',
type: 'line',
step: 'middle',
data: [220, 282, 201, 234, 290, 430, 410]
},
{
name: 'Step End',
type: 'line',
step: 'end',
data: [450, 432, 401, 454, 590, 530, 510]
}
]
};
option && myChart.setOption(option);
|
| Line Y Category |
var chartLineYColors = getChartColorsArray("chart-line-y-category");
var chartDom = document.getElementById('chart-line-y-category');
var myChart = echarts.init(chartDom);
var option;
option = {
legend: {
data: ['Altitude (km) vs. temperature (°C)'],
textStyle: {//The style of the legend text
color:'#858d98',
},
},
tooltip: {
trigger: 'axis',
formatter: 'Temperature :
{b}km : {c}°C'
},
grid: {
left: '1%',
right: '0%',
bottom: '0%',
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
},
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
yAxis: {
type: 'category',
axisLine: {
onZero: false,
lineStyle: {
color: '#858d98'
},
},
axisLabel: {
formatter: '{value} km'
},
boundaryGap: false,
data: ['0', '10', '20', '30', '40', '50', '60', '70', '80'],
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
color: chartLineYColors,
series: [
{
name: 'Altitude (km) vs. temperature (°C)',
type: 'line',
symbolSize: 10,
symbol: 'circle',
smooth: true,
lineStyle: {
width: 3,
shadowColor: 'rgba(0,0,0,0.3)',
shadowBlur: 10,
shadowOffsetY: 8
},
data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
}
]
};
option && myChart.setOption(option);
|
| Basic Bar |
var chartBarColors = getChartColorsArray("chart-bar");
var chartDom = document.getElementById('chart-bar');
var myChart = echarts.init(chartDom);
var option;
option = {
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
lineStyle: {
color: '#858d98'
},
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
color: chartBarColors,
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
option && myChart.setOption(option);
|
| Bar Label |
var app = {};
var chartBarLabelRotationColors = getChartColorsArray("chart-bar-label-rotation");
var chartDom = document.getElementById('chart-bar-label-rotation');
var myChart = echarts.init(chartDom);
var option;
var posList = [
'left',
'right',
'top',
'bottom',
'inside',
'insideTop',
'insideLeft',
'insideRight',
'insideBottom',
'insideTopLeft',
'insideTopRight',
'insideBottomLeft',
'insideBottomRight'
];
app.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: posList.reduce(function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
var labelOption = {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
};
myChart.setOption({
series: [
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
}
]
});
}
};
var labelOption = {
show: true,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {}
}
};
option = {
grid: {
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland'],
textStyle: {//The style of the legend text
color:'#858d98',
},
},
color: chartBarLabelRotationColors,
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['2012', '2013', '2014', '2015', '2016'],
axisLine: {
lineStyle: {
color: '#858d98'
},
},
}
],
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
series: [
{
name: 'Forest',
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390]
},
{
name: 'Steppe',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290]
},
{
name: 'Desert',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190]
},
{
name: 'Wetland',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [98, 77, 101, 99, 40]
}
]
};
option && myChart.setOption(option);
|
| Horizontal Bar |
var chartBarHorizontalColors = getChartColorsArray("chart-horizontal-bar");
var chartDom = document.getElementById('chart-horizontal-bar');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
textStyle: {//The style of the legend text
color:'#858d98',
},
},
grid: {
left: '0%',
right: '4%',
bottom: '0%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
color: chartBarHorizontalColors,
series: [
{
name: '2011',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
},
{
name: '2012',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
option && myChart.setOption(option);
|
| Stacked Horizontal Bar |
var chartBarStackedColors = getChartColorsArray("chart-horizontal-bar-stacked");
var chartDom = document.getElementById('chart-horizontal-bar-stacked');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
legend: {
textStyle: {//The style of the legend text
color:'#858d98',
},
},
grid: {
left: '1%',
right: '3%',
bottom: '0%',
containLabel: true
},
xAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
color: chartBarStackedColors,
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
series: [
{
name: 'Direct',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 301, 334, 390, 330, 320]
},
{
name: 'Mail Ad',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Affiliate Ad',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ad',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [150, 212, 201, 154, 190, 330, 410]
},
{
name: 'Search Engine',
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [820, 832, 901, 934, 1290, 1330, 1320]
}
]
};
option && myChart.setOption(option);
|
| Pie Charts |
var chartPieColors = getChartColorsArray("chart-pie");
var chartDom = document.getElementById('chart-pie');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
textStyle: {//The style of the legend text
color:'#858d98',
},
},
color: chartPieColors,
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
};
option && myChart.setOption(option);
|
| Doughnut Chart |
var chartDoughnutColors = getChartColorsArray("chart-doughnut");
var chartDom = document.getElementById('chart-doughnut');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center',
textStyle: {//The style of the legend text
color:'#858d98',
},
},
color: chartDoughnutColors,
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '16',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
]
}
],
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
};
option && myChart.setOption(option);
|
| Basic Scatter Chart |
var chartScatterColors = getChartColorsArray("chart-scatter");
var chartDom = document.getElementById('chart-scatter');
var myChart = echarts.init(chartDom);
var option;
option = {
grid: {
left: '1%',
right: '0%',
bottom: '0%',
top: '2%',
containLabel: true
},
xAxis: {
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
yAxis: {
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
series: [
{
symbolSize: 12,
data: [
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
type: 'scatter'
}
],
color: chartScatterColors,
};
option && myChart.setOption(option);
|
| Candlestick Chart |
var chartCandlestickColors = getChartColorsArray("chart-candlestick");
var chartDom = document.getElementById('chart-candlestick');
var myChart = echarts.init(chartDom);
var option;
option = {
grid: {
left: '1%',
right: '0%',
bottom: '0%',
top: '2%',
containLabel: true
},
xAxis: {
data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
yAxis: {
axisLine: {
lineStyle: {
color: '#858d98'
},
},
splitLine: {
lineStyle: {
color:"rgba(133, 141, 152, 0.1)"
}
}
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
series: [
{
type: 'candlestick',
data: [
[20, 34, 10, 38],
[40, 35, 30, 50],
[31, 38, 33, 44],
[38, 15, 5, 42]
],
itemStyle: {
normal: {
color: chartCandlestickColors[0],
color0: chartCandlestickColors[1],
borderColor: chartCandlestickColors[0],
borderColor0: chartCandlestickColors[1]
}
}
}
]
};
option && myChart.setOption(option);
|
| Graph Chart |
var chartGraphColors = getChartColorsArray("chart-graph");
var chartDom = document.getElementById('chart-graph');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
color: chartGraphColors,
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
roam: true,
label: {
show: true
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20
},
data: [
{
name: 'Node 1',
x: 300,
y: 300
},
{
name: 'Node 2',
x: 800,
y: 300
},
{
name: 'Node 3',
x: 550,
y: 100
},
{
name: 'Node 4',
x: 550,
y: 500
}
],
// links: [],
links: [
{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
show: true
},
lineStyle: {
width: 5,
curveness: 0.2
}
},
{
source: 'Node 2',
target: 'Node 1',
label: {
show: true
},
lineStyle: {
curveness: 0.2
}
},
{
source: 'Node 1',
target: 'Node 3'
},
{
source: 'Node 2',
target: 'Node 3'
},
{
source: 'Node 2',
target: 'Node 4'
},
{
source: 'Node 1',
target: 'Node 4'
}
],
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
],
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
};
option && myChart.setOption(option);
|
| Treemap Chart |
var chartTreemapColors = getChartColorsArray("chart-treemap");
var chartDom = document.getElementById('chart-treemap');
var myChart = echarts.init(chartDom);
var option;
option = {
color: chartTreemapColors,
series: [
{
type: 'treemap',
data: [
{
name: 'nodeA',
value: 10,
children: [
{
name: 'nodeAa',
value: 4
},
{
name: 'nodeAb',
value: 6
}
]
},
{
name: 'nodeB',
value: 20,
children: [
{
name: 'nodeBa',
value: 20,
children: [
{
name: 'nodeBa1',
value: 20
}
]
}
]
}
]
}
],
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
};
option && myChart.setOption(option);
|
| Sunburst Chart |
var chartSunburstColors = getChartColorsArray("chart-sunburst");
var chartDom = document.getElementById('chart-sunburst');
var myChart = echarts.init(chartDom);
var option;
var data = [
{
name: 'Grandpa',
children: [
{
name: 'Uncle Leo',
value: 15,
children: [
{
name: 'Cousin Jack',
value: 2
},
{
name: 'Cousin Mary',
value: 5,
children: [
{
name: 'Jackson',
value: 2
}
]
},
{
name: 'Cousin Ben',
value: 4
}
]
},
{
name: 'Father',
value: 10,
children: [
{
name: 'Me',
value: 5
},
{
name: 'Brother Peter',
value: 1
}
]
}
]
},
{
name: 'Nancy',
children: [
{
name: 'Uncle Nike',
children: [
{
name: 'Cousin Betty',
value: 1
},
{
name: 'Cousin Jenny',
value: 2
}
]
}
]
}
];
option = {
color: chartSunburstColors,
series: {
type: 'sunburst',
// emphasis: {
// focus: 'ancestor'
// },
data: data,
radius: [0, '90%'],
label: {
rotate: 'radial'
}
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
};
option && myChart.setOption(option);
|
| Parallel Chart |
var chartParallelColors = getChartColorsArray("chart-parallel");
var chartDom = document.getElementById('chart-parallel');
var myChart = echarts.init(chartDom);
var option;
option = {
parallelAxis: [
{ dim: 0, name: 'Price' },
{ dim: 1, name: 'Net Weight' },
{ dim: 2, name: 'Amount' },
{
dim: 3,
name: 'Score',
type: 'category',
data: ['Excellent', 'Good', 'OK', 'Bad']
}
],
grid: {
left: '0%',
right: '0%',
bottom: '0%',
top: '2%',
containLabel: true
},
color: chartParallelColors,
series: {
type: 'parallel',
lineStyle: {
width: 4
},
data: [
[12.99, 100, 82, 'Good'],
[9.99, 80, 77, 'OK'],
[20, 120, 60, 'Excellent']
]
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
};
option && myChart.setOption(option);
|
| Sankey Chart |
var chartSankeyColors = getChartColorsArray("chart-sankey");
var chartDom = document.getElementById('chart-sankey');
var myChart = echarts.init(chartDom);
var option;
option = {
color: chartSankeyColors,
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency'
},
data: [
{
name: 'a'
},
{
name: 'b'
},
{
name: 'a1'
},
{
name: 'a2'
},
{
name: 'b1'
},
{
name: 'c'
}
],
links: [
{
source: 'a',
target: 'a1',
value: 5
},
{
source: 'a',
target: 'a2',
value: 3
},
{
source: 'b',
target: 'b1',
value: 8
},
{
source: 'a',
target: 'b1',
value: 3
},
{
source: 'b1',
target: 'a1',
value: 1
},
{
source: 'b1',
target: 'c',
value: 2
}
]
},
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
};
option && myChart.setOption(option);
|
| Funnel Chart |
var chartFunnelColors = getChartColorsArray("chart-sankey");
var chartDom = document.getElementById('chart-funnel');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item',
formatter: '{a}
{b} : {c}%'
},
toolbox: {
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order'],
textStyle: {//The style of the legend text
color:'#858d98',
},
},
color: chartFunnelColors,
series: [
{
name: 'Funnel',
type: 'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
data: [
{ value: 60, name: 'Visit' },
{ value: 40, name: 'Inquiry' },
{ value: 20, name: 'Order' },
{ value: 80, name: 'Click' },
{ value: 100, name: 'Show' }
]
}
],
textStyle:{
fontFamily: 'Poppins, sans-serif'
},
};
option && myChart.setOption(option);
|
| Gauge Chart |
var chartGaugeColors = getChartColorsArray("chart-gauge");
var chartDom = document.getElementById('chart-gauge');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
formatter: '{a}
{b} : {c}%'
},
color: chartGaugeColors,
textStyle:{
fontFamily: 'Poppins, sans-serif',
},
series: [
{
name: 'Pressure',
type: 'gauge',
progress: {
show: true
},
detail: {
valueAnimation: true,
formatter: '{value}',
color: '#858d98' ,
},
axisLabel:{
color: '#858d98' ,
},
data: [
{
title: {
color: '#858d98' ,
},
value: 50,
name: 'SCORE',
}
]
}
]
};
option && myChart.setOption(option);
|
| Heatmap Chart |
var chartHeatmapColors = getChartColorsArray("chart-heatmap");
var chartDom = document.getElementById('chart-heatmap');
var myChart = echarts.init(chartDom);
var option;
function getVirtulData(year) {
year = year || '2017';
var date = +echarts.number.parseDate(year + '-01-01');
var end = +echarts.number.parseDate(year + '-12-31');
var dayTime = 3600 * 24 * 1000;
var data = [];
for (var time = date; time <= end; time += dayTime) {
data.push([
echarts.format.formatTime('yyyy-MM-dd', time),
Math.floor(Math.random() * 10000)
]);
}
return data;
}
option = {
visualMap: {
show: false,
min: 0,
max: 10000,
},
calendar: {
range: '2017'
},
color: chartHeatmapColors,
textStyle:{
fontFamily: 'Poppins, sans-serif',
},
series: {
type: 'heatmap',
coordinateSystem: 'calendar',
data: getVirtulData('2017'),
},
};
option && myChart.setOption(option);
|
