import React, { useEffect } from 'react';
import './app.scss'
import * as echarts from 'echarts';
const App = () => {
//one
let myappone = () => {
var chartDom = document.getElementById('one');
var myChart = echarts.init(chartDom);
var option;
option = {
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
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]
}
]
};
myChart.clear()
option && myChart.setOption(option);
}
// two
let myapptwo = () => {
var chartDom = document.getElementById('two');
var myChart = echarts.init(chartDom);
var option;
option = {
legend: {},
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
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]
}
]
};
myChart.clear()
option && myChart.setOption(option);
}
//three
let myappthree = () => {
var chartDom = document.getElementById('three');
var myChart = echarts.init(chartDom);
var option;
option = {
legend: {},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
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]
}
]
};
myChart.clear()
option && myChart.setOption(option);
}
//fore
let myappfore = () => {
var chartDom = document.getElementById('fore');
var myChart = echarts.init(chartDom);
var option;
option = {
legend: {},
series: [
{
name: 'Access From',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{ value: 335, name: 'Direct' },
{ value: 310, name: 'Email' },
{ value: 274, name: 'Union Ads' },
{ value: 235, name: 'Video Ads' },
{ value: 400, name: 'Search Engine' }
].sort(function (a, b) {
return a.value - b.value;
}),
roseType: 'radius',
label: {
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
myChart.clear()
option && myChart.setOption(option);
}
//five{}
let myappfive = () => {
var chartDom = document.getElementById('five');
var myChart = echarts.init(chartDom);
var option;
option = {
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [10, 100],
center: ['50%', '50%'],
roseType: 'area',
itemStyle: {
borderRadius: 8
},
data: [
{ value: 40, name: 'rose 1' },
{ value: 38, name: 'rose 2' },
{ value: 32, name: 'rose 3' },
{ value: 30, name: 'rose 4' },
{ value: 28, name: 'rose 5' },
{ value: 26, name: 'rose 6' },
{ value: 22, name: 'rose 7' },
{ value: 18, name: 'rose 8' }
]
}
]
};
myChart.clear()
option && myChart.setOption(option);
}
//six
let myappsix = () => {
var chartDom = document.getElementById('six');
var myChart = echarts.init(chartDom);
var option;
option = {
legend: {},
xAxis: {
type: 'category',
boundaryGap: false,
// prettier-ignore
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
},
axisPointer: {
snap: true
}
},
series: [
{
name: 'Electricity',
type: 'line',
smooth: true,
// prettier-ignore
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
markArea: {
itemStyle: {
color: 'rgba(255, 173, 177, 0.4)'
},
data: [
[
{
name: 'Morning Peak',
xAxis: '07:30'
},
{
xAxis: '10:00'
}
],
[ { name: 'Evening Peak', xAxis: '17:30' }, { xAxis: '21:15' } ]
]
}
}
]
};
myChart.clear()
option && myChart.setOption(option);
}
setInterval(()=>{
myappone()
myapptwo()
myappthree()
myappfore()
myappfive()
myappsix()
},3000)
useEffect(() => {
myappone()
myapptwo()
myappthree()
myappfore()
myappfive()
myappsix()
}, [])
return (
<div id='echars' style={{ width: '1000px' }}>
<div id='one'></div>
<div id='two'></div>
<div id='three'></div>
<div id='fore'></div>
<div id='five'></div>
<div id='six'></div>
</div>
);
}
export default App;
