echarts——实现 面积图+柱状图+折线图等——基础积累

news2025/1/18 9:56:06

因为到年底了，很多项目组都开始做年终汇报，年终汇报的展示形式最常见的就是看板。

样式美观，可以放到电视机或者大屏上，通过图表的形式进行展示，简单明了，通俗易懂。

直接上最终效果图：是一个展示客户量/流失率/订单情况/效率等的看板
在这里插入图片描述
上图看板中的图表都是用echarts来实现的。

该图中的面积图+柱状图就是用的echarts来实现的。

页面引入echarts文件

 <script src="../script/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="../script/echarts.min.js"></script>
    <script
      type="text/javascript"
      src="../script/echarts-liquidfill.min.js"
    ></script>

上面的这三个文件都可以从网上搜索到，并保存到本地，尽可能不要直接引用线上地址，否则当网速等情况出现问题时，页面会报错。

为了能够实现不同分辨率的看板样式都能够展示全，则需要引入下面的一个自适应的js文件。

<script src="../script/common.js"></script>

common.js——自适应不同分辨率浏览器的函数

$(function () {
  screenSize('.pageBody');
});
function screenSize(editorDom) {
  let screenWidth = $(window).width();
  let screenHeight = $(window).height();
  let defWidth = 1920;
  let defHeight = 1080;
  let xScale = screenWidth / defWidth;
  let yScale = screenHeight / defHeight;
  $(editorDom).css('transform', 'scale(' + xScale + ', ' + yScale + ')');
  $(window).resize(function () {
    let screenWidth = $(window).width();
    let screenHeight = $(window).height();
    xScale = screenWidth / defWidth;
    yScale = screenHeight / defHeight;
    $(editorDom).css('transform', 'scale(' + xScale + ', ' + yScale + ')');
  });
}

自适应不同分辨率浏览器的效果图1：
在这里插入图片描述
自适应不同分辨率浏览器的效果图2：
在这里插入图片描述
注意：要实现上面的自适应效果，则需要给外层dom添加pageBody的class类名才可以。

echarts渲染图表的公共封装函数

此时可以进行图表渲染函数的封装：

以下函数就是渲染 面积图/折线图/柱状图的方法。
入参如下：

1.dom：就是需要渲染的dom元素，可以通过指定唯一id的形式来获取dom
2.xAxis：x轴的展示数据，格式就是一个数组，字符串或者数字形式的数组即可。
3.series：这个就是图表展示的重点了，具体展示的是折线图.柱状图/面积图的数据了，此时可以传入数组，也可以传入对象。里面的type可以指定样式类型
4.color：指定不同series中的样式颜色，是个数组。当然也可以在series中自定义当前类型的颜色。
5.nameArr：如果y轴需要指定单位或者其他备注，则可以添加这个参数，格式是个数组。

function renderBar(dom, xAxis, series, color, nameArr) {
  var option = {
    color: color,
    legend: {
      left: 'right',
      textStyle: {
        color: '#fff',
      },
    },
    grid: {
      x: 60,
      x2: 40,
      y: 60,
      y2: 30,
    },
    xAxis: {
      type: 'category',
      data: xAxis,
      axisLabel: {
        textStyle: {
          color: '#666666',
        },
      },
    },
    yAxis: [
      {
        name: nameArr[0],
        nameTextStyle: {
          color: '#fff',
        },
        max: nameArr[0] && nameArr[0].indexOf('百分率') > -1 ? 100 : null,
        axisLabel: {
          textStyle: {
            color: '#fff',
          },
          formatter: (c) => {
            if (nameArr[0] && nameArr[0].indexOf('百分率') > -1) {
              return c + '%';
            } else {
              return c;
            }
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: '#333',
          },
        },
      },
      {
        name: nameArr[1],
        nameTextStyle: {
          color: '#fff',
        },
        axisLabel: {
          textStyle: {
            color: '#666666',
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: series,
  };
  option && dom.setOption(option);
}

html代码

<div class="boxWrap">
  <div class="box_tit">客户复购率/流失率</div>
  <div class="barCls" id="barId1"></div>
</div>

css代码

.boxWrap{
    width:100%;
    border: 1px solid #555555;
    box-shadow: 0px 60px 60px 0px #2d2826 inset; 
    margin-bottom:20px;
    box-sizing: border-box;
    height:300px;
}
.box_tit{
    color:#f89d19;
    position: relative;
    font-size:24px;
    padding-left:20px;
    line-height: 24px;
    font-weight: bold;
    margin:20px 0;
}
.box_tit::before{
    content:'';
    display: block;
    position: absolute;
    left:0;
    top:0;
    width: 4px;
    height: 24px;
    background: #f89d19;
}
.barCls{
    width:100%;
    height:230px;
}

js代码——使用渲染函数的方法——面积图的使用方法

效果图如下：
在这里插入图片描述

var chartDom1 = document.getElementById('barId1');
var myChart1 = echarts.init(chartDom1);
let xAxis1 = ['2022-08','2022-09','2022-10','2022-11','2022-12'];
let yAxis1 = [20，10，40，50，80，15];
renderBar(
  myChart1,
  xAxis1,
  [
    {
      name: '复购率',
      type: 'line',//图表的类型：line就是折线图
      data: yAxis1,//图表的数据，跟xAsix的x轴要一一对应
      symbolSize: 10,//折线拐点的大小
      itemStyle: {//折线拐点的样式
        normal: {
          borderColor: '#f90',//折线拐点的边框颜色
          borderWidth: 2,//折线拐点的边框宽度
          lineStyle: {//折线的样式，可以更改折线的宽度，颜色等
            width: 3, // 0.1的线条是非常细的了,
            color: '#f90',
          },
          label: {//文字的样式
            show: true, //开启显示
            position: 'top',//文字放置的位置：top顶部 bottom:底部，left:左边,right：右边等，还有center：放置在中间位置
            formatter: '{c}%',//由于我这边是要展示百分数，给出的值是乘以100后的数值，因此需要通过formatter自定义添加一个%来展示
            textStyle: {//文字的样式：可以设置颜色，字号，字重等效果
              color: '#fff',
              fontSize: 16,
            },
          },
        },
      },
      areaStyle: {//设置面积图的颜色，通过 new echarts.graphic.LinearGradient(0,0,0,1,[xxx]);
      	//可以设置渐变色的面积图，可以面积图渐变色的朝向，也可以设置面积图起始的颜色等。
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#f90' },
          { offset: 0.2, color: '#f90' },
          { offset: 1, color: 'transparent' },
        ]),
      },
    },
    {
      name: '流失率',
      type: 'line',
      symbolSize: 10,
      data: yAxis2,
      itemStyle: {
        normal: {
          borderColor: '#227bff',
          borderWidth: 2,
          lineStyle: {
            width: 3, // 0.1的线条是非常细的了,
            color: '#4992FF',
          },
          label: {
            show: true, //开启显示
            position: 'top',
            formatter: '{c}%',
            textStyle: {
              color: '#fff',
              fontSize: 16,
            },
          },
        },
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#4992FF' },
          { offset: 0.2, color: '#4992FF' },
          { offset: 1, color: 'transparent' },
        ]),
      },
    },
  ],
  '',
  ['单位：百分率', '']
);

js代码——使用渲染函数的方法——柱状图的使用方法

效果图如下：
在这里插入图片描述

var chartDom6 = document.getElementById('barId6');
var myChart6 = echarts.init(chartDom6);
let xAxis6 = ['2022-08','2022-09','2022-10','2022-11','2022-12'];
let yAxis61 = [20，10，40，50，80，15];
let yAxis62 = [120，100，40，25，80，105];
renderBar(
  myChart6,
  xAxis6,
  [
    {
      name: '钣金',
      type: 'bar',//图表样式设置为柱状图
      // stack: 1,
      barWidth: 20,//柱状图的宽度 20
      data: yAxis61,//series设置的数据
      itemStyle: {
        normal: {/设置柱状图的颜色，通过 new echarts.graphic.LinearGradient(0,0,0,1,[xxx]);
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#f90' },
            { offset: 0.2, color: '#f90' },
            { offset: 1, color: 'transparent' },
          ]),
          label: {
            show: true, //开启显示
            position: 'top',
            textStyle: {
              color: '#fff',
              fontSize: 16,
            },
          },
        },
      },
    },
    {
      name: 'CNC',
      type: 'bar',
      // stack: 1,
      barWidth: 20,
      data: yAxis62,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#4992FF' },
            { offset: 0.2, color: '#4992FF' },
            { offset: 1, color: 'transparent' },
          ]),
          label: {
            show: true, //开启显示
            position: 'top',
            textStyle: {
              color: '#fff',
              fontSize: 16,
            },
          },
        },
      },
    },
  ],
  '',
  ['单位：个']
);

完成！！！多多积累，多多收获！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/161857.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【C++】打开C++的大门

【C++】打开C++的大门

目录前言1.什么是C2.C的发展史3.C关键字&#xff08;C98&#xff09;4.命名空间4.1命名冲突4.2命名空间定义4.3命名空间使用5.输入输出6.缺省参数6.1缺省参数的概念6.2缺省参数分类7.函数重载7.1函数重载概念7.2C函数重载的原理——名字修改8.引用8.1引用的概念8.2引用特性8.3常…
阅读更多...
ArcGIS基础实验操作100例--实验94计算栅格图层总和值

ArcGIS基础实验操作100例--实验94计算栅格图层总和值

本实验专栏参考自汤国安教授《地理信息系统基础实验操作100例》一书 实验平台&#xff1a;ArcGIS 10.6 实验数据&#xff1a;请访问实验1&#xff08;传送门&#xff09; 空间分析篇--实验94 计算栅格图层总和值 目录 一、实验背景 二、实验数据 三、实验步骤 &#xff08;…
阅读更多...
【观察】软硬件底层创新“开花结果”，亚马逊云科技的沉淀与释放

【观察】软硬件底层创新“开花结果”，亚马逊云科技的沉淀与释放

2006年&#xff0c;亚马逊云科技推出了Amazon Web Services&#xff0c;正式“开创”出了云计算市场。同年8月&#xff0c;Amazon Elastic Compute Cloud (EC2) 开放了 beta 测试&#xff0c;启动了云上计算的创新和革命。从此&#xff0c;亚马逊云科技在云计算软硬件底层技术创…
阅读更多...
软件测试复习03：动态测试——黑盒测试

软件测试复习03：动态测试——黑盒测试

作者&#xff1a;非妃是公主 专栏&#xff1a;《软件测试》 个性签&#xff1a;顺境不惰&#xff0c;逆境不馁&#xff0c;以心制境&#xff0c;万事可成。——曾国藩 文章目录等价划分法边值分析法错误推测法因果图法示例习题等价划分法 等价类&#xff1a;一个几何&#xf…
阅读更多...
阿里云 gradle maven配置中心地址

阿里云 gradle maven配置中心地址

仓库名称阿里云仓库地址阿里云仓库地址(老版)源地址centralhttps://maven.aliyun.com/repository/centralhttps://maven.aliyun.com/nexus/content/repositories/centralhttps://repo1.maven.org/maven2/jcenterhttps://maven.aliyun.com/repository/publichttps://maven.aliyu…
阅读更多...
dp(五) 最长公共子串

dp(五) 最长公共子串

最长公共子串_牛客题霸_牛客网 描述 给定两个字符串str1和str2,输出两个字符串的最长公共子串 题目保证str1和str2的最长公共子串存在且唯一。 数据范围&#xff1a; 1≤∣str1∣,∣str2∣≤50001≤∣str1∣,∣str2∣≤5000 要求&#xff1a; 空间复杂度 O(n2)O(n2)&#x…
阅读更多...
【阶段三】Python机器学习22篇：机器学习项目实战：GBDT分类模型

【阶段三】Python机器学习22篇：机器学习项目实战：GBDT分类模型

本篇的思维导图： 项目实战(GBDT分类模型) 项目背景 应用GBDT算法实现多分类模型，目标是实现GBDT多分类项目的全流程。 数据获取 本次建模数据来源于网络，数据项统计如下： 编号　 变量名称 <
阅读更多...
聚焦：XuperOS成长计划FAQ

聚焦：XuperOS成长计划FAQ

1月12日&#xff0c;百度超级链发布XuperOS成长计划&#xff08;&#x1f449;XuperOS 新年致辞&#xff1a;创世、监督、共建、国际&#xff09;。以下是我们整理的关于成长计划的常见问题&#xff0c;为关心XuperOS的广大朋友答疑解惑。问&#xff1a;XuperChain除了发行这四…
阅读更多...
662. 二叉树最大宽度

662. 二叉树最大宽度

662. 二叉树最大宽度 难度中等530 给你一棵二叉树的根节点 root &#xff0c;返回树的 最大宽度 。 树的 最大宽度 是所有层中最大的 宽度 。 每一层的 宽度 被定义为该层最左和最右的非空节点&#xff08;即&#xff0c;两个端点&#xff09;之间的长度。将这个二叉树视作…
阅读更多...
IT信息化推进那么难，为什么，怎么办 ？

IT信息化推进那么难，为什么，怎么办 ？

IT信息化推进除了管理层的支持外&#xff0c;更重要的是要赢得业务的支持。但往往业务方有时会排斥IT信息化&#xff0c;这里面有很多的原因&#xff0c;比如&#xff1a;不懂业务的想法难沟通&#xff1b;系统不好用、体验不好、问题太多&#xff0c;不想用。换一波IT团队&…
阅读更多...
华为双点双向路由引入实验配置

华为双点双向路由引入实验配置

配置接口IP地址&#xff0c;建立相关的路由邻居 然后在AR2上将ISIS引入OSPF&#xff08;isis-ospf&#xff09;&#xff0c;将OSPF引入ISIS&#xff08;ospf-isis&#xff09; 然后在AR4上将ISIS引入OSPF&#xff08;isis-ospf&#xff09;&#xff0c;将OSPF引入ISIS&#x…
阅读更多...
【Electron】解决 npm安装出现 self-signed certificate in certificate

【Electron】解决 npm安装出现 self-signed certificate in certificate

问题 按照Electron 官网步骤安装时 npm install electron --save-dev出现报错 error RequestError: self-signed certificate in certificate chain 解决 解决方式1&#xff1a; 优先尝试 git config --global http.sslVerify false npm set strict-ssl false解决方式2&…
阅读更多...
【写作能力提升】“5种搭建⽂章架构的⽅法”免费赠送!

【写作能力提升】“5种搭建⽂章架构的⽅法”免费赠送!

“ 【写作能力提升】系列文章&#xff1a; 为什么建议你一定要学会写作? “5 种搭建⽂章架构的⽅法”免费赠送! 写作小白需要避免的五个写作误区和灵魂五问 ”一、前言 Hello&#xff0c;我是小木箱&#xff0c;今天主要分享的内容是: 5 种搭建⽂章架构的⽅法! 大家普遍有一个…
阅读更多...
【jQuery】常用API——jQuery元素操作

【jQuery】常用API——jQuery元素操作

jQuery元素操作主要是遍历、创建、添加、删除元素操作。一、遍历元素 jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作&#xff0c;就需要用到遍历。 主要用于DOM处理$("div").each(function (index, domEle) { xxx; });each&#xf…
阅读更多...
c++11 标准模板（STL）（std::forward_list）（七）

c++11 标准模板（STL）（std::forward_list）（七）

定义于头文件 <forward_list> template< class T, class Allocator std::allocator<T> > class forward_list;(1)(C11 起)namespace pmr { template <class T> using forward_list std::forward_list<T, std::pmr::polymorphic_…
阅读更多...
分享57个Python源码，总有一款适合您

分享57个Python源码，总有一款适合您

Python源码 分享57个Python源码&#xff0c;总有一款适合您 57个Python源码下载链接&#xff1a;https://pan.baidu.com/s/1YZcrJAYFFy3OrdEN5IxnQQ?pwd6666 提取码&#xff1a;6666 采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 下面是文件的名字&#xff0c;我放…
阅读更多...
Cadence Allegro 全局布线GRE规划应用及参数设置

Cadence Allegro 全局布线GRE规划应用及参数设置

GRE是Global Route Environment的缩写，中文意思为全局布线环境，运用具备阶层化意识的全面绕线引擎与图形式互连流程规划程序。通GRE技术在短时间就可以开发出包含众多互连总线与芯片引脚数的复杂且高速的设计组件。此外，运用GRE技术后便于工程师实现更佳的功能密度与系统效能…
阅读更多...
ZYNQ-IP核封装笔记

ZYNQ-IP核封装笔记

step1&#xff1a;新建文件 将源码放进src中 step2&#xff1a;新建IP location&#xff08;可以多次使用&#xff0c;下次无需创建&#xff09; 点击“ Finish”之后&#xff0c; Vivado 会新建一个名为“ Manage IP”的工程&#xff0c; IP_produce就是我管理IP核的一个空…
阅读更多...
【高级Java开发】类QQ聊天工具的设计与实现（代码已上传）

【高级Java开发】类QQ聊天工具的设计与实现（代码已上传）

1、要求类QQ聊天工具的设计与实现&#xff0c;要求如下&#xff1a;用户可注册并通过密码录登。用户可通过查找添加自己的好友。用户可通过好友列表选择好友并与之对话。需实现聊天记录查看功能。界面美观大方&#xff0c;交互设计尽量参考QQ。代码结构合理&#xff0c;可复用性…
阅读更多...
openGauss2.0.0之Java简单测试Sequence

openGauss2.0.0之Java简单测试Sequence

openGauss2.0.0之Java测试Sequence一、实验环境二、实验目标二、实验步骤一、实验环境 项目Value操作系统openEuler服务器华为云弹性云服务器ECS 1 台 2核心 4GB内存数据库openGauss2.0.0 单机部署 二、实验目标 目标 学习openGauss2.0.0的序列的使用&#xff0c;熟悉JDBC编程方…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023