Line
<div id="echarts" class="echarts"></div>const data = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'];
const chartOne = [0, 10, 10, 13, 10, 20, 10, 10, 25];
const chartTwo = [0, 9, 15, 10, 30, 15, 25, 18, 20];
const options = {
tooltip: {
trigger: 'axis',
backgroundColor: '#393f49',
padding: [
5, 10, 5, 10,
],
axisPointer: {
type: 'none',
},
textStyle: {
fontSize: 12,
},
},
xAxis: {
type: 'category',
data: data,
splitLine: {
show: false,
},
axisTick: {
show: false
},
axisLine: {
show: false
},
boundaryGap: false,
nameTextStyle: {
fontFamily: "'Open Sans', sans-serif",
},
},
yAxis: {
type: 'value',
splitLine: {
show: false,
},
axisTick: {
show: false
},
axisLine: {
show: false
},
boundaryGap: false,
nameTextStyle: {
fontFamily: "'Open Sans', sans-serif",
},
},
textStyle: {
color: '#bcbec0',
fontFamily: "'Open Sans', sans-serif",
},
grid: {
top: 20,
right: 30,
bottom: 20,
left: 30,
},
series: [
{
data: chartOne,
type: 'line',
name: 'Chart 1',
smooth: true,
areaStyle: {
normal: {
color: 'rgba(171, 184, 255, 0.8)',
opacity: 1,
},
},
lineStyle: {
normal: {
width: 0,
},
},
symbol: 'circle',
symbolSize: 1,
symbolOffset: [0, 1],
itemStyle: {
normal: {
borderWidth: 0,
color: 'rgba(171, 184, 255, 1)',
},
},
},
{
data: chartTwo,
type: 'line',
name: 'Chart 2',
smooth: true,
areaStyle: {
normal: {
color: 'rgba(94, 119, 255, 0.8)',
opacity: 1,
},
},
lineStyle: {
normal: {
width: 0,
},
},
symbol: 'circle',
symbolSize: 1,
symbolOffset: [0, 1],
itemStyle: {
normal: {
borderWidth: 0,
color: 'rgba(94, 119, 255, 1)',
},
},
},
],
};
echarts.init(document.getElementById('echarts')).setOption(options);Bar
<div id="echartsBar" class="echarts"></div>const data = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'];
const chartOne = [0, 10, 10, 13, 10, 20, 10, 10, 25];
const chartTwo = [0, 9, 15, 10, 30, 15, 25, 18, 20];
const options = {
tooltip: {
trigger: 'item',
backgroundColor: '#393f49',
padding: [
5, 10, 5, 10,
],
axisPointer: {
type: 'none',
},
textStyle: {
fontSize: 12,
},
},
xAxis: {
type: 'category',
data: data,
splitLine: {
show: false,
},
axisTick: {
show: false
},
axisLine: {
show: false
},
nameTextStyle: {
fontFamily: "'Open Sans', sans-serif",
},
},
yAxis: {
type: 'value',
splitLine: {
show: false,
},
axisTick: {
show: false
},
axisLine: {
show: false
},
nameTextStyle: {
fontFamily: "'Open Sans', sans-serif",
},
},
textStyle: {
color: '#bcbec0',
fontFamily: "'Open Sans', sans-serif",
},
grid: {
top: 20,
right: 60,
bottom: 20,
left: 30,
},
series: [
{
data: chartTwo,
type: 'bar',
name: 'Chart 1',
barGap: '10%',
barCategoryGap: '20%',
itemStyle: {
normal: {
borderWidth: 0,
color: 'rgba(94, 119, 255, 0.8)',
},
},
},
{
data: chartOne,
type: 'bar',
name: 'Chart 2',
barGap: '10%',
barCategoryGap: '20%',
itemStyle: {
normal: {
borderWidth: 0,
color: 'rgba(171, 184, 255, 0.8)',
},
},
},
],
};
echarts.init(document.getElementById('echartsBar')).setOption(options);Pie
<div id="echartsPie" class="echarts"></div>const options = {
tooltip: {
trigger: 'item',
backgroundColor: '#393f49',
padding: [
5, 10, 5, 10,
],
axisPointer: {
type: 'none',
},
textStyle: {
fontSize: 12,
},
},
xAxis: {
type: 'category',
splitLine: {
show: false,
},
axisTick: {
show: false
},
axisLine: {
show: false
},
},
yAxis: {
type: 'value',
splitLine: {
show: false,
},
axisTick: {
show: false
},
axisLine: {
show: false
},
nameTextStyle: {
fontFamily: "'Open Sans', sans-serif",
},
},
textStyle: {
color: '#bcbec0',
fontFamily: "'Open Sans', sans-serif",
},
grid: {
top: 0,
right: 0,
bottom: 0,
left: 0,
},
series: {
type: 'pie',
hoverAnimation: false,
data: [
{
value: 5,
name: 'Jan',
itemStyle: {
normal: {
borderWidth: 0,
color: 'rgba(94, 119, 255, 0.8)',
},
},
},
{
value: 3,
name: 'Feb',
itemStyle: {
normal: {
borderWidth: 0,
color: 'rgba(94, 119, 255, 0.6)',
},
},
},
{
value: 4,
name: 'Mar',
itemStyle: {
normal: {
borderWidth: 0,
color: 'rgba(94, 119, 255, 0.4)',
},
},
},
],
label: {
normal: {
show: false,
},
},
},
};
echarts.init(document.getElementById('echartsPie')).setOption(options);
