What is included in Примеры Apache ECharts?

This page includes curated sample entries, related tools, and neighboring sample collections for Примеры Apache ECharts.

Elysia Tools

Навигация

Data Visualization

Примеры Apache ECharts

Комплексные примеры Apache ECharts включая различные типы диаграмм, расширенную визуализацию и интерактивные панели

Примеры

Элементы этой коллекции

КодhtmlПростой

Базовые диаграммы ECharts

Основные Apache ECharts включая столбчатые, линейные, круговые диаграммы и базовые интерактивные диаграммы с настройкой

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts Basic Charts Example</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
    <style>
        .chart-container {
            width: 600px;
            height: 400px;
            margin: 20px;
            border: 1px solid #ddd;
        }
        .controls {
            padding: 20px;
            background: #f5f5f5;
            margin: 20px;
        }
        button {
            padding: 8px 16px;
            margin: 5px;
            cursor: pointer;
            background: #4e79a7;
            color: white;
            border: none;
            border-radius: 4px;
        }
        button:hover {
            background: #3a5991;
        }
    </style>
</head>
<body>
    <div class="controls">
        <h3>ECharts Basic Chart Types</h3>
        <button onclick="showBarChart()">Bar Chart</button>
        <button onclick="showLineChart()">Line Chart</button>
        <button onclick="showPieChart()">Pie Chart</button>
        <button onclick="updateData()">Update Data</button>
    </div>

    <div id="chartContainer" class="chart-container"></div>

    <script>
        // Initialize chart instance
        const myChart = echarts.init(document.getElementById('chartContainer'));

        // Sample data
        const categories = ['January', 'February', 'March', 'April', 'May', 'June'];
        const dataValues = [120, 200, 150, 80, 70, 110];

        // Bar chart configuration
        function getBarOption() {
            return {
                title: {
                    text: 'Monthly Sales Data',
                    subtext: 'First Half 2024',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['Sales'],
                    top: 30
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: categories,
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: 'Sales',
                    type: 'bar',
                    barWidth: '60%',
                    data: dataValues,
                    itemStyle: {
                        color: '#5470c6'
                    }
                }]
            };
        }

        // Line chart configuration
        function getLineOption() {
            return {
                title: {
                    text: 'Monthly Trend Analysis',
                    subtext: 'First Half 2024',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Sales', 'Profit'],
                    top: 30
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: categories
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: 'Sales',
                    type: 'line',
                    data: dataValues,
                    smooth: true,
                    itemStyle: {
                        color: '#5470c6'
                    }
                }, {
                    name: 'Profit',
                    type: 'line',
                    data: dataValues.map(v => v * 0.3),
                    smooth: true,
                    itemStyle: {
                        color: '#91cc75'
                    }
                }]
            };
        }

        // Pie chart configuration
        function getPieOption() {
            return {
                title: {
                    text: 'Product Sales Distribution',
                    subtext: 'First Half 2024',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 10,
                    top: 'center'
                },
                series: [{
                    name: 'Product Category',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 18,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: categories.map((cat, index) => ({
                        value: dataValues[index],
                        name: cat
                    }))
                }]
            };
        }

        // Show different chart types
        function showBarChart() {
            myChart.setOption(getBarOption());
        }

        function showLineChart() {
            myChart.setOption(getLineOption());
        }

        function showPieChart() {
            myChart.setOption(getPieOption());
        }

        // Update data
        function updateData() {
            const newData = dataValues.map(() => Math.floor(Math.random() * 200) + 50);
            const currentOption = myChart.getOption();

            if (currentOption.series[0].type === 'bar') {
                myChart.setOption({
                    series: [{
                        data: newData
                    }]
                });
            } else if (currentOption.series[0].type === 'line') {
                myChart.setOption({
                    series: [{
                        data: newData
                    }, {
                        data: newData.map(v => v * 0.3)
                    }]
                });
            } else if (currentOption.series[0].type === 'pie') {
                myChart.setOption({
                    series: [{
                        data: categories.map((cat, index) => ({
                            value: newData[index],
                            name: cat
                        }))
                    }]
                });
            }
        }

        // Initialize with bar chart
        showBarChart();

        // Responsive handling
        window.addEventListener('resize', function() {
            myChart.resize();
        });
    </script>
</body>
</html>

КодhtmlСредний

Интерактивная панель ECharts

Расширенная панель ECharts с несколькими типами диаграмм, обновлениями в реальном времени и интерактивными фильтрами

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts Interactive Dashboard</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f0f2f5;
        }
        .dashboard {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 1400px;
            margin: 0 auto;
        }
        .chart-box {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .chart-container {
            width: 100%;
            height: 300px;
        }
        .large-chart {
            grid-column: span 2;
        }
        .tall-chart {
            grid-row: span 2;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .controls {
            text-align: center;
            margin-bottom: 20px;
        }
        .date-range {
            margin: 0 10px;
        }
        h2 {
            margin: 0 0 10px 0;
            color: #333;
        }
        .chart-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }
        button {
            padding: 8px 16px;
            margin: 0 5px;
            cursor: pointer;
            background: #4e79a7;
            color: white;
            border: none;
            border-radius: 4px;
        }
        button:hover {
            background: #3a5991;
        }
        @media (max-width: 1200px) {
            .dashboard {
                grid-template-columns: repeat(2, 1fr);
            }
            .large-chart {
                grid-column: span 1;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>📊 Enterprise Data Analytics Dashboard</h1>
        <div class="controls">
            <label>Time Range:</label>
            <select class="date-range" onchange="updateTimeRange(this.value)">
                <option value="7">Last 7 days</option>
                <option value="30" selected>Last 30 days</option>
                <option value="90">Last 90 days</option>
            </select>
            <button onclick="refreshData()">🔄 Refresh Data</button>
            <button onclick="exportReport()">📥 Export Report</button>
        </div>
    </div>

    <div class="dashboard">
        <!-- Sales Trend Chart -->
        <div class="chart-box large-chart">
            <div class="chart-title">📈 Sales Trend Analysis</div>
            <div id="salesChart" class="chart-container"></div>
        </div>

        <!-- Product Distribution Pie Chart -->
        <div class="chart-box">
            <div class="chart-title">🎯 Product Sales Distribution</div>
            <div id="productChart" class="chart-container"></div>
        </div>

        <!-- Regional Distribution Map -->
        <div class="chart-box large-chart">
            <div class="chart-title">🗺️ Regional Sales Distribution</div>
            <div id="mapChart" class="chart-container"></div>
        </div>

        <!-- KPI Gauge Chart -->
        <div class="chart-box">
            <div class="chart-title">⚡ KPI Completion Rate</div>
            <div id="gaugeChart" class="chart-container"></div>
        </div>

        <!-- Sales Funnel Chart -->
        <div class="chart-box tall-chart">
            <div class="chart-title">🔍 Sales Funnel Analysis</div>
            <div id="funnelChart" class="chart-container"></div>
        </div>

        <!-- Sales Heatmap -->
        <div class="chart-box">
            <div class="chart-title">🔥 Sales Heatmap</div>
            <div id="heatmapChart" class="chart-container"></div>
        </div>
    </div>

    <script>
        // Chart instances storage
        const charts = {};

        // Initialize all charts
        function initCharts() {
            charts.sales = echarts.init(document.getElementById('salesChart'));
            charts.product = echarts.init(document.getElementById('productChart'));
            charts.map = echarts.init(document.getElementById('mapChart'));
            charts.gauge = echarts.init(document.getElementById('gaugeChart'));
            charts.funnel = echarts.init(document.getElementById('funnelChart'));
            charts.heatmap = echarts.init(document.getElementById('heatmapChart'));
        }

        // Generate mock data
        function generateSalesData(days = 30) {
            const dates = [];
            const sales = [];
            const profit = [];
            const today = new Date();

            for (let i = days - 1; i >= 0; i--) {
                const date = new Date(today);
                date.setDate(date.getDate() - i);
                dates.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));

                const baseSales = 1000 + Math.sin(i / 5) * 200;
                sales.push(Math.floor(baseSales + Math.random() * 500));
                profit.push(Math.floor(baseSales * 0.3 + Math.random() * 100));
            }

            return { dates, sales, profit };
        }

        // Sales trend chart configuration
        function getSalesOption(data) {
            return {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['Sales', 'Profit'],
                    top: 0
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: data.dates
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'Sales',
                        position: 'left',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: 'Profit',
                        position: 'right',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: 'Sales',
                        type: 'line',
                        smooth: true,
                        lineStyle: {
                            width: 3
                        },
                        areaStyle: {
                            opacity: 0.3
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: data.sales
                    },
                    {
                        name: 'Profit',
                        type: 'line',
                        smooth: true,
                        yAxisIndex: 1,
                        lineStyle: {
                            width: 3
                        },
                        areaStyle: {
                            opacity: 0.3
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: data.profit
                    }
                ]
            };
        }

        // Product distribution pie chart configuration
        function getProductOption() {
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Product Category',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['60%', '50%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 1048, name: 'Electronics' },
                            { value: 735, name: 'Clothing' },
                            { value: 580, name: 'Home & Garden' },
                            { value: 484, name: 'Sports' },
                            { value: 300, name: 'Others' }
                        ]
                    }
                ]
            };
        }

        // Initialize all charts with data
        function updateAllCharts() {
            const salesData = generateSalesData();

            charts.sales.setOption(getSalesOption(salesData));
            charts.product.setOption(getProductOption());

            // Additional chart configurations would go here
            // For brevity, showing placeholder configurations
            charts.map.setOption({
                title: { text: 'Regional Map', left: 'center' },
                xAxis: { type: 'category' },
                yAxis: { type: 'value' },
                series: [{
                    type: 'scatter',
                    data: [
                        [10, 20], [20, 30], [30, 25], [40, 35], [50, 40]
                    ]
                }]
            });

            charts.gauge.setOption({
                series: [{
                    type: 'gauge',
                    data: [{ value: 85, name: 'Completion Rate' }]
                }]
            });

            charts.funnel.setOption({
                series: [{
                    type: 'funnel',
                    data: [
                        { value: 100, name: 'Visitors' },
                        { value: 80, name: 'Clicks' },
                        { value: 60, name: 'Inquiries' },
                        { value: 25, name: 'Orders' }
                    ]
                }]
            });

            charts.heatmap.setOption({
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed']
                },
                yAxis: {
                    type: 'category',
                    data: ['Morning', 'Afternoon']
                },
                visualMap: {
                    min: 0,
                    max: 100,
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '5%'
                },
                series: [{
                    type: 'heatmap',
                    data: [
                        [0, 0, 10], [1, 0, 20], [2, 0, 30],
                        [0, 1, 20], [1, 1, 40], [2, 1, 60]
                    ]
                }]
            });
        }

        // Update time range
        function updateTimeRange(days) {
            const salesData = generateSalesData(parseInt(days));
            charts.sales.setOption(getSalesOption(salesData));
        }

        // Refresh data
        function refreshData() {
            Object.values(charts).forEach(chart => {
                chart.showLoading();
            });

            setTimeout(() => {
                updateAllCharts();
                Object.values(charts).forEach(chart => {
                    chart.hideLoading();
                });
            }, 1000);
        }

        // Export report
        function exportReport() {
            alert('Export functionality would be implemented here');
        }

        // Responsive handling
        window.addEventListener('resize', function() {
            Object.values(charts).forEach(chart => {
                chart.resize();
            });
        });

        // Initialize on load
        document.addEventListener('DOMContentLoaded', function() {
            initCharts();
            updateAllCharts();
        });
    </script>
</body>
</html>

КодhtmlСложный

Продвинутая визуализация ECharts

Сложные визуализации ECharts включая 3D-диаграммы, анимации и пользовательские компоненты

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts Advanced Visualization</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-gl.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            color: white;
            margin-bottom: 30px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }
        .visualization-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 20px;
        }
        .viz-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            backdrop-filter: blur(10px);
        }
        .viz-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .chart-container {
            width: 100%;
            height: 400px;
            position: relative;
        }
        .small-chart {
            height: 300px;
        }
        .controls {
            margin-top: 15px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .control-btn {
            padding: 8px 16px;
            border: none;
            border-radius: 8px;
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            cursor: pointer;
            font-size: 14px;
            transition: transform 0.2s;
        }
        .control-btn:hover {
            transform: translateY(-2px);
        }
        .full-width {
            grid-column: span 2;
        }
        @media (max-width: 900px) {
            .visualization-grid {
                grid-template-columns: 1fr;
            }
            .full-width {
                grid-column: span 1;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎨 ECharts Advanced Visualization Lab</h1>
            <p>Explore 3D charts, dynamic effects, and custom components</p>
        </div>

        <div class="visualization-grid">
            <!-- 3D Scatter Plot -->
            <div class="viz-card">
                <div class="viz-title">🌐 3D Scatter Plot</div>
                <div id="scatter3D" class="chart-container"></div>
                <div class="controls">
                    <button class="control-btn" onclick="toggle3DRotation()">Toggle Rotation</button>
                    <button class="control-btn" onclick="change3DData()">Change Data</button>
                </div>
            </div>

            <!-- Network Graph -->
            <div class="viz-card">
                <div class="viz-title">🕸️ Dynamic Network Graph</div>
                <div id="graphChart" class="chart-container"></div>
                <div class="controls">
                    <button class="control-btn" onclick="addNode()">Add Node</button>
                    <button class="control-btn" onclick="removeNode()">Remove Node</button>
                </div>
            </div>

            <!-- 3D Surface Plot -->
            <div class="viz-card full-width">
                <div class="viz-title">🏔️ 3D Surface Plot</div>
                <div id="surface3D" class="chart-container small-chart"></div>
                <div class="controls">
                    <button class="control-btn" onclick="changeSurface()">Change Function</button>
                    <button class="control-btn" onclick="toggleWireframe()">Toggle Wireframe</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Global variables
        const charts = {};
        let animationFrameId = null;
        let isRotating3D = false;

        // Initialize all charts
        function initCharts() {
            init3DScatter();
            initGraphChart();
            init3DSurface();
        }

        // 3D Scatter Plot
        function init3DScatter() {
            charts.scatter3D = echarts.init(document.getElementById('scatter3D'));

            const data = generate3DScatterData();

            const option = {
                backgroundColor: 'transparent',
                visualMap: {
                    show: true,
                    dimension: 2,
                    min: -5,
                    max: 5,
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                    }
                },
                xAxis3D: { type: 'value' },
                yAxis3D: { type: 'value' },
                zAxis3D: { type: 'value' },
                grid3D: {
                    viewControl: { projection: 'perspective' }
                },
                series: [{
                    type: 'scatter3D',
                    data: data,
                    symbolSize: 12,
                    itemStyle: { opacity: 0.8 }
                }]
            };

            charts.scatter3D.setOption(option);
        }

        function generate3DScatterData() {
            const data = [];
            for (let i = 0; i < 500; i++) {
                data.push([
                    Math.random() * 20 - 10,
                    Math.random() * 20 - 10,
                    Math.random() * 10 - 5
                ]);
            }
            return data;
        }

        function toggle3DRotation() {
            isRotating3D = !isRotating3D;

            if (isRotating3D) {
                let angle = 0;
                function rotate() {
                    if (!isRotating3D) return;

                    angle += 0.01;
                    charts.scatter3D.setOption({
                        grid3D: {
                            viewControl: {
                                beta: angle * 180 / Math.PI
                            }
                        }
                    });

                    animationFrameId = requestAnimationFrame(rotate);
                }
                rotate();
            } else {
                if (animationFrameId) {
                    cancelAnimationFrame(animationFrameId);
                }
            }
        }

        function change3DData() {
            const newData = generate3DScatterData();
            charts.scatter3D.setOption({
                series: [{ data: newData }]
            });
        }

        // Network Graph
        function initGraphChart() {
            charts.graph = echarts.init(document.getElementById('graphChart'));

            const option = {
                backgroundColor: 'transparent',
                series: [{
                    type: 'graph',
                    layout: 'force',
                    data: [
                        { name: 'Node 1', x: 300, y: 300, symbolSize: 50 },
                        { name: 'Node 2', x: 500, y: 300, symbolSize: 40 },
                        { name: 'Node 3', x: 400, y: 450, symbolSize: 45 },
                        { name: 'Node 4', x: 600, y: 400, symbolSize: 35 }
                    ],
                    links: [
                        { source: 0, target: 1 },
                        { source: 0, target: 2 },
                        { source: 1, target: 3 }
                    ],
                    roam: true,
                    force: { repulsion: 1000 }
                }]
            };

            charts.graph.setOption(option);
            charts.graph.nodeIdCounter = 4;
        }

        function addNode() {
            const option = charts.graph.getOption();
            const newNode = {
                name: `Node ${charts.graph.nodeIdCounter + 1}`,
                x: Math.random() * 400 + 200,
                y: Math.random() * 300 + 200,
                symbolSize: Math.random() * 30 + 20
            };

            option.series[0].data.push(newNode);

            // Connect to a random existing node
            if (option.series[0].data.length > 1) {
                const targetIndex = Math.floor(Math.random() * (option.series[0].data.length - 1));
                option.series[0].links.push({
                    source: option.series[0].data.length - 1,
                    target: targetIndex
                });
            }

            charts.graph.setOption(option);
            charts.graph.nodeIdCounter++;
        }

        function removeNode() {
            const option = charts.graph.getOption();
            if (option.series[0].data.length > 3) {
                option.series[0].data.pop();
                if (option.series[0].links.length > 0) {
                    option.series[0].links.pop();
                }
                charts.graph.setOption(option);
            }
        }

        // 3D Surface Plot
        function init3DSurface() {
            charts.surface3D = echarts.init(document.getElementById('surface3D'));
            update3DSurface();
        }

        function generateSurfaceData() {
            const data = [];
            for (let i = -10; i <= 10; i++) {
                for (let j = -10; j <= 10; j++) {
                    data.push([i, j, Math.sin(i / 2) * Math.cos(j / 2)]);
                }
            }
            return data;
        }

        function update3DSurface() {
            const data = generateSurfaceData();

            const option = {
                backgroundColor: 'transparent',
                visualMap: {
                    show: true,
                    dimension: 2,
                    min: -1,
                    max: 1,
                    inRange: {
                        color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf']
                    }
                },
                xAxis3D: { type: 'value' },
                yAxis3D: { type: 'value' },
                zAxis3D: { type: 'value' },
                grid3D: {
                    boxWidth: 200,
                    boxDepth: 200,
                    viewControl: { projection: 'perspective' }
                },
                series: [{
                    type: 'surface',
                    data: data,
                    wireframe: { show: true },
                    itemStyle: { opacity: 0.9 }
                }]
            };

            charts.surface3D.setOption(option);
        }

        function changeSurface() {
            update3DSurface();
        }

        function toggleWireframe() {
            const option = charts.surface3D.getOption();
            const currentWireframe = option.series[0].wireframe.show;
            option.series[0].wireframe.show = !currentWireframe;
            charts.surface3D.setOption(option);
        }

        // Responsive handling
        window.addEventListener('resize', function() {
            Object.values(charts).forEach(chart => {
                if (chart && chart.resize) {
                    chart.resize();
                }
            });
        });

        // Initialize on load
        document.addEventListener('DOMContentLoaded', function() {
            initCharts();
        });
    </script>
</body>
</html>

Инструменты

Инструменты, которые часто используются с этим примером

Связано

Примеры Apache ECharts

Элементы этой коллекции

Базовые диаграммы ECharts

Интерактивная панель ECharts

Продвинутая визуализация ECharts

Инструменты, которые часто используются с этим примером

Похожие коллекции примеров

Контекст для понимания этой коллекции примеров

Обзор

Когда использовать

Как это работает

Сценарии использования

FAQ

Экстрактор токенов темы ECharts

Парсер Логов - Apache/Nginx Access Log Parser

Генератор Площадных Диаграмм

Bar Chart Generator

Генератор Пузырьковой Диаграммы

Генератор Спидометра

Line Chart Generator

Pie Chart Generator

Примеры Chart.js Library

Примеры D3.js Визуализации Данных

Примеры Observable Notebooks

Примеры Расширенного Применения Grafana

Примеры Plotly Interactive Charts