Vscode运行Echarts案例使用教程（大学生小白）

发财糕

已于 2024-03-12 20:06:02 修改

阅读量1.3k

点赞数 14

文章标签： vscode ide 编辑器

于 2024-03-12 20:05:31 首次发布

发财糕

本文链接：https://blog.csdn.net/zhangfafa_c/article/details/136661406

版权

Vscode安装与配置

Vscode安装与配置：教程

Vscode运行Echarts

本文案例为折线图与柱形图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ECharts 折线图和条形图</title>
    <!-- 引入 ECharts -->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!-- 折线图容器 -->
    <div id="line-chart" style="width: 600px;height:400px;"></div>
    <!-- 条形图容器 -->
    <div id="bar-chart" style="width: 600px;height:400px;"></div>
    <!-- 更新数据按钮 -->
    <button id="update-btn">更新数据</button>

    <script>
        // 基于准备好的dom，初始化echarts实例  
        var lineChart = echarts.init(document.getElementById('line-chart'));
        var barChart = echarts.init(document.getElementById('bar-chart'));

        // 初始数据  
        var initialData = [35,15,54,25];

        // 更新图表数据  
        function updateChartData(chart, newData) {
            chart.setOption({
                series: [{
                    data: newData,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' },
                            { type: 'average', name: '平均值' }
                        ]
                    }
                }]
            });
        }

        // 设置折线图选项  
        function setLineChartOptions(data) {
            lineChart.setOption({
                title: {
                    text: '折线图示例'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['小张', '小明', '小陈', '小王八蛋']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: [{
                    name: '数据',
                    type: 'line',
                    data: data
                }]
            });
        }

        // 设置条形图选项  
        function setBarChartOptions(data) {
            barChart.setOption({
                title: {
                    text: '条形图示例'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['小张', '小明', '小陈', '小王八蛋']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    }
                },
                series: [{
                    name: '数据',
                    type: 'bar',
                    data: data
                }]
            });
        }

        // 初始设置图表选项  
        setLineChartOptions(initialData);
        setBarChartOptions(initialData);

        // 动态触发更新数据  
        document.getElementById('update-btn').addEventListener('click', function () {
            // 假设您有一些新的数据  
            var newData = [35, 15, 54, 25];

            // 更新折线图和条形图的数据  
            updateChartData(lineChart, newData);
            updateChartData(barChart, newData);
        });  
    </script>
</body>

关键代码

关键代码为：

<script>
        // 基于准备好的dom，初始化echarts实例  
        var lineChart = echarts.init(document.getElementById('line-chart'));
        var barChart = echarts.init(document.getElementById('bar-chart'));

        // 初始数据  
        var initialData = [35,15,54,25];

        // 更新图表数据  
        function updateChartData(chart, newData) {
            chart.setOption({
                series: [{
                    data: newData,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' },
                            { type: 'average', name: '平均值' }
                        ]
                    }
                }]
            });
        }

        // 设置折线图选项  
        function setLineChartOptions(data) {
            lineChart.setOption({
                title: {
                    text: '折线图示例'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['小张', '小明', '小陈', '小王八蛋']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: [{
                    name: '数据',
                    type: 'line',
                    data: data
                }]
            });
        }

        // 设置条形图选项  
        function setBarChartOptions(data) {
            barChart.setOption({
                title: {
                    text: '条形图示例'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['小张', '小明', '小陈', '小王八蛋']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} '
                    }
                },
                series: [{
                    name: '数据',
                    type: 'bar',
                    data: data
                }]
            });
        }

        // 初始设置图表选项  
        setLineChartOptions(initialData);
        setBarChartOptions(initialData);

        // 动态触发更新数据  
        document.getElementById('update-btn').addEventListener('click', function () {
            // 假设您有一些新的数据  
            var newData = [35, 15, 54, 25];

            // 更新折线图和条形图的数据  
            updateChartData(lineChart, newData);
            updateChartData(barChart, newData);
        });  
    </script>