E-Charts

Introduction

A Declarative Framework for Rapid Construction of Web-based Visualization, for more details you can check here.

How to Setup

HTML Structure

<div id="e_chart_6" class="" style="height:294px;"></div>

Dependency

JS

<!-- EChartJS JavaScript -->
<script src="vendors/echarts/dist/echarts-en.min.js"></script>
<script src="dist/js/areacharts-data.js"></script>

Initialize Echarts JS

Line Chart

if( $('#e_chart_6').length > 0 ){
var e_chart_6 = echarts.init(document.getElementById('e_chart_6'));
var option6 = {
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
borderRadius:6,
padding:6,
axisPointer:{
lineStyle:{
width:0,
}
},
textStyle: {
color: '#324148',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'inherit',
fontSize: 12
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
show:false
},
axisTick: {
show:false
},
axisLabel: {
textStyle: {
color: '#5e7d8a'
}
}
},
yAxis: {
type: 'value',
axisLine: {
show:false
},
axisTick: {
show:false
},
axisLabel: {
textStyle: {
color: '#5e7d8a'
}
},
splitLine: {
lineStyle: {
color: '#eaecec',
}
}
},
series: [
{
data:[120, 132, 101, 134, 90, 230, 210],
type: 'line',
stack: 'a',
symbolSize: 6,
itemStyle: {
color: '#00acf0',
},
lineStyle: {
color: '#00acf0',
width:2,
}
}
]
};
e_chart_6.setOption(option6);
e_chart_6.resize();
}

Bar Chart

if( $('#e_chart_6').length > 0 ){
var eChart_6 = echarts.init(document.getElementById('e_chart_6'));
var option = {
color: ['#00acf0'],
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
borderRadius:6,
padding:6,
axisPointer:{
lineStyle:{
width:0,
}
},
textStyle: {
color: '#324148',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'inherit',
fontSize: 12
}
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
show:false
},
axisTick: {
show:false
},
axisLabel: {
textStyle: {
color: '#5e7d8a'
}
}
}],
yAxis: {
type: 'value',
axisLine: {
show:false
},
axisTick: {
show:false
},
axisLabel: {
textStyle: {
color: '#5e7d8a'
}
},
splitLine: {
lineStyle: {
color: '#eaecec',
}
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
barMaxWidth: 30,
itemStyle: {
normal: {
barBorderRadius: [6, 6, 0, 0] ,
}
},
}]
};
eChart_6.setOption(option);
eChart_6.resize();
}

Area Chart

if( $('#e_chart_6').length > 0 ){
var e_chart_6 = echarts.init(document.getElementById('e_chart_6'));
var option6 = {
tooltip: {
show: true,
trigger: 'axis',
backgroundColor: '#fff',
borderRadius:6,
padding:6,
axisPointer:{
lineStyle:{
width:0,
}
},
textStyle: {
color: '#324148',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'inherit',
fontSize: 12
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLine: {
show:false
},
axisTick: {
show:false
},
axisLabel: {
textStyle: {
color: '#5e7d8a'
}
}
},
yAxis: {
type: 'value',
axisLine: {
show:false
},
axisTick: {
show:false
},
axisLabel: {
textStyle: {
color: '#5e7d8a'
}
},
splitLine: {
lineStyle: {
color: '#eaecec',
}
}
},
series: [
{
data:[120, 132, 101, 134, 90, 230, 210],
type: 'line',
stack: 'a',
symbolSize: 6,
itemStyle: {
color: '#00acf0',
},
lineStyle: {
color: '#00acf0',
width:2,
},
areaStyle: {
color: '#ffbf36',
},
}
]
};
e_chart_6.setOption(option6);
e_chart_6.resize();
}

Donut Chart

if( $('#e_chart_6').length > 0 ){
var eChart_6 = echarts.init(document.getElementById('e_chart_6'));
var dataStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 40,
borderWidth: 10,
shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
}
};
var placeHolderStyle = {
normal: {
color: '#22af47',
label: {
show: false
},
labelLine: {
show: false
}
},
emphasis: {
color: '#22af47'
}
};
var option5 = {
backgroundColor: '#fff',
title: {
text: '匹配度',
x: 'center',
y: 'center',
textStyle: {
fontWeight: 'normal',
fontSize: 24,
color: "#fff",
}
},
tooltip: {
show: true,
backgroundColor: '#fff',
borderRadius:6,
padding:6,
axisPointer:{
lineStyle:{
width:0,
}
},
textStyle: {
color: '#324148',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'inherit',
fontSize: 12
}
},
series: [{
name: 'Line 1',
type: 'pie',
clockWise: false,
radius: ['40%', '50%'],
center:['50%','50%'],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
label:{
borderRadius:'10',
},
data: [{
value: 54.6,
name: 'b',
itemStyle: {
normal: {
color: '#00acf0'
}
}
},
{
value: 45.4,
name: '',
tooltip: {
show: false
},
itemStyle: placeHolderStyle
},
]
},
{
name: 'Line 2',
type: 'pie',
clockWise: false,
radius: ['80%', '70%'],
center:['50%','50%'],
itemStyle: dataStyle,
hoverAnimation: false,
startAngle: 90,
data: [{
value: 56.7,
name: 'a',
itemStyle: {
normal: {
color: '#00acf0'
}
}
},
{
value: 43.3,
name: '',
tooltip: {
show: false
},
itemStyle: placeHolderStyle
},
]
},
]
};
eChart_6.setOption(option5);
eChart_6.resize();
}

Pie Chart

if( $('#e_chart_6').length > 0 ){
var eChart_6 = echarts.init(document.getElementById('e_chart_6'));
var option = {
tooltip: {
show: true,
backgroundColor: '#fff',
borderRadius:6,
padding:6,
axisPointer:{
lineStyle:{
width:0,
}
},
textStyle: {
color: '#324148',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'inherit',
fontSize: 12
}
},
series: [
{
name:'',
type:'pie',
radius : '55%',
color: ['#00acf0', '#ffbf36', '#f83f37', '#22af47'],
data:[
{value:435, name:''},
{value:679, name:''},
{value:848, name:''},
{value:348, name:''},
],
labelLine: {
show:false
}
}
]
};
eChart_6.setOption(option);
eChart_6.resize();
}