1、从GitHub上下载 echarts.js 文件
https://github.com/apache/incubator-echarts/blob/master/dist/echarts.js

2、通过标签方式直接引入下载好的 echarts.js 文件

<script type="text/javascript" src="js/echarts.js"></script>

3、html+echarts实现折线图

效果
在这里插入图片描述
代码示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #line {
            width: 400px;
            height: 400px;
        }
    </style>
    <script type="text/javascript" src="js/echarts.js"></script>
</head>

<body>
    <div id="line"></div>
    <script>
        // 折线图
        // 基于准备好的dom，初始化echarts实例
        var line = echarts.init(document.getElementById('line'));
        // 指定图表的配置项和数据
        lineOption = {
            // 标题
            title: {
                text: 'echarts实现折线图'
            },
            // 图例
            tooltip: {
                show: true,
                trigger: "axis",
                backgroundColor: "#1677FF",
                // {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
                formatter: "{b}：{c}元"
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '价格',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line'
            }]
        };
        line.setOption(lineOption);
    </script>
</body>

</html>

4、html+echarts实现饼状图

效果
在这里插入图片描述
代码示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #pie {
            width: 400px;
            height: 400px;
        }
    </style>
    <script type="text/javascript" src="js/echarts.js"></script>
</head>

<body>
    <div id="pie"></div>
    <script>
        // 饼状图
        // 基于准备好的dom，初始化echarts实例
        var pie = echarts.init(document.getElementById('pie'));
        // 指定图表的配置项和数据
        pieOption = {
            // 标题
            title: {
                text: 'echarts实现饼状图'
            },
            // 图例
            tooltip: {
                show: true,
                trigger: "item",
                backgroundColor: "#1677FF",
                // {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
                formatter: "{a}：{b}<br/>{c}吨({d}%)"
            },
            // 不同区域的颜色
            color: ['#3e87ff', '#65b2f3', '#b9cfec'],
            series: [
                {
                    name: '品种',
                    type: 'pie',
                    // 数组的第一项是内半径，第二项是外半径；可以设置不同的内外半径显示成圆环图
                    radius: '50%',
                    // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标；设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
                    center: ['50%', '50%'],
                    data: [
                        { value: 2000, name: '苹果' },
                        { value: 2000, name: '油桃' },
                        { value: 4000, name: '西瓜' },

                    ],
                    itemStyle: {
                        // 显示图例
                        normal: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            }
                        },
                        emphasis: {
                            // 图形阴影的模糊大小
                            shadowBlur: 10,
                            // 阴影水平方向上的偏移距离
                            shadowOffsetX: 0,
                            // 阴影颜色
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        pie.setOption(pieOption);
    </script>
</body>

</html>

5、html+echarts实现环状图

效果
在这里插入图片描述
代码示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #pieHuan {
            width: 400px;
            height: 400px;
        }
    </style>
    <script type="text/javascript" src="js/echarts.js"></script>
</head>

<body>
    <div id="pieHuan"></div>
    <script>
        // 环形图
        var pieHuan = echarts.init(document.getElementById('pieHuan'));
        pieHuanOption = {
            // 标题
            title: {
                text: 'echarts实现环形图'
            },
            // 图例
            tooltip: {
                show: true,
                trigger: "item",
                backgroundColor: "#1677FF",
                // {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
                formatter: "{a}：{b}<br/>{c}条({d}%)"
            },
            // 不同区域的颜色
            color: ['#65a5ff', '#dcebff'],
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    // 数组的第一项是内半径，第二项是外半径；可以设置不同的内外半径显示成圆环图
                    radius: ['30%', '50%'],
                    // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标；设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
                    center: ['50%', '50%'],
                    itemStyle: {
                        // 显示图例
                        normal: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: true
                            }
                        },
                        emphasis: {
                            label: {
                                // 标签内容是否高亮
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        }
                    },
                    data: [
                        { value: 335, name: '百度' },
                        { value: 335, name: '搜狐' }
                    ]
                }
            ]
        };
        pieHuan.setOption(pieHuanOption);
    </script>
</body>

</html>
# html5 # css
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届openEuler生态大会（中国·湖南）成功举办

10月30日，第二届openEuler生态大会（中国·湖南）成功举办。

avatar 开放原子开发者工作坊

“小满”安全车控操作系统正式在AtomGit开源

10月24日，由中国汽车工业协会指导，普华基础软件股份有限公司主办的“小满”安全车控操作系统开源发布会暨共建计划说明会成功举行。普华基础软件宣布将安全车控操作系统“小满”（简称“小满”）V24.10源代码正式在开放原子开源基金会（简称“基金会”）旗下AtomGit开源协作平台开源，并在AtomGit平

avatar 开放原子开发者工作坊

开放原子大赛——CIKM 2024赛果揭晓，10强争霸，角逐第33届国际信息与知识管理大会

开放原子大赛——CIKM 2024赛果揭晓，10强争霸，角逐第33届国际信息与知识管理大会

avatar 开放原子开发者工作坊