ECharts实训

原创 已于 2024-03-18 21:35:05 修改 · 709 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#echarts #前端 #javascript

于 2024-03-18 11:32:43 首次发布

1.1堆叠柱状图：会员年龄分布

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '会员年龄分布',
                // subtext: '这里是副标题',
            },
            tooltip: {},
            legend: {
                data: ['男','女'],
            },
            toolbox:{
                show:true,
                feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{show:true,type:['line','bar']},
                    restore:{show:true},
                    saveAsImage:{show: true},
 
                },
            },
			xAxis:{
				data:["18-19","19-20","20-21","211-22","22-23","23-24"]
			},
            yAxis:{},
			series:[
                {
				name:'男',
                type:'bar',
                stack:'1',
                data:[5,12,18,10,15,19],
                label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360, // 旋转角度
            position: '' // 显示位置
          }, 
			    },
                {
				name:'女',
                type:'bar',
                stack:'1',
                data:[4,5,9,11,15,13],
                label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360, // 旋转角度
            position:'' // 显示位置
          },
			    },
            ]
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

1.2条形图：会员入会渠道

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '会员入会渠道',
                left:200
                // subtext: '这里是副标题',
            },
            tooltip: {},
            legend: {
                data: ['男','女'],
                left:0,
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
			xAxis:{
				
			},
            yAxis:{
                data:["自愿","推广","网络平台","朋友介绍"]
            },
			series:[
                {
				name:'男',
                type:'bar',
                stack:'1',
                data:[10,12,18,10,15,19],
                label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360, // 旋转角度
            position: '' // 显示位置
          },
			    },
                {
				name:'女',
                type:'bar',
                stack:'1',
                data:[16,6,9,11,15,13],
                label: { // 柱状图上的文字设置
            show: true, // 是否显示
            rotate: 360, // 旋转角度
            position: 'right' // 显示位置
          },
			    },
                
            ]
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

 1.3瀑布图：不同城市会员消费总金额分布

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8"> 
    <!--引入ECharts脚本-->
    <!-- <第一步引入脚本> -->
    <script src="js/echarts.js"></script> 
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript"> 
        //第二步基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //第三步指定图表的配置项和数据
        var option = {
            title: {  //定义标题
                text: '不同城市会员消费总金额分布',
                left:'center'
            },
            tooltip: {  //触发
                trigger:'axis',
            },
            toolbox:{
                show:true,
                feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{show:true,type:['line','bar']},
                    restore:{show:true},
                    saveAsImage:{show: true}
                },
            },
            calaulable:true,
			xAxis:{ //定义x轴
                type: 'category',
                data:['总','武汉','成都','四川','重庆']
			},
            yAxis:{  //定义Y轴
                    type: 'value',  //设置柱状图
                    boundaryGap: [0, 0.01],
            },
			series:[
                {
				name:"a",
                type:'bar', //图表类型
                stack:'总量',
                itemStyle:{//正常柱子颜色
                    normal:{
                        barBorderColor:'rgba(0,0,0,0)',
                        barBorderWidth:5,
                        color:'rgba(0,0,0,0)'
 
                    },
                    emphasis:{ //鼠标移动到柱子颜色
                        barBorderColor:'rgba(0,0,0,0)',
                        barBorderWidth:25,
                        color:'rgba(20,20,20,0.9)'
                    }
                },
                    data:[0,1700,1400,1200,0],
			} ,
 
            {
				name:"b",
                type:'bar', //图表类型
                stack:'总量',//数据堆叠
                itemStyle:{normal:{label:{show:true,position:'inside'}}},
                data:[2900,1200,300,200,1200]
          
   
         
			},
        ]
        };
 
        //第五步使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

2.1饼图：会员入会渠道分布

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '会员入会渠道分布',
                left:200
                // subtext: '这里是副标题',
            },
            tooltip: {},
            legend: {
                orient:'vertical',
                left:0,
                top:22,
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    // magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
		
			series:[
                {
				name:'',
                type:'pie',
                stack:'1',
                data:[
                    // {},16,6,9,11,15,13],
                    {value:16,name:"自愿"},
                    {value:9,name:"推广"},
                    {value:11,name:"网络平台"},
                    {value:15,name:"朋友介绍"},
                ]
			    },
                
            ]
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

2.2环形图：会员入会渠道分布

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '会员入会渠道分布',
                left:200
                // subtext: '这里是副标题',
            },
            tooltip: {},
            legend: {
                orient:'vertical',
                left:0,
                top:22,
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    // magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
		
			series:[
                {
				name:'',
                type:'pie',
                radius:['30%','70%'],
                data:[
                    // {},16,6,9,11,15,13],
                    {value:16,name:"自愿"},
                    {value:9,name:"推广"},
                    {value:11,name:"网络平台"},
                    {value:15,name:"朋友介绍"},
                ]
			    },
                
            ]
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

Hadint。
关注
echarts实训5：Spring Boot + ECharts 案例演示
balabalalibala的博客
06-16 403
用Spring Boot + ECharts做人数柱状图
echarts实训4：Sring Boot框架
balabalalibala的博客
06-14 534
用户登录
Echarts小练习
u014285979的博客
01-12 492
List list = (List)request.getAttribute("list"); String data = "["; List list_1 = new ArrayList(); List list_2 = new ArrayList(); List list_3 = new ArrayList(); for(int i=0;i List list3 = (List)l
ECharts动态图表练习
qq_42325462的博客
10-02 323
ECharts动态图表练习 1.用代码写出的表格，需要自己修改更多的话还得仔细阅读配置项手册 2.最新更新的术语手册十分十分的友好 3.但是要做出一整张统一风格的不同表格集合貌似还是要借助其他软件？？？ 4.难点：如何配置js文件至今不会。。。 5.启发：既然有了动态图表，或许下一步研究一下动态海报，不得不佩服现代工具...
Echarts多柱状图练习demo
06-14
Echarts多柱状图 （柱子类型分类） 本地数据练习demo
Echarts --- 可视化练习（radar01）
懂得一千零一种,赋予你失败的方法！
11-13 644
Echarts — 可视化练习（radar01） 落画素描，入景山水。平仄韵达的诗意，畅悠了季节的孤漠，拾起淡漠唐风的音符，装在七弦琴上，拨弹着日月，校音着声律。花落流水春风绿，一捧桃花醉月光。一笺长长的心卷，任凭风吹过往，一夜风流记否几页故事，长鸣萧声书时光。昏沉的灯光，朦胧了善良的心灵，沉沦了一段暗黑的歌舞。迷离中，风干了人性，吹瘦了人心。 # -*- coding: utf-8 # @Time : 2020/11/11 16:43 # @Author : ZYX # @File
Echarts --- 可视化练习（line01）
懂得一千零一种,赋予你失败的方法！
11-13 500
Echarts — 可视化练习（line01） 或许这样的夜我早已习惯，一个人静静的躺在床上，看月亮。被乌云遮盖着那仅剩三分之一的月光，在这漆黑的夜晚，依然是那么的亮。蜡根已断半，烛焰在他生命的尽头扔挣扎着发出那最耀眼的火光。这黑夜，仅有麦芽黄点缀着泼墨的淡香。夜极静，只听得见雨滴“嘀嘀响咔”的打在玻璃上的脆响。雨声敷衍着我的心跳，不知不觉，脑海中又浮现出那紫色的回忆，想起普罗旺斯，想起薰衣草，想起了你。 不知何时，你的世界里有了黄衣草，你喜欢他的清淡，他的典雅。你说过，你最想去普罗旺斯看迷人的薰衣草
Echarts实训-咖啡店热门订单分析
2403_83177329的博客
04-17 1172
(2)绘制饼图与折线图联动图表。首先，在PeLinehartLinkage.html 文件中引入 echarts js 库文件。其次，准备一个具备大小(weight与 height)的 div容器，并使用init()方法初始化容器。2、需求说明 基于“咖啡店年订单json”数据，绘制饼图与折线图的多图表联动，对咖啡店各年。(1)在VS Code中创建PieLineChartLinkage.html文件。(1)掌握 ECharts 多图表联动图形的绘制。与折线图的图表样式后，获取数据、填入数据并显示图表。
echarts 图表展示 练习一 （基础页面加载数据）
happyvx的专栏
08-06 2109
1.下载echarts.zip包   当然你选择哪个都行只要能下载下来。 2. 解压查看内部构建 build 文件夹 我们需要这里的东西 当然里面也有其他东西你也需要看看比如doc 3.这一步比较关键  是在jsp页面加载echarts所需框架，否者echarts就不能使用了      3.1首先将build文件夹拷贝到eclispe项目下 然后加载echa
ECharts小白入门——柱状图练习
qwe122343的博客
02-09 1180
上篇博客中，介绍了最简单的下载echarts.min.js的方式 这篇实际运用一下echarts.min.js，将其引入HTML中，制作一个柱状图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts-柱状图练习</...
echarts入门练习——零基础小白首次尝试
weixin_44353999的博客
09-13 566
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>柱状.
ECharts学习之基础（一）基本结构
shuoSmallWhite的博客
04-26 1306
1.可用多种方式引入echarts，以下使用了script（其他可参考官网）;&lt;script src='https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts-en.common.js'&gt;&lt;/script&gt;2.为ECharts准备一个具备宽高的Dom容器；3.初始化Echarts实例    var myCha...
ECharts-html 实训（四）
2301_77563994的博客
04-01 2067
散点图，顾名思义就是使用一些散乱的点来展示数据的一种图表，这些点在哪个位置，是由其X值和Y值确定的，因此散点图也叫做XY散点图，
ECharts习题
最新发布
2302_80385233的博客
04-22 403
绘制一个多表联动图主题是专升本目标院校报率比并采取echarts的事件和行为锁定目标院校的专业官网。要求：1.标题2.触发3.事件行为。
练习六十八：pyecharts模块练习
weixin_30323961的博客
03-21 465
用一个地图显示最热的几个城市温度代码(用Geo模块)from pyecharts import Geo attr = ["西安","上海","苏州","成都","海南","南京"] value = [28,15,16,26,31,23] geo = Geo("温度表图") geo.add("",attr,value,type="effectScatter",border_color="#ffff...
echarts-组合图
稻草人
09-21 5913
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>echarts.js案例一</title> <script type="text/javascript" src='lib/echarts/dist/echarts.js'></script> </head> <body> <di
ECharts实训教程：图表绘制与数据分析
在进行ECharts实训时，通常会涉及到以下几个方面的知识点： 1. ECharts基础知识：了解ECharts的基本概念，包括其组成结构、如何引入ECharts库到项目中，以及ECharts的基本配置和初始化。 2. 基本图表的使用：熟悉...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值