ECharts实现简单饼图和柱状图

news2024/11/16 5:50:17

1.JAVA

1.饼图

前端使用vue,后端使用SpringBoot

<template>
  <div>
    <div class="card" style="padding: 15px">
      数据可视化分析:图书类型销量
    </div>

    <div style="display: flex; margin: 10px 0">
      <div style="display: flex; margin: 10px 0">
        <div style="width: 1200px;height: 600px;" class="card" id="goodsPie"></div>
      </div>
    </div>

  </div>
</template>

<script>
import * as echarts from "echarts";

let pieGoodsOptions = {
  title: {
    text: '', // 主标题
    subtext: '', // 副标题
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    top: '8%',
    type: 'scroll',
    orient: 'vertical',
    left: 'left',
    pageIconColor: 'red', // 激活的分页按钮颜色
    pageIconInactiveColor: 'yellow', // 没激活的分页按钮颜色
  },
  series: [
    {
      name: '', // 鼠标移上去显示内容
      type: 'pie',
      radius: '50%',
      center: ['50%', '60%'],
      data: [
        {value: 0, name: ''}, // 示例数据:name表示维度,value表示对应的值
      ]
    }
  ]
}

export default {
  name: "Visualization",
  data() {
    return {
      
    }
  },
  created() {
    this.loadGoodsPie();
  },
  methods: {
    loadGoodsPie(){
      this.$request.get('/goods/getPie').then(res => {
        if (res.code === '200') {
          let chartDom = document.getElementById('goodsPie');
          let myChart = echarts.init(chartDom);
          pieGoodsOptions.title.text = res.data.text
          pieGoodsOptions.title.subtext = res.data.subText
          pieGoodsOptions.series[0].name = res.data.name
          pieGoodsOptions.series[0].data = res.data.data
          myChart.setOption(pieGoodsOptions);
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>
/**
 * 渲染图书类型销量饼状图
 */
@GetMapping("/getPie")
public Result getPie() {
    Map<String, Object> resultMap = new HashMap<>();
    List<Map<String, Object>> list = new ArrayList<>();

    // 获得商品分类名称为key,该分类销量为value的map
    List<Goods> goodsList = goodsService.selectAll(new Goods());
    Map<String, Integer> collect = goodsList.stream().filter(x -> ObjectUtil.isNotEmpty(x.getTypeId()))
            .collect(Collectors.groupingBy(Goods::getTypeName, Collectors.reducing(0, Goods::getCount, Integer::sum)));

    for (String key : collect.keySet()) {
        Map<String, Object> map = new HashMap<>();
        map.put("name", key);
        map.put("value", collect.get(key));
        list.add(map);
    }

    resultMap.put("text", "图书类型销售量统计饼图");
    resultMap.put("subText", "统计维度:图书类型");
    resultMap.put("name", "占比数据");
    resultMap.put("data", list);

    return Result.success(resultMap);
}

1.柱状图

前端使用vue,后端使用SpringBoot

<template>
  <div>
    <div class="card" style="padding: 15px">
      数据可视化分析:店铺销量
    </div>

    <div style="display: flex; margin: 10px 0">

      <!-- 后台主页左上部分:公告 -->
      <div style="display: flex; margin: 10px 0">
        <div style="width: 600px;height: 600px;" class="card" id="businessBar"></div>
      </div>

    </div>

  </div>
</template>

<script>
import * as echarts from "echarts";

let barBusinessOptions = {
  title: {
    text: '', // 主标题
    subtext: '', // 副标题
    left: 'center'
  },
  xAxis: {
    axisLabel:{
      interval: 0,
      //rotate:30,
      formatter: function (name) {
        return (name.length > 8 ? (name.slice(0,8)+"...") : name );
      },
    },
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 示例数据:统计的维度(横坐标)
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130], // 示例数据:横坐标维度对应的值(纵坐标)
      type: 'bar',
      itemStyle: {
        normal: {
          color:function(){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
        },
      },
    }
  ]
}

export default {
  name: "Visualization2",
  data() {
    return {
      
    }
  },
  created() {
    this.loadBusinessBar();
  },
  methods: {
    loadBusinessBar(){
      this.$request.get('/goods/getBar').then(res => {
        if (res.code === '200') {
          let chartDom = document.getElementById('businessBar');
          let myChart = echarts.init(chartDom);
          barBusinessOptions.title.text = res.data.text
          barBusinessOptions.title.subtext = res.data.subText
          barBusinessOptions.xAxis.data = res.data.xAxis
          barBusinessOptions.series[0].data = res.data.yAxis
          myChart.setOption(barBusinessOptions);
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>
/**
 * 渲染店铺销量柱状图
 */
@GetMapping("/getBar")
public Result getBar() {
    Map<String, Object> resultMap = new HashMap<>(); // 存取最后返回的数据
    Map<String, Object> res = new HashMap<>(); // 暂存销量前5的数据
    List<String> xList = new ArrayList<>(); // 店铺名称
    List<Integer> yList = new ArrayList<>(); // 店铺总销量

    // 获得店铺名称为key,该店铺全部销量求和为value的map
    List<Goods> goodsList = goodsService.selectAll(new Goods());
    Map<String, Integer> collect = goodsList.stream().filter(x -> ObjectUtil.isNotEmpty(x.getBusinessId()))
            .collect(Collectors.groupingBy(Goods::getBusinessName, Collectors.reducing(0, Goods::getCount, Integer::sum)));

    collect.entrySet()
            .stream()
            // 排序
            .sorted((p1, p2) -> p2.getValue().compareTo(p1.getValue()))
            // 截取前limitSize个
            .limit(5)
            .collect(Collectors.toList()).forEach(ele -> res.put(ele.getKey(), ele.getValue()));

    for (String key : res.keySet()) {
        xList.add(key);
        yList.add((Integer) res.get(key));
    }

    resultMap.put("text", "店铺销售量前五统计柱状图");
    resultMap.put("subText", "统计维度:店铺名称");
    resultMap.put("xAxis", xList);
    resultMap.put("yAxis", yList);

    return Result.success(resultMap);
}

2.Python 

1.折线图

import json
from pyecharts.charts import Line
from pyecharts.options import TitleOpts,LegendOpts,ToolboxOpts,VisualMapOpts,LabelOpts

# 处理数据
f_usa = open("D:/美国.txt","r",encoding="UTF-8")
usa_data = f_usa.read() # 美国的全部内容
f_jp = open("D:/日本.txt","r",encoding="UTF-8")
jp_data = f_jp.read() # 日本的全部内容
f_in = open("D:/印度.txt","r",encoding="UTF-8")
in_data = f_in.read() # 印度的全部内容

# 去掉不符合JSON规范的开头
usa_data = usa_data.replace("jsonp_1629344292311_69436(","")
jp_data = jp_data.replace("jsonp_1629350871167_29498(","")
in_data = in_data.replace("jsonp_1629350745930_63180(","")

# 去掉不符合JSON规范的结尾
usa_data = usa_data[0:-2:1] # 最后两个字符:); 不要
jp_data = jp_data[0:-2:1] # 最后两个字符:); 不要
in_data = in_data[0:-2:1] # 最后两个字符:); 不要

# JSON转为python字典
usa_dict = json.loads(usa_data)
jp_dict = json.loads(jp_data)
in_dict = json.loads(in_data)
# print(type(usa_dict))
# print(usa_dict)

# 获取trend
usa_trend_data = usa_dict['data'][0]['trend']
jp_trend_data = jp_dict['data'][0]['trend']
in_trend_data = in_dict['data'][0]['trend']
# print(trend_data)

#取日期数据,用于x轴,只去2020一年(到313结束)
usa_x_data = usa_trend_data["updateDate"][0:314]
jp_x_data = jp_trend_data["updateDate"][0:314]
in_x_data = in_trend_data["updateDate"][0:314]
# print(x_data)

#取确诊数据,用于y轴
usa_y_data = usa_trend_data['list'][0]['data'][0:314]
jp_y_data = jp_trend_data['list'][0]['data'][0:314]
in_y_data = in_trend_data['list'][0]['data'][0:314]
# print(y_data)

# 生成图表对象
line = Line()

# 添加x轴,日期公用添加一个即可
line.add_xaxis(usa_x_data)

# 添加y轴
line.add_yaxis("美国确诊人数", usa_y_data, label_opts=LabelOpts(is_show=False)) # 设置折线上不展示数字
line.add_yaxis("日本确诊人数", jp_y_data, label_opts=LabelOpts(is_show=False))
line.add_yaxis("印度确诊人数", in_y_data, label_opts=LabelOpts(is_show=False))

# 设置全局配置项,选填
line.set_global_opts(
    title_opts=TitleOpts(title="2020年美日印确诊人数折线图",pos_left="center",pos_bottom="1%"), # 标题
    legend_opts=LegendOpts(is_show=True), # 图例
    toolbox_opts=ToolboxOpts(is_show=True), # 工具箱
    visualmap_opts=VisualMapOpts(is_show=True), # 视觉映射
)

# 生成图表
line.render()

# 关闭文件对象
f_usa.close()
f_jp.close()
f_in.close()

2.全国地图

import json
from pyecharts.charts import Map
from pyecharts.options import *

f = open("D:/疫情.txt","r",encoding="UTF-8")
data = f.read() # 全部数据
f.close()

# JSON转为python字典
data_dict = json.loads(data)

# 从字典中获取省份数据
province_data_dict = data_dict["areaTree"][0]["children"]

# 组装每个省份和确诊人数为元组,封装在列表内
data_list = [] # 绘图用的列表数据
for province_data in province_data_dict:
    province_name = province_data["name"]
    province_confirm = province_data["total"]["confirm"]
    data_list.append((province_name,province_confirm))
# print(data_list)

# 创建地图对象
map = Map()

# 添加数据
map.add("各省份确诊人数",data_list,"china")

# 设置全局配置项,选填
map.set_global_opts(
    title_opts=TitleOpts(title="全国疫情地图"), # 标题
    visualmap_opts=VisualMapOpts(
        is_show=True, # 是否显示
        is_piecewise=True, # 是否分段
        pieces=[
            {"min":1 , "max":99 , "label":"1-99人确诊" , "coclor":"#CCFFFF"},
            {"min":100 , "max":999 , "label":"100-999人确诊" , "coclor":"#FFFF99"},
            {"min":1000 , "max":4999 , "label":"1000-4999人确诊" , "coclor":"#FF9966"},
            {"min":5000 , "max":9999 , "label":"5000-9999人确诊" , "coclor":"#FF6666"},
            {"min":10000 , "max":99999 , "label":"10000-99999人确诊" , "coclor":"#CC3333"},
            {"min":100000 , "label":"100000+人确诊" , "coclor":"#990033"},
        ]
    ), # 视觉映射
)

# 绘图
map.render("全国疫情地图.html")

3.河南省地图

import json
from pyecharts.charts import Map
from pyecharts.options import *

f = open("D:/疫情.txt","r",encoding="UTF-8")
data = f.read() # 全部数据
f.close()

# JSON转为python字典
data_dict = json.loads(data)

# 取到河南省数据
cities_data_dict = data_dict["areaTree"][0]["children"][3]["children"]
# print(cities_data_dict)

# 组装每个城市和确诊人数为元组,封装在列表内
data_list = [] # 绘图用的列表数据
for city_data in cities_data_dict:
    city_name = city_data["name"]+"市"
    city_confirm = city_data["total"]["confirm"]
    data_list.append((city_name, city_confirm))

# 创建地图对象
map = Map()

# 添加数据
map.add("河南省疫情分布",data_list,"河南")

# 设置全局配置项,选填
map.set_global_opts(
    title_opts=TitleOpts(title="河南省疫情分布地图"), # 标题
    visualmap_opts=VisualMapOpts(
        is_show=True, # 是否显示
        is_piecewise=True, # 是否分段
        pieces=[
            {"min":1 , "max":99 , "label":"1-99人确诊" , "coclor":"#CCFFFF"},
            {"min":100 , "max":999 , "label":"100-999人确诊" , "coclor":"#FFFF99"},
            {"min":1000 , "max":4999 , "label":"1000-4999人确诊" , "coclor":"#FF9966"},
            {"min":5000 , "max":9999 , "label":"5000-9999人确诊" , "coclor":"#FF6666"},
            {"min":10000 , "max":99999 , "label":"10000-99999人确诊" , "coclor":"#CC3333"},
            {"min":100000 , "label":"100000+人确诊" , "coclor":"#990033"},
        ]
    ), # 视觉映射
)

# 绘图
map.render("河南省疫情分布地图.html")

 


可以点个免费的赞吗!!!   

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

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

相关文章

autosar学习笔记 之SecOC

SecOC 接下来SecOC标准就更复杂一点,它不单单是做了通讯校验。 SecOC是基于对称密钥加密的一套机制,需要对ECU间的通讯作身份认证处理,来更好的防止伪装攻击,谈起对称或非对称加密,就会涉及到密钥的存储和Mac值的计算。 因此SECOC机制对于密钥的硬件存储,也有一定的要求…

从零学习Hession RPC

为什么学习Hessian RPC&#xff1f; 存粹的RPC&#xff0c;只解决PRC的四个核心问题&#xff08;1.网络通信2.协议 3.序列化 4.代理&#xff09;Java写的HessianRPC落伍了&#xff0c;但是它的序列化方式还保存着&#xff0c;被Dubbo(Hessian Lite)使用。 被落伍&#xff0c;只…

K8S图像化工具rancher

Rancher是一个开源的企业级多集群的k8s管理平台 Rancher和k8s的区别 都是为了容器的调度和编排系统&#xff0c;但是rancher不仅能够调度&#xff0c;还能挂历k8s集群&#xff0c;自带监控&#xff08;普罗米修斯&#xff09;&#xff0c;你哪怕不知带k8s是什么&#xff0c;一样…

如何在Kali系统配置启动SSH并结合内网穿透实现远程连接

文章目录 1. 启动kali ssh 服务2. kali 安装cpolar 内网穿透3. 配置kali ssh公网地址4. 远程连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 简单几步通过[cpolar 内网穿透](cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站)软件实现ssh 远程连接kali! …

【Kafka】Kafka安装:Linux本地和Docker

目录 Linux本地安装kafkajava环境配置Zookeeper的安装配置Kafka的安装与配置生产与消费 Docker安装kafkaZookeeper安装Kafka安装 Linux本地安装kafka java环境配置 1、上传jdk-8u261-linux-x64.rpm到服务器并安装&#xff1a; rpm -ivh jdk-8u261-linux-x64.rpm2、配置环境变…

抖音跳转微信公众号是怎么实现的丨数灵通

抖音是一款非常流行的社交媒体应用程序&#xff0c;用户可以在其中分享短视频和互动内容。许多用户希望通过抖音来引流到他们的微信公众号&#xff0c;以扩大影响力并吸引更多粉丝。以下是一些关于如何在抖音上跳转到微信公众号的科普信息&#xff1a; 1.信息流广告&#xff1a…

爬虫笔记(二):实战58二手房

第一&#xff1a;给大家推荐一个爬虫的网课哈&#xff0c;码起来 第二&#xff1a;今夜主题&#xff1a;通过xpath爬取58二手房的title信息&#xff0c;也就是标红的位置~ 第三&#xff1a;先分析一波title所在的位置 打开按下f12打开抓包工具&#xff0c;即可看到网站的源码…

RBD —— 不同材质破碎

目录 Working with concrete Chipping Details Proxy geometry Constraints Working with glass Chipping Proxy geometry Constraints Resolving issues with glass fracturing Working with wood Clustering Using custom cutters Working with concrete Concr…

2024年破圈9套商业模式电商干货,真心分享丨项目孵化必看

2024年破圈9套商业模式电商干货&#xff0c;真心分享丨项目孵化必看 文丨微三云营销总监胡佳东&#xff0c;点击上方“关注”&#xff0c;为你分享市场商业模式电商干货。 - 疫情过后&#xff0c;市场瞬息万变&#xff0c;理想状态的消费复苏和消费回暖的机遇并没有到来&…

简述Elasticsearch(ES)是什么 全文搜索概念 (倒排索引 管理文档)

今天 我们来说说 NoSql 中的 Elasticsearch 大家基本都叫它 ES 官方介绍 它是一个分布式全文搜索引擎 分布式是一个系统架构的概念 而 全文搜索引擎 全文搜索 可以说基本大家天天都在接触 就比如 我们京东购物 想买什么东西 在全文输入框中搜索 它就会在所有物品中 帮你找出需…

2023年AI大模型:从科技热潮到商业变革

出品&#xff1a;新商纪&#xff0c;作者&#xff1a;独孤依风 2023年&#xff0c;大模型技术在全球科技界掀起了一场风暴&#xff0c;引发了科技巨头们的激烈角逐。这一年&#xff0c;大模型不仅重新定义了人工智能的边界&#xff0c;还催生了跨行业技术革新。 根据IDC的预测…

年少不知 Base 好,错把总包当成宝。。

今天聊一个很现实的话题&#xff1a;选 offer 对比薪资时&#xff0c;我强烈建议以 Base 为主&#xff0c;而不是总包。 为什么&#xff1f;且听鱼皮娓娓道来。 注意&#xff0c;以下为个人观点&#xff0c;仅供参考&#xff01; 首先明确 Base 和总包的概念&#xff1a; Base&…

使用PowerShell命令行,批量修改文件编码

目录 ■前言 ■PowerShell命令 ■效果 ■前言 今天统计修改代码量&#xff0c;使用工具时&#xff0c;发现有些代码无法统计。 原因时UTF-8中有某些特殊字符&#xff0c;工具不能识别。 但是&#xff0c;如果把代码转换为SJIS格式&#xff0c;就能正常统计了。 因此&…

猫头虎分享:已解决RuoYi-Vue3 项目代码生成器默认生成代码使用的Vue2模板代码问题与Vue2升级到Vue3解决方案

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…

HCIP-11

生成树协议&#xff1a; 企业网三层架构---》冗余----》线路冗余---》二层桥接环路 导致问题&#xff1a; 广播风暴MAC地址表翻滚同一数据帧的重复拷贝以上3个条件最终导致设备工作过载&#xff0c;导致重启保护 生成树&#xff1a;在一个二层交换网络中&#xff0c;生成一棵…

Python之数据可视化基础

目录 一 JSON数据格式转换 二 pyecharts模块 三 Pyecharts入门 四 数据可视化之疫情折线图 一 JSON数据格式转换 什么是JSON? JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式。它以易于阅读和编写的方式来表示结构化数据。JSO…

Linux:Bash中变量的定义与使用

相关文章 Linux专栏https://blog.csdn.net/weixin_45791458/category_12234591.html 在bash shell中&#xff0c;变量(variable)是参数(parameter)的一类&#xff0c;用于存储值&#xff0c;且变量还可以拥有属性(attributes)&#xff0c;这通过bash内建命令declare来完成。 一…

Python 第四十三章 MYSQL 补充

多表查询 1.笛卡尔积:将两表所有的数据一一对应,生成一张大表 select * from dep,emp; #两个表拼一起 select * from dep,emp where dep.id emp.dep_id; #找到两表之间对应的关系记录 select * from dep,emp where dep.id emp.dep_id and dep.name技术; #筛选部门名称为技…

springboot优雅停机

import org.springframework.context.annotation.Configuration;import javax.annotation.PreDestroy;Configuration public class DataBackupConfig {PreDestroypublic void backData(){System.out.println("开始备份..."System.currentTimeMillis());System.out.pr…

基于springboot留守儿童爱心网站源码和论文

随着留守儿童爱心管理的不断发展&#xff0c;留守儿童爱心网站在现实生活中的使用和普及&#xff0c;留守儿童爱心管理成为近年内出现的一个热门话题&#xff0c;并且能够成为大众广为认可和接受的行为和选择。设计留守儿童爱心网站的目的就是借助计算机让复杂的管理操作变简单…