JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.0/echarts.common.js"></script>
<button class="toggle" style="margin-bottom:20px;">toggleData</button>
<div class="demo" id="trade-history" style="width: 550px; height: 300px;"></div>
JavaScript
$(function() {
var echartOpt = {
fz: '15',
color: '#fff'
};
var demo = echarts.init(document.getElementById('trade-history'));
// echarts 基本配置
var demoOption = {
backgroundColor: '#1b237e',
grid: {
right: '10%',
left: '10%',
bottom: '10%',
top: '20%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: 'rgba(0,46, 115, 0.3)'
}
},
formatter: function(params) {
var str = params[0].name + "<br>";
params.forEach(function(v, i) {
str += v.seriesName + ": " + v.value + "吨" + "<br>";
});
return str
},
textStyle: {
align: 'left',
color: '#5cc1ff',
fontSize: '16'
},
backgroundColor: 'rgba(15, 52, 135, 0.5)',
borderWidth: '1',
borderColor: '#5cc1ff',
extraCssText: 'box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);'
},
legend: {
data: ['A', 'a', 'B', 'b', 'C', 'c', 'D', 'd', 'E', 'e'],
right: '0',
top: '0',
textStyle: {
color: echartOpt.color,
fontSize: echartOpt.fz
},
itemGap: 20,
itemHeight: 15,
itemWidth: 15
},
calculable: true,
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: echartOpt.color
}
},
axisTick: {
show: false,
interval: 0,
alignWithLabel: true
},
axisLabel: {
interval: 0,
rotate: '0',
textStyle: {
...