JSFiddle - React, Tailwind, and code Playground
by iamyanjun
HTML
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts.js"></script>
<style>
#main {
width: 600px;
height: 400px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="main"></div>
<script>
var container = document.getElementById('main');
var chart = echarts.init(container);
chart.setOption(option = {
color: [
'#3f51b5',
'#00bcd4',
'#4caf50',
'#cddc39'
],
title: {
text: 'HelloWorld',
textStyle: {
color: 'rgba(0, 0, 0, 0.87)',
fontWeight: 500,
fontSize: 20
},
padding: 0
},
tooltip: {
trigger: 'axis'
},
legend: {
left: '130px',
icon: 'roundRect',
data: [
'A'
],
itemGap: 32,
textStyle: {
fontSize: 14
},
selected: {
A: true,
B: false,
C: false,
D: false
}
},
grid: {
show: false,
left: 30,
right: 5,
top: 68
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLabel: {},
data: [
0,
0.1,
0.2,
0.3,
0.4,
0.5,
0.6,
0.7,
0.8,
0.9,
1,
1.1,
1.2,
1.3,
1.4,
1.5,
1.6,
1.7,
1.8,
1.9,
2,
2.1,
2.2,
2.3,
2.3,
2.5,
2.6,
2.6,
2.7,
2.9,
3,
3,
3.1,
3.2,
3.3,
3.4,
3.5,
3.6,
3.7,
3.8,
3.9,
4,
4.1,
4.2,
4.3,
4.4,
4.5,
4.6,
4.7,
4.8,
4.9,
5,
5.1,
5.2,
5.3,
5.4,
5.5,
5.6,
5.7,
5.8,
5.9,
6,
6.1,
6.2,
6.3,
6.4,
6.5,
6.6,
6.7,
6.8,
6.8,
6.9,
7.1,
7.1,
7.2,
7.4,
7.4,
7.5,
7.6,
7.7,
...