Echarts第二章实训

已于 2024-03-18 10:44:28 修改
阅读量498 收藏 8
点赞数 12
文章标签： echarts 前端 javascript
于 2024-03-18 10:39:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_77733754/article/details/136801988
版权

目录

实训一

一、堆积柱状图

二、标准条形图

三、瀑布图

实训二

四、饼图

五、环形图

实训一

一、堆积柱状图

<!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: {
                trigger: 'axis',
                axisPointer: {  //设置坐标轴指示器，坐标轴触发有效
                    type: 'shadow'  //设置坐标轴默认为直线，可选为:'line'|'shadow'
                }
            },
            legend: {
                data: ['男', '女']
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['20～29岁', '30～39岁', '40～49岁']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '男',
                    type: 'bar',
					stack: '年龄段',  //设置堆积效果
                    data: [4, 0, 1]
                },
                {
                    name: '女',
                    type: 'bar',
                    stack: '年龄段',  //设置堆积效果
                    data: [6, 3, 0],
					markLine: {
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    type: 'dashed'
                                }
                            }
                        },
                    }
                },
            ]
        };
         //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>

二、标准条形图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
                text: '会员入会渠道分布情况',
                subtext: '',
            },
            tooltip: {
                trigger: 'axis',
            },
            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 },
                },
            },
            calculable: true,
            xAxis: [
                {
                    type: 'value',  //设置柱状图
                    boundaryGap: [0, 0.01],
                },
            ],
            yAxis: [
                {
                    type: 'category',
                    data: ['自愿', '微信推广', '团购促销', '节日活动'],
                },
            ],
            series: [
                {
                    name: '男',
                    type: 'bar',
                    data: [2, 0, 1, 2],
                },
                {
                    name: '女',
                    type: 'bar',
                    data: [3, 2, 2, 2],
                },
            ],
        };
 
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
 
</html>

三、瀑布图

<!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: {
                trigger: 'axis',
                axisPointer: {  //设置坐标轴指示器，坐标轴触发有效
                    type: 'shadow'  //默认为直线，可选为：'line' | 'shadow'
                },
                formatter: function (params) {
                    var tar = params[0];
                    return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
                }
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            xAxis: [
                {
                    type: 'category',
                    splitLine: { show: false },
                    data: ['武汉', '北京', '上海', '广东' ]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
				{
                    name: '辅助',
                    type: 'bar',
                    stack: '总量',
                    itemStyle: {
                        normal: {  //设置正常情况下柱子的样式
                            //barBorderColor: 'rgba(0,0,0,0)',  //设置柱子边框的颜色
                            barBorderColor:'rgba(20,20,0,0.5)',
                            barBorderWidth: 5,  //设置柱子边框的宽度
                            //color: 'rgba(0,0,0,0)'  //设置柱子的颜色
                            color:'rgba(0,220,0,0.8)'
                        },
                        emphasis: {  //设置鼠标滑过时柱子的样式
                            barBorderColor: 'rgba(0,0,0,0)',  //设置鼠标滑动到柱子边框的颜色
                            barBorderWidth: 25,  //设置鼠标滑动到柱子边框的宽度
                            color: 'rgba(0,0,0,0)'  //设置鼠标滑动到柱子的颜色
                        }
                    },
                    data: [0, 801, 1094, 635]
                },
                {
                    name: '生活费',
                    type: 'bar',  //设置柱状图
                    stack: '总量',  //设置堆积
                    itemStyle: { normal: { label: { show: true, position: 'inside' } } },
                    data: [3076, 2275, 1181, 546]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>

实训二

四、饼图

<!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: '',  //设置次标题
                left: 'center'  //设置主次标题都左右居中
            },
            tooltip: {  //配置提示框组件
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {  //配置图例组件
                orient: 'vertical',  //设置垂直排列
                left: 62,  //设置图例左边距
                top: 22,  //设置图例顶边距
                data: ['自愿', '微信推广', '团购促销', '节日活动']
            },
            toolbox: {  //配置工具箱组件
                show: true,  //设置工具箱组件是否显示
                left: 444,  //设置工具箱左边距
                top: 28,  //设置工具箱顶边距
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            series: [  //配置数据系列组件
                {
                    name: '入会方式',
                    type: 'pie',
                    radius : '66%',  //设置半径
                    //radius: ['45%', '75%'],
                    center: ['58%', '55%'],  //设置圆心
                    clockWise: true,
                    data: [  //设置数据的具体值
                        { value: 5, name: '自愿' },
                        { value: 2, name: '微信推广' },
                        { value: 3, name: '团购促销' },
                        { value: 4, name: '节日活动' }
                    ]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>

五、环形图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 900px; height: 600px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {  //配置标题组件
                backgroundColor: 'yellow',  //设置主标题的背景颜色
                text: '会员入会渠道分布情况',  //设置主标题的文字
                textStyle: {  //设置主标题文字样式
                    color: 'green',  //设置主标题文字的颜色
                    fontFamily: '黑体',  //设置主标题文字的字体
                    fontSize: 28  //设置主标题文字的大小
                },
                x: 'center'  //设置主标题左右居中
            },
            tooltip: {  //配置提示框组件
                trigger: 'item',  //设置提示框的触发方式
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {  //配置图例组件
                orient: 'vertical',  //设置图例垂直方向
                x: 32,  //设置图例的水平方向
                y: 74,  //设置图例的垂直方向
                data: ['自愿', '微信推广', '团购促销', '节日活动']
            },
            toolbox: {  //配置工具箱组件
                show: true,  //设置工具箱是否显示
                x: 555,  //设置工具箱的水平位置
                y: 74,  //设置工具箱的垂直位置
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel']
                    },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: false,
            series: [
                {
                    name: '入会方式',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: ['40%', '55%'],
                    data: [
                        { value: 5, name: '自愿' },
                        { value: 2, name: '微信推广' },
                        { value: 3, name: '团购促销' },
                        { value: 4, name: '节日活动' }
                    ]
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>
 
</html>


zzzzzyyyyttt
关注
  • 12
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts官网折线图
weixin_44591961的博客
02-03 861
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script
echarts_实训.rar
12-12
echarts_实训.rar
echarts的实训例题（散点图和涟漪，仪表盘（数据更新和制定按钮））的绘制
weixin_68473774的博客
03-26 547
【代码】echarts的实训例题（散点图和涟漪，仪表盘（数据更新和制定按钮））的绘制。
Echarts — 可视化练习（scatter02 — 安斯库姆四重奏）
懂得一千零一种,赋予你失败的方法！
12-15 1094
Echarts — 可视化练习（scatter02 — 安斯库姆四重奏） 安斯库姆四重奏（Anscombe’s quartet）是四组基本的统计特性一致的数据，但由它们绘制出的图表则截然不同。每一组数据都包括了11个(x,y)点。这四组数据由统计学家弗朗西斯·安斯库姆（Francis Anscombe）于1973年构造，他的目的是用来说明在分析数据前先绘制图表的重要性，以及离群值对统计的影响之大。 这四组数据的共同统计特性如下： 在四幅图中，由第一组数据绘制的图表（左上图）是看起来最“正常”的，可以
可视化实验四：大数据可视化工具—ECharts（二）
热门推荐
qq_43437122的博客
05-03 1万+
实验目的： 了解ECharts和pyecharts数据可视化的特点 掌握ECharts和pyecharts的简单操作 能够使用ECharts和pyecharts实现数据可视化操作 实验内容： 练习掌握pyecharts的安装和使用方法 练习使用pyecharts绘制柱状图、仪表盘图、3D图、雷达图、面积图等 实验过程（附结果截图）： 1.练习掌握pyecharts的安装和使用方法 （1）打开Windows命令窗口，执行 “pip install pyecharts” 命令安装pyecharts库
ECharts第二章实训
2202_75544053的博客
03-18 426
【代码】ECharts第二章实训。
Echarts第四章实训
2303_77733754的博客
03-27 489
【代码】Echarts第四章实训。
ECharts第四章项目实战
2202_75544053的博客
04-01 400
2、绘制多漏斗图或多金字塔。
ECharts第四章实训
2202_75544053的博客
03-27 257
【代码】ECharts第四章实训。
Echarts常用图表第2章实训
2301_77751917的博客
03-18 396
【代码】Echarts常用图表第2章实训。
解决echarts数据二次渲染不成功的问题
10-15
主要介绍了解决echarts数据二次渲染不成功的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
第三章综合实训.html
06-07
echarts
echarts使用二维地图实现好看的3D效果
01-24
内容概要：使用echarts的二维地图模拟三维立体动态风格的地图效果，地图边界还带有动态流动线条效果，既有三维的立体效果，又避免了三维地图占用内存资源高的问题。 目标人群：前端开发工程师，大屏可视化开发人员 ...
Echarts可视化大屏13套模板.zip
10-04
基于 Echarts 可视化数据大屏模板13套
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 548
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
最新发布
liyrbtqe_66w的博客
06-12 281
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 359
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
echarts第二次的渲染问题
04-28
但是在使用Echarts进行大规模数据渲染时，可能会遇到第二次渲染问题。 第二次渲染问题一般指当页面中存在多个图表时，在第一次渲染完一个图表后切换到另一个图表，第二个图表无法正常渲染的情况。这是由于Echarts的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值