ECharts开源图表实例

最新推荐文章于 2024-06-26 11:09:42 发布
最新推荐文章于 2024-06-26 11:09:42 发布
阅读量426 收藏 1
点赞数
分类专栏： web前端 文章标签： js javascript html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45648614/article/details/104868851
版权
1、折线图

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.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!--创建容器-->
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
    //初始化ECharts对象
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据(创建Option对象)
    var option = {
        title: {
            text: '温度'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle: {
                color: '#fff',
                fontSize: 20
            }
        },
        grid: {},
        legend: {
            data: ['度数']
        },
        xAxis: {
            data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50"]
        },
        yAxis: {},
        series: [{
            name: '度数',
            type: 'line',
            data: [15, 21, 20, 25, 30, 23]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
2、多线折线图

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.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!--创建容器-->
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
    //初始化ECharts对象
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据(创建Option对象)
    var option = {
        title: {
            text: '实时数据'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle: {
                color: '#fff',
                fontSize: 20
            }
        },
        grid: {},
        legend: {
            data: ['温度', '湿度']
        },
        xAxis: {
            data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50"]
        },
        yAxis: {},
        series: [{
            name: '温度',
            type: 'line',
            color: ['red'],
            data: [15, 21, 20, 25, 30, 23]
        }, {
            name: '湿度',
            type: 'line',
            color: ['blue'],
            data: [50, 60, 70, 65, 60, 75]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
3、柱状图

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.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!--创建容器-->
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
    //初始化ECharts对象
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据(创建Option对象)
    var option = {
        title: {
            text: '实时数据'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle: {
                color: '#fff',
                fontSize: 20
            }
        },
        grid: {},
        legend: {
            data: ['温度', '湿度']
        },
        xAxis: {
            data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50"]
        },
        yAxis: {},
        series: [{
            name: '温度',
            type: 'bar',
            color: ['red'],
            data: [15, 21, 20, 25, 30, 23]
        }, {
            name: '湿度',
            type: 'bar',
            color: ['blue'],
            data: [50, 60, 70, 65, 60, 75]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
4、堆叠柱状图

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.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!--创建容器-->
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
    //初始化ECharts对象
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据(创建Option对象)
    var option = {
        title: {
            text: '实时数据'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle: {
                color: '#fff',
                fontSize: 20
            }
        },
        grid: {},
        legend: {
            data: ['温度', '湿度']
        },
        xAxis: {
            data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50"]
        },
        yAxis: {},
        series: [{
            name: '温度',
            type: 'bar',
            stack: '环境',
            color: ['red'],
            data: [15, 21, 20, 25, 30, 23]
        }, {
            name: '湿度',
            type: 'bar',
            stack: '环境',
            color: ['blue'],
            data: [50, 60, 70, 65, 60, 75]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
5、横向柱状图

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.min.js文件-->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!--创建容器-->
    <div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
    //初始化ECharts对象
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据(创建Option对象)
    var option = {
        title: {
            text: '实时数据'
        },
        tooltip: {
            show: true,
            trigger: 'axis',
            textStyle: {
                color: '#fff',
                fontSize: 20
            }
        },
        grid: {},
        legend: {
            data: ['温度', '湿度']
        },
        xAxis: {},
        yAxis: {
            data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50"]
        },
        series: [{
            name: '温度',
            type: 'bar',
            color: ['red'],
            data: [15, 21, 20, 25, 30, 23]
        }, {
            name: '湿度',
            type: 'bar',
            color: ['blue'],
            data: [50, 60, 70, 65, 60, 75]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>
6、饼状图

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>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 400px;height: 400px;"></div>
</body>
<script>
    var mechart = echarts.init(document.querySelector("#main"));
    mechart.setOption({
        title: {
            text: '违章车辆占比统计'
        },
        grid: {},
        legend: {
            data: ['有违章', '无违章'],
            y: 'bottom'
        },
        series: [{
            name: '消息分析',
            type: 'pie',
            radius: '55%',
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        fontWeight: 400,
                        fontSize: 16
                    },
                    formatter: '{b}{d}%'
                }
            },
            data: [{
                name: '有违章',
                value: 30
            }, {
                name: '无违章',
                value: 70
            }],
            color: ['red', 'blue']
        }]
    });
</script>
</html>
7、环形图

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>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 500px;height: 500px;"></div>
</body>
<script>
    var mechart = echarts.init(document.querySelector("#main"));
    mechart.setOption({
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'horizontal',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [{
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                //强调
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 335,
                name: '直接访问'
            }, {
                value: 310,
                name: '邮件营销'
            }, {
                value: 234,
                name: '联盟广告'
            }, {
                value: 135,
                name: '视频广告'
            }, {
                value: 1548,
                name: '搜索引擎'
            }]
        }]
    });
</script>
</html>
Mr. Zhang
关注
专栏目录
echarts开源图表使用
段吉清的博客
05-05 155
echarts开源图表使用 1.资源链接 echarts官网 2.资源引入 <script src="../echarts.all.min.js"></script> 3.HTML中图表容器 <div id="main" ></div> 4.echarts初始化 <script type="text/javascript"> var ...
Echarts 开源的可视化图表库 快速制图工具
weixin_57110180的博客
03-29 1699
说明： 制图工具，开源的，国内最流行的可视化图表库 安装 在echarts CDN by jsDelivr - A CDN for npm and GitHub选择dist/echarts.js，点击并保存文件 <script src="echarts.js"></script> 使用 入门案例： 先声明一个图表容器 ，注意容器必须要有宽高 <div class="contanier"> <div class="demo1"...
【Echarts】使用及应用案例
最新发布
每天進步一點點
06-26 1678
第一种引入方式：把下载好的echarts.js 文件存放到js文件下，通过script标签的src属性引入。min:压缩 ，省去空格、换行，所有的代码在一行中书写。// 基于准备好的dom，初始化echarts实例。// 基于准备好的dom，初始化echarts实例。未压缩：保留的空格、换行。// 使用刚指定的配置项和数据显示图表。// 使用刚指定的配置项和数据显示图表。// 指定图表的配置项和数据。// 指定图表的配置项和数据。//鼠标指向柱状图浮出详情。//鼠标指向柱状图浮出详情。
ECharts开源图表使用方法简单介绍
weixin_34032792的博客
04-30 90
ECharts图表是基于Canvas，纯Javascript图表库，基于BSD开源协议，官网地址：http://echarts.baidu.com/index.html 需要先下载插件：https://github.com/ecomfe/echarts/archive/1.4.1.zip 1. 首先需要在文件中引入JS库，可以使用百度的CDN <script src="htt...
发现百度开源一个好东西，Echarts统计报表前段框架
freewebsys的专栏
11-14 9822
1，现在数据越来越重要了 但是数据报表的可视化展示一直是个问题。 现在好了。有Echarts可以解决一部分数据展示的问题。 http://echarts.baidu.com/index.html 2，admin后台样式 非常漂亮，可惜是收费的。 http://www.zi-han.net/theme/se7en/
eCharts制作数据报表
dengwenwei121的专栏
11-20 260
折线堆积面积图: html页面代码: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt...
echarts考试分数统计图表实例
07-24
本实例"echarts考试分数统计图表实例"就是基于ECharts进行的一种数据可视化的实践，它利用Vue.js框架来构建，并展示了如何使用ECharts绘制不同的图表类型。 首先，我们来看雷塔图（Radar Chart）。雷塔图是一种多维...
vue.js+Echarts开发图表放大缩小功能实例
10-19
Echarts是一个使用JavaScript实现的开源可视化库，可以在网页中快速绘制各种图表，而Vue.js是一个构建用户界面的渐进式框架。将两者结合起来，可以方便地构建出动态、交互式的图表应用。 文章一开始提到了作者从...
开源图表echarts-经典图表代码整理
11-26
3. 初始化图表：使用`echarts.init`方法初始化图表实例，指定容器ID。 4. 设置配置项：使用`setOption`方法设置图表的样式、数据等配置项。 5. 渲染图表：调用`render`方法或者直接在`setOption`后执行，完成图表...
在Vue中使用Echarts实例图的方法实例
10-14
Echarts是一个由百度团队开发的开源可视化库，可以实现丰富的图表类型，而Vue是一个流行的JavaScript框架，用于构建用户界面。在Vue中使用Echarts涉及到几个关键步骤，包括安装Echarts、在组件中引入Echarts、创建...
开源echarts实现的BI数据可视化图表，总有你能用上的
han_xue_feng的博客
11-28 534
我投的是无线逻辑，意向地是东莞和上海。我签了一个军工研究所，我们学校盖章有两个，一个是用人单位人事部盖章，一个是用人单位上级主管部门盖章，但是他们给我盖的章只有用人单位人事部的章，上级主管部门盖章的。双非本24届毕业生，无竞赛无实习，不考研不考公不靠编，Boss上沟通了一千七百多家，大多都是已读不回，好多都是未读，投出的简历也只有一百多家，找了快两个月的工作。技术面，问了一个多小时，很专业，但是问了很多我没干的事，问到最后我不耐烦了，直接给他说，我开头就说过了，我没做这块工作，懂了吗?
echarts图表示例教程
02-11
echarts图表示例教程
eCharts百度统计图表 开源 大数据 JS
08-14
ECharts是一款开源、功能强大的数据可视化产品，代表了新一代的大数据可视化基础库。
Echarts实例
11-29
简单的Echars使用小demo,解压后，直接点html便可以看到效果
三个实例图表三个图表实例很好用的
12-06
三个图表实例很好用的，包括数据库，呵呵，都来下吧
echarts官网实例
08-24
echarts
基于ECharts报表开发
12-02 192
今天给甲方客户与同行公司做了ECharts的培训与交流，准备启动基于ECharts的报表开发项目，不做报表工具替换，只做补充。 有很多想法，有待细化。 转载于:https://my.os...
开源可视化库 —— ECharts
淮
01-18 7875
介绍  今天做项目时需要实现数据可视化功能，了解一番后选择使用ECharts，今天特此整理一下，作为笔记，同时希望帮助更多人。  首先简单介绍一下，ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开源协议，是一款非常优秀的可视化前端框架。 官网地址：https://echarts.apache.org/zh/index.html 官方文档：https://echarts.apache.org/zh/tutorial.html#5%20%E5%8
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值