html+js+echarts实现折线图、饼状图、环形图

最新推荐文章于 2024-04-08 16:11:32 发布

Upward Force

最新推荐文章于 2024-04-08 16:11:32 发布

阅读量9.5k

点赞数 9

分类专栏：图表 html Echarts 文章标签： html5 js css 数据可视化 canvas

本文链接：https://blog.csdn.net/qq_43884155/article/details/106995653

版权

图表同时被 3 个专栏收录

8 篇文章 1 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

Echarts

3 篇文章 0 订阅

订阅专栏

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>

Upward Force

关注

9
点赞
踩
61

收藏

觉得还不错? 一键收藏
2
评论
html+js+echarts实现折线图、饼状图、环形图

1、从GitHub上下载 echarts.js 文件https://github.com/apache/incubator-echarts/blob/master/dist/echarts.js2、通过标签方式直接引入下载好的 echarts.js 文件<script type="text/javascript" src="js/echarts.js"></script>3、html+echarts实现折线图效果代码示例<!DOCTYPE html>&
复制链接

扫一扫