ECharts案例

已于 2024-04-08 08:38:55 修改
阅读量654 收藏 8
点赞数 23
文章标签： echarts 前端 javascript
于 2024-03-12 16:50:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2303_77733754/article/details/136654772
版权

目录

目录

一、柱状图

二、条形图

三、折线图

​四、堆积图

五、词云图

​编辑

定义x轴和y轴的配置项，包括标题和数据等

​编辑

如何使用ECharts来求取最大值、最小值和平均值

一、柱状图

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">//设置文档的字符编码为UTF-8
  <meta name="viewport" content="width=device-width, initial-scale=1.0">//设置视口（viewport）的元信息，使页面能够响应式地适应不同设备的屏幕大小。
  <meta http-equiv="X-UA-Compatible" content="ie=edge">//这是一个针对Internet Explorer的兼容性设置，使页面以最高模式（edge mode）渲染。
  <title>Document</title>//设置网页的标题
  <!-- 步骤1：引入echarts.js文件 -->
  <script src="js/echarts.min.js"></script>
</head>
 
<body>
  <!-- 步骤2：准备一个呈现图表的盒子 -->
  <div style="width: 600px;height: 400px"></div>
  <script>
    // 步骤3：初始化echarts实例对象
    // 参数, dom,决定图表最终呈现的位置
    var mCharts = echarts.init(document.querySelector('div'))
    // 步骤4：准备配置项
    var option = {
      xAxis: {
        type: 'category',
        data: ['小张', '小周', '小田']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '英语',
          type: 'bar',
          data: [101, 92, 87]
        }
      ]
    }
    // 步骤5：将配置项设置给echarts实例对象
    mCharts.setOption(option)
  </script>
</body>

二、条形图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <script src="js/echarts.js"></script>
</head>
 
<body>
 
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
 
        var myChart = echarts.init(document.getElementById("main"));
 
        var option = {
            title: {
                text: 'A班成绩表',
                subtext: '数据来自辅导员',
            },
            legend: {
                data: ['java','python'],
            },
            calculable: true,
            xAxis: [
                {
                    type: 'value',  //设置柱状图
                    boundaryGap: ['20%','20%'],
                },
            ],
            yAxis: [
                {
                    type: 'category',
                    data: ['小张','小周','小田'],
                },
            ],
            series: [
                {
                    name: 'java',
                    type: 'bar',
                    data: [90,88,70],
                    markPoint: { // 标记点
          },
 
                },
                {
                    name: 'python',
                    type: 'bar',
                    data: [60,90,80,],
                    markPoint: { // 标记点
          },
                },//series：设置图表的系列数据。
                
            ]
        };
         myChart.setOption(option);
    </script>
</body>
 
</html>

三、折线图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: 'A班成绩表',
                subtext: '成绩来源于辅导员',
            },
            legend: {
                data: ['2023年', '2024年'],
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',  
                    data:['9月','10月','11月','12月','1月','2月']
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    data: ['小周'],
                },
            ],
            series: [
                {
                    name: '2023年',
                    type: 'line',
                    data: [56,77,86,70,90,73],
                },
                {
                    name: '2024年',
                    type: 'line',
                    data: [65,98,75,45,69,82],
                },
            ],
        };
        myChart.setOption(option);
    </script>
</body>
</html>


四、堆积图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: 'A班',
                left:'center',
                borderWidth:'3',
                borderColor:'blue',
                textStyle:{
                    color:'green',
                },
            },
            legend: {
                data: ['2023年', '2024年'],
                right:'left',
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',  
                    data:['9月','10月','11月','12月','1月','2月']
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    data: ['小周'],
                },
            ],
            series: [
                {
                    name: '2023年',
                    type: 'line',
                    data: [56,77,86,70,90,73],
                    stack:'all',
                    areaStyle:{}
                },
                {
                    name: '2024年',
                    type: 'line',
                    data: [65,98,75,45,69,82],
                    stack:'all',
                    areaStyle:{}
                },
            ],
        };
        myChart.setOption(option);
    </script>
</body>
</html>

五、词云图

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>词云图</title>  
 <!-- 引入ECharts文件 --> 
    <script type="text/javascript" src = "http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript" src="/js/echarts.js"></script>  
</head>  
<body>  
    <div id="main" style="width: 80%;height: 400px;border: 1px solid black"></div>  
</body>    
    <script type="text/javascript">  
 // 使用模块化加载方式
    require.config({
        paths:{echarts:'http://echarts.baidu.com/build/dist'}
    })
    require(
        [
            'echarts',
            'echarts/chart/wordCloud',
        ],
        function(ec){
            var myChart = ec.init(document.getElementById('main'));
            function createRandomItemStyle(){//创建随机颜色
                return{
                    normal:{
                        color:'rgb('+[
                            Math.round(Math.random()*255),
                            Math.round(Math.random()*255),
                            Math.round(Math.random()*255)
                    ].join(',')+')'
                    }
                };
            }
            option = {  
                title:{
                    text:'Magic Shop',
                    link:'',
                },
                backgroundColor:'rgba(128,128,128,0.1)',
                tooltip:{show:true},
                series:[{
                    name:'p1',
                    type:'wordCloud',
                    sizeRange:[100,50000],//最大最小值
                    size:['95%','95%'],//词云图大小
                    textRotation:[0,45,90,135,-45,-90],//词的倾斜角度
                    textPadding:4,
                    autoSize:{enable:true,minSize:2},
                    data:[//词云名称，词云大小，颜色
                        {name:'Love maze',value:16884,itemStyle:{normal:{color:'red'}}},
                        {name:'Love yourself',value:8844,itemStyle:createRandomItemStyle()},
                        {name:'小宇宙',value:16644,itemStyle:createRandomItemStyle()},
                        {name:'J-HOPE',value:2244,itemStyle:createRandomItemStyle()},
                        {name:'Mic Drop',value:14844,itemStyle:createRandomItemStyle()},
                        {name:'Golden',value:2244,itemStyle:createRandomItemStyle()},
                        {name:'Like crazy',value:1688,itemStyle:createRandomItemStyle()},
                        {name:'Layover',value:15552,itemStyle:createRandomItemStyle()},
                        {name:'Just one day',value:8848,itemStyle:createRandomItemStyle()},
                        {name:'Butterfly',value:6677,itemStyle:createRandomItemStyle()},
                        {name:'wings',value:5240,itemStyle:createRandomItemStyle()},
                        {name:'2!3!',value:12244,itemStyle:createRandomItemStyle()},
                        {name:'RM',value:7749,itemStyle:createRandomItemStyle()},
                        {name:'blue&grey',value:2244,itemStyle:createRandomItemStyle()},
                        {name:'JIN',value:11044,itemStyle:createRandomItemStyle()},
                        {name:'SUGA',value:6749,itemStyle:createRandomItemStyle()},
                        {name:'春日',value:50000,itemStyle:createRandomItemStyle()},
                        {name:'v',value:5349,itemStyle:createRandomItemStyle()},
                        {name:'Jk',value:7789,itemStyle:createRandomItemStyle()},
                        {name:'JIMIN',value:6189,itemStyle:createRandomItemStyle()},
                        {name:'Life goes on',value:8782,itemStyle:createRandomItemStyle()},
                        {name:'Run',value:10049,itemStyle:createRandomItemStyle()},
                    ]
                }]
       };
       myChart.setOption(option);
     }
);
    </script>

定义x轴和y轴的配置项，包括标题和数据等

var option = {
    xAxis: {
        name: 'X轴标题',
        data: ['数据1', '数据2', '数据3']
    },
    yAxis: {
        name: 'Y轴标题',
        data: [10, 20, 30]
    },
    series: [{
        type: 'bar',
        data: [15, 25, 35]
    }]
};

如何使用ECharts来求取最大值、最小值和平均值

// 假设你已经引入了ECharts库，并创建了一个图表实例myChart

// 准备要展示的数据
var data = [10, 20, 30, 40, 50];

// 将数据转换为盒须图所需的格式
var boxplotData = echarts.dataTool.prepareBoxplotData(data);

// 获取数据的最大值和最小值
var min = echarts.dataTool.getMinMax(data).min;
var max = echarts.dataTool.getMinMax(data).max;

// 计算数据的平均值
var sum = data.reduce(function(a, b) { return a + b; });
var average = sum / data.length;

// 在图表中展示最大值、最小值和平均值
myChart.setOption({
    series: [{
        type: 'boxplot',
        data: boxplotData
    }],
    tooltip: {
        formatter: function(params) {
            return '最大值：' + max + '<br>最小值：' + min + '<br>平均值：' + average;
        }
    }
});

zzzzzyyyyttt
关注
  • 23
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts案例网站 案例无穷无尽
weixin_60011293的博客
11-21 1109
非常多的echarts案例,可直接复制粘贴
ECharts 案例演示
lookqinghuaci的博客
06-23 261
利用Spring Boot查询班级表数据，前端利用ECharts绘制各班人数柱形图创建数据库 CREATE DATABASE 数据库名字； 创建表结构 - t_class 创建Spring Boot项目 添加依赖 设置项目名称与保存位置 在包里创建子包，在子包里创建类 在包里创建子包，在子包里创建接口 在里创建目录，在里面创建 在包里创建子包，在子包里创建类 在包里创建子包，在子包里创建类 在里创建目录，添加与 在文件里添加针对的起步依赖 将更名为 在目
echarts案例网站
jieyucx的博客
11-28 1071
网站：https://ppchart.com/#/ 网站：https://echarts.apache.org/examples/zh/index.html
echarts案例
慢慢的博客
08-07 468
导入js依赖 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script> </head> </h...
echarts案例网址
MELANCHOLY ❤ ◁ ❚❚ ▷
12-10 1154
一个记录 官网网址 echarts 案例网址 echarts案例
java echarts 案例,Echarts个人实例
weixin_39530509的博客
03-09 725
1.deviceOperateTrendIndex.jsp设备操作趋势主界面//设置默认访问的界面var indexPage = "/device/deviceListAjax.do";$(document).ready(function(){//绑定tab页$("#tabs span").click(function(){var tabHtml = $(this).html();switch(t...
Vue中使用echarts案例
heerey525
07-11 1147
需要注意的点： 本案例采用按需引入； echarts所挂载的DOM必须设置宽高； 本案例包含常用的折线图、柱状图（横向、竖向）、饼图、动态创建多个图表； echarts安装 npm install echarts echarts配置属性 echarts官方案例 echarts社区资源，有很多好看的例子 官方案例中选中完整代码-按需引入，即可获得按需引入的模块 <template> <div> <!-- 折线图 --> <div ref=".
ECharts案例大全（最新版），含各种案例，实例。
热门推荐
您的博客
02-07 3万+
前言：2022年2月以前，ECharts官网除了提供官方案例外，还额外提供了一个ECharts案例资源丰富的强大社区MakeA Pie来展示各类的ECharts案例。这对于广大开发者，特别是前端页面仔们来说简直是个福音网站。然后，现在却因无人维护，该社区被停用了。 这一停用无疑给广大ECharts使用者们带来一阵阴影（ps：要是遇上复杂的ECharts图标需求，那不得每次都是重头画起。呜呜~~） 方法一：不过不要慌张，本着遇到问题就解决问题的干劲，社区动力大佬为大家重新整理了一份几乎和原MakeA...
Echarts案例：整一个炫酷一点的仪表盘
03-21
使用Echarts仪表盘加极坐标实现一个炫酷的仪表盘，表盘渐变，边缘圆角，（备份的案例） 源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/PolarGauge
echarts案例.zip
01-17
echarts地图案例
echarts案例.rar
08-17
echarts案例.rar
Echarts常用案例
07-22
Echarts常用案例
Echarts案例：使用极坐标加柱状图实现类似Apple Watch上的运动环形效果
03-20
分享自己公司项目类似的一个案例，用Echarts中的Polar（极坐标或称为平面直角坐标系）和Bar（柱状图）实现的 源码：https://gitee.com/DieHunter/myCode/tree/master/Echart/AppleWatch
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 550
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 284
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
Harmony 开发的艺术 面向对象
最新发布
不懂先生的博客
06-13 1047
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
Web前端设计大赛：创意与技术的碰撞
huejiaqwerty888的博客
06-12 361
在这场竞赛中，参赛者们不仅需要展现出独特的创意，还需要运用精湛的技术将创意转化为实际作品。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析Web前端设计大赛的魅力和挑战。交互设计是Web前端设计的核心环节。参赛者需要关注页面的加载速度、响应速度以及操作的便捷性等方面，确保用户在使用过程中能够获得良好的体验。参赛者需要敢于突破传统的设计理念和技术限制，尝试新的设计手法和技术应用。参赛者需要在创意构思、视觉呈现、交互设计、用户体验、技术实现、性能优化以及创新性和可实践性等方面进行全面考虑和精心打造。
echarts案例的网站
05-29
以下是一些展示 ECharts 案例的网站： 1. ECharts 官网：https://echarts.apache.org/zh/index.html 2. ECharts 实例库：https://echarts.apache.org/examples/zh/index.html 3. ECharts 知乎专栏：...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值