You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
2.8 KiB
Plaintext
142 lines
2.8 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EchartsTest.aspx.cs" Inherits="TradeManageNew.EchartsTest" %>
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Animation Delay - Apache ECharts Demo</title>
|
|
</head>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#chart-container {
|
|
position: relative;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="chart-container"></div>
|
|
<script src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
|
|
<script>
|
|
var dom = document.getElementById('chart-container');
|
|
var myChart = echarts.init(dom, 'dark', {
|
|
renderer: 'canvas',
|
|
useDirtyRect: false
|
|
});
|
|
var app = {};
|
|
|
|
var option;
|
|
|
|
let xAxisData = [];
|
|
let data1 = [];
|
|
let data2 = [];
|
|
let data3 = [];
|
|
let data4 = [];
|
|
for (let i = 0; i < 10; i++) {
|
|
xAxisData.push('Class' + i);
|
|
data1.push(+(Math.random() * 2).toFixed(2));
|
|
data2.push(+(Math.random() * 5).toFixed(2));
|
|
data3.push(+(Math.random() + 0.3).toFixed(2));
|
|
data4.push(+Math.random().toFixed(2));
|
|
}
|
|
var emphasisStyle = {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowColor: 'rgba(0,0,0,0.3)'
|
|
}
|
|
};
|
|
option = {
|
|
legend: {
|
|
data: ['bar', 'bar2', 'bar3', 'bar4'],
|
|
left: '10%'
|
|
},
|
|
brush: {
|
|
toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
|
|
xAxisIndex: 0
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
magicType: {
|
|
type: ['stack']
|
|
},
|
|
dataView: {}
|
|
}
|
|
},
|
|
tooltip: {},
|
|
xAxis: {
|
|
data: xAxisData,
|
|
name: 'X Axis',
|
|
axisLine: { onZero: true },
|
|
splitLine: { show: false },
|
|
splitArea: { show: false }
|
|
},
|
|
yAxis: {},
|
|
grid: {
|
|
bottom: 100
|
|
},
|
|
series: [
|
|
{
|
|
name: 'bar',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
emphasis: emphasisStyle,
|
|
data: data1
|
|
},
|
|
{
|
|
name: 'bar2',
|
|
type: 'bar',
|
|
stack: 'one',
|
|
emphasis: emphasisStyle,
|
|
data: data2
|
|
},
|
|
{
|
|
name: 'bar3',
|
|
type: 'bar',
|
|
stack: 'two',
|
|
emphasis: emphasisStyle,
|
|
data: data3
|
|
},
|
|
{
|
|
name: 'bar4',
|
|
type: 'bar',
|
|
stack: 'two',
|
|
emphasis: emphasisStyle,
|
|
data: data4
|
|
}
|
|
]
|
|
};
|
|
myChart.on('brushSelected', function (params) {
|
|
var brushed = [];
|
|
var brushComponent = params.batch[0];
|
|
for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
|
|
var rawIndices = brushComponent.selected[sIdx].dataIndex;
|
|
brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
|
|
}
|
|
myChart.setOption({
|
|
title: {
|
|
backgroundColor: '#333',
|
|
text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
|
|
bottom: 0,
|
|
right: '10%',
|
|
width: 100,
|
|
textStyle: {
|
|
fontSize: 12,
|
|
color: '#fff'
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
if (option && typeof option === 'object') {
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
window.addEventListener('resize', myChart.resize);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|