大数据BI可视化(Echarts组件)项目开发-熟悉显示功能3.0

已于 2024-04-28 07:14:35 修改
阅读量301 收藏 2
点赞数 5
文章标签： 大数据 echarts 前端
于 2024-04-28 04:55:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75311251/article/details/138264052
版权

主题

内置主题

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    // init方法有两个参数, 第一个参数代表是一个dom节点, 第二个参数, 代表你需要使用哪一套主题
    // 默认内置了两套主题 , light  dark
    var mCharts = echarts.init(document.querySelector("div"), 'dark')
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: yDataArr,
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60
          },
          barWidth: '30%'
        }
      ]
    };
    mCharts.setOption(option)
  </script>
</body>

</html>

自定义主题

1.官网查看

Echarts自定义主题下载

2.自定义主题制作及下载JS/JSON

3.引入自定义主题js文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
  <script src="theme/itcast.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    // 1.在线编辑主题 https://www.echartsjs.com/theme-builder/
    // 2.下载主题的js文件
    // 3.在html中导入js文件
    // 4.在init方法中指明主题的名称
    var mCharts = echarts.init(document.querySelector("div"), 'itcast')
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: yDataArr,
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60
          },
          barWidth: '30%'
        }
      ]
    };
    mCharts.setOption(option)
  </script>
</body>

</html>

调色盘

主题调色盘

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
  <script src="theme/itcast.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"), 'itcast')
    var pieData = [
      {
        value: 11231,
        name: "淘宝",
      },
      {
        value: 22673,
        name: "京东"
      },
      {
        value: 6123,
        name: "唯品会"
      },
      {
        value: 8989,
        name: "1号店"
      },
      {
        value: 6700,
        name: "聚美优品"
      }
    ]
    var option = {
      series: [
        {
          type: 'pie',
          data: pieData,
        }
      ]
    };
    mCharts.setOption(option)
  </script>
</body>

</html>

全局调色盘

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
  <script src="theme/itcast.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"), 'itcast')
    var pieData = [
      {
        value: 11231,
        name: "淘宝",
      },
      {
        value: 22673,
        name: "京东"
      },
      {
        value: 6123,
        name: "唯品会"
      },
      {
        value: 8989,
        name: "1号店"
      },
      {
        value: 6700,
        name: "聚美优品"
      }
    ]
    var option = {
      color: ['red', 'green', 'blue', 'skyblue', 'purple'],
      series: [
        {
          type: 'pie',
          data: pieData,
        }
      ]
    };
    mCharts.setOption(option)
  </script>
</body>

</html>

局部调色盘

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
  <script src="theme/itcast.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"), 'itcast')
    var pieData = [
      {
        value: 11231,
        name: "淘宝",
      },
      {
        value: 22673,
        name: "京东"
      },
      {
        value: 6123,
        name: "唯品会"
      },
      {
        value: 8989,
        name: "1号店"
      },
      {
        value: 6700,
        name: "聚美优品"
      }
    ]
    var option = {
      color: ['red', 'green', 'blue', 'skyblue', 'purple'],
      series: [
        {
          type: 'pie',
          data: pieData,
          color: ['pink', 'yellow', 'black', 'orange', 'red']
        }
      ]
    };
    mCharts.setOption(option)
  </script>
</body>

</html>

颜色渐变

1.线下渐变

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: yDataArr,
          itemStyle: {
            color: {
              type: 'linear', // 线性渐变
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops:[
                {
                  offset: 0, color: 'red' // 0%处的颜色为红色
                },
                {
                  offset: 1, color: 'blue' // 100%处的颜色为蓝
                }
              ]
            }
          }
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

2.径向渐变

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: yDataArr,
          itemStyle: {
            // color: {
            //   type: 'linear', // 线性渐变
            //   x: 0,
            //   y: 0,
            //   x2: 0,
            //   y2: 1,
            //   colorStops:[
            //     {
            //       offset: 0, color: 'red' // 0%处的颜色为红色
            //     },
            //     {
            //       offset: 1, color: 'blue' // 100%处的颜色为蓝
            //     }
            //   ]
            // }
            color: {
              type: 'radial', // 径向渐变
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0, color: 'red' // 0%处的颜色为红色
                },
                {
                  offset: 1, color: 'blue' // 100%处的颜色为蓝
                }
              ]
            }
          }
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

样式

直接样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>


<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
      title: {
        text: '饼图的测试',
        textStyle: { // 控制标题的文字样式
          color: 'blue'
        }
      },
      series: [
        {
          type: 'pie',

          data: [{
            value: 11231,
            name: "淘宝",
            itemStyle: { // 控制淘宝这一区域的样式
              color: 'yellow'
            },
            label: {
              color: 'green'
            }
          },
          {
            value: 22673,
            name: "京东"
          },
          {
            value: 6123,
            name: "唯品会",
          },
          {
            value: 8989,
            name: "1号店"
          },
          {
            value: 6700,
            name: "聚美优品"
          }]
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

高亮样式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>


<body>
  <div style="width: 600px;height:400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var option = {
      title: {
        text: '饼图的测试',
        textStyle: { // 控制标题的文字样式
          color: 'blue'
        }
      },
      series: [
        {
          type: 'pie',

          data: [{
            value: 11231,
            name: "淘宝",
            itemStyle: { // 控制淘宝这一区域的样式
              color: 'yellow'
            },
            label: {
              color: 'green'
            },
            emphasis: {
              itemStyle: { // 控制淘宝这一区域的样式
                color: 'pink'
              },
              label: {
                color: 'black'
              }
            }
          },
          {
            value: 22673,
            name: "京东"
          },
          {
            value: 6123,
            name: "唯品会",
          },
          {
            value: 8989,
            name: "1号店"
          },
          {
            value: 6700,
            name: "聚美优品"
          }]
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>

</html>

自适应

1.监听窗口大小变化事件

2.在事件处理函数中调用Echarts实例对象的resize即可

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>

<body>
  <div style="height:400px;border: 1px solid red"></div>
  <script>
    var mCharts = echarts.init(document.querySelector("div"))
    var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
    var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
    var option = {
      xAxis: {
        type: 'category',
        data: xDataArr
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          type: 'bar',
          data: yDataArr,
          markPoint: {
            data: [
              {
                type: 'max', name: '最大值'
              },
              {
                type: 'min', name: '最小值'
              }
            ]
          },
          markLine: {
            data: [
              {
                type: 'average', name: '平均值'
              }
            ]
          },
          label: {
            show: true,
            rotate: 60
          },
          barWidth: '30%'
        }
      ]
    }
    mCharts.setOption(option)
    // 监听window窗口大小变化的事件
    window.onresize = function(){
      // console.log('window.onresize...')
      // 调用echarts实例对象的resize方法
      mCharts.resize()
    }
    // window.onresize = mCharts.resize

  </script>
</body>

</html>

阿龙要当程序猿
关注
  • 5
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
开源echarts实现的BI数据可视化图表，总有你能用上的
2301_79125431的博客
11-28 779
我投的是无线逻辑，意向地是东莞和上海。我签了一个军工研究所，我们学校盖章有两个，一个是用人单位人事部盖章，一个是用人单位上级主管部门盖章，但是他们给我盖的章只有用人单位人事部的章，上级主管部门盖章的。双非本24届毕业生，无竞赛无实习，不考研不考公不靠编，Boss上沟通了一千七百多家，大多都是已读不回，好多都是未读，投出的简历也只有一百多家，找了快两个月的工作。技术面，问了一个多小时，很专业，但是问了很多我没干的事，问到最后我不耐烦了，直接给他说，我开头就说过了，我没做这块工作，懂了吗?
python数据可视化：基于pyecharts的BI数据大屏
热门推荐
SUL
02-11 4万+
1 项目背景 作为公司负责搜索和推荐的部门，很多业务数据都需要进行可视化展示：一方面是方便团队成员进行监控和分析，另一方面也是为了和业务部门共享分析成果，让数据产生更多的价值。虽然公司已经准备部署Tableau，但我们经过讨论后认为团队自己开发的大屏可以更灵活、也可以和Tableau形成互补。在寻找解决方案的时候，我们首先明确了以下几条标准，并且最终选定了pyecharts。 图表丰富，提供仪表...
大数据BI可视化(Echarts组件)项目开发-入门2.0
2201_75311251的博客
04-19 938
本章节BI可视化2.0版本讲解了从0~1制作Echarts各个组件并提供了免费代码进行实操（请关注后续BI可视化版本）
2022年五大开源数据可视化BI方案对比
Cr1556648487的博客
08-06 2222
大数据在经过前几年的野蛮生长以后，开始与数据中台的概念一同向着更实际的方向落地。有人问，数据可视化是不是等同于数据大屏。数据大屏是数据可视化的一部分，其承载更多的是展示与监控的功能。 而真正对业务产生影响的，确是比较低调的自助数据可视化系统（商用的一般称之为BI系统），支撑着公司的指标体系，为业务的发展，企业的数字化驱动提供帮助。 本文将对比Superset，Redash，Metabase，Davinci，DataEase五大开源的数据可视化分析工具。 商用方案不在此次讨论之中。将这些开源的数据可视化分析工
jquery导入数据_python大数据实践之三：对分析结果可视化呈现
weixin_39568083的博客
11-21 217
在上一篇文章中我们通过python远程操作mysql对数据库中的数据进行了简单的统计分析，得到了每日销售收入、所有商品销售统计总收入、每种商品销售情况等数据，接下来就可以使用python提供的flask框架进行前端结果的呈现。本节需要的模块包括flask框架、echarts.js以及jquery.js，同时会使用jQuery封装好的AJAX请求来实现数据层和显示层之间的数据传输。（1）模块准备有关...
大数据BI可视化(Echarts组件)项目开发-熟悉koa2后端开发6.0
04-29
在这个“大数据BI可视化(Echarts组件)项目开发-熟悉koa2后端开发6.0”中，我们将深入探讨Koa2框架的核心特性和其在大数据处理与可视化中的应用。 Koa2 是由 Express 团队成员创建的轻量级框架，旨在提供更简洁和...
大数据BI可视化(Echarts组件)项目开发-熟悉结合Vue开发图表组件7.0附带1/6商家销售统计（横向柱状图）
最新发布
05-02
在本项目中，我们将深入探讨如何使用Echarts组件与Vue.js框架进行大数据BI可视化的实践。Echarts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型和强大的交互功能，非常适合用于商业智能（BI）领域的...
Axure交互设计大数据BI可视化大屏原型模板动态组控件数据统计图
05-19
Axure交互设计大数据BI可视化大屏原型模板动态组控件数据统计图Axure交互设计大数据BI可视化大屏原型模板动态组控件数据统计图Axure交互设计大数据BI可视化大屏原型模板动态组控件数据统计图Axure交互设计大数据BI...
数据可视化制图工具：【免费：Excel、Echarts(基于JS)、D3、Geoplotlib、GIS、BDP(免费BI)】【收费：Tableau(收费BI)、PowerBI】
u013250861的博客
04-03 4187
数据可视化制图工具：【免费：Excel、Echarts/Geoplotlib、GIS、BDP(免费BI)】【收费：Tableau(收费BI)、PowerBI】
ECharts -- 开源可视化库的使用
qq_40140721的博客
11-16 761
文章目录一、ECharts 是什么？二、使用步骤1.引用2.读入数据总结 一、ECharts 是什么？ ECharts 相对于我们前端开发人员可谓相当熟悉的一个js可视化库，支持多种常见的可视化类型以及自定义系列，多种数据格式自动识别。为我们可视化开发工作节省许多时间和精力，在实际的开发使用中发挥着不俗的效果。下面是官网对其的介绍： ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，F
26 动态可视化 国内开源良心之作ECharts
一夜飘零
08-20 1万+
ECharts是什么 基于Canvas的一款js图形可视化工具 http://echarts.baidu.com/index.html   国内开源良心之作，Github上15000+stars 从ECharts2更新到ECharts3，更加简单、功能更强   加载ECharts 下载完整版js或使用CDN，http://www.bootcdn.cn/echarts/   第一...
PHP与JSON的一些常用操作
HelloWorld
09-30 1954
PHP把数据写入JSON文件 <?php // 生成一个PHP数组 $data = array (); $data ["fruit"] = "apple" ; $data ["animal"] = "tiget"; // 把PHP数组转成JSON字符串,写入文件 $json_string = json_encode( $data ); ?> PHP读取JSON数据? <?php // 从文件中读取数据到PHP变量 $str = file_get_contents ( 'one
基于echarts组件制作数据可视化大屏
chuzougong2399的博客
09-05 1411
什么是数据可视化： 数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。在实际工作中，数据分析能够帮助管理者进行判断和决策，以便采取适当策略与行动。 数据可视化分析有什么作用： 1.现状分析 告诉你过去发生了什么，告诉你企业现阶段的整体运营情况，通过各个经营指标的完成情况来衡...
Echarts 一个开源图表设计工具
C1151121278的博客
12-13 647
一般来说，因有所需，方有所求。最近项目中有这方面的需求，用着感觉不错。特此记录！此处仅是一个简单的demo。官网地址：http://echarts.baidu.com/，相关文档、插件都有。 1.js部分。 <script src="/Contents/js/echarts.js"></script> <script typ...
优秀开源项目ECharts
崎山小鹿的专栏
03-10 3003
JavaScript图表库 ECharts ECharts开源来自百度商业前端数据可视化团队，基于html5 Canvas，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
百度开源的数据可视化工具eCharts真心不错
阿利的技术积累
11-21 1万+
开发文档：http://echarts.baidu.com/doc/doc.html 部分摘录如下： 简介 ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas
Echart和BI工具，谁优谁劣看这里
amsonga的博客
09-27 1443
我们在学习一件东西的时候总是喜欢挑选，对比，进行数据分析也不例外。数据分析有Excel，编程工具，还有商业智能工具BI，一般是这三大类。那今天宋宋就来谈谈Echart和亿信华辰的豌豆BI作比较。 首先这两者，我觉得没有谁优谁劣，而是他们各有优势！也许有些大佬就会说，它们压根不是一个层面，怎么去比较？那么，接着看下去我怎么比较的吧！ Echart的优势（对比豌豆BI） 首先说说什么是Echart，简...
ETHINK可视化挖掘-Spark大数据的实现及行业应用案例.ppt
11-17
本文将介绍中国科大-象形科技大数据商业智能联合实验室的大数据分析平台，以及其产品技术...未来，该实验室有望建成国内第一家云BI平台，推动大数据可视化和云计算技术在国内的应用，为行业发展和创新注入新的动力。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值