devbox
笔触狂放9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

springboot+echarts +mysql制作数据可视化大屏（六图）_用sqoop导入mysql,再用echars实现可视化大屏

作者：笔触狂放9 | 2024-04-05 01:38:56

赞

踩

用sqoop导入mysql,再用echars实现可视化大屏

 作者水平低，如有错误，恳请指正！谢谢！！！！！

项目简单，适合大学生参考

分类专栏还有其它的可视化博客哦！

专栏地址：https://blog.csdn.net/qq_55906442/category_11906804.html?spm=1001.2014.3001.5482

目录

 一、数据源

二、所需工具

三、项目框架搭建

四、代码编写

订单金额折线图

利润情况信息

虚拟柱状图

平均支付时间统计

订单金额统计

旭日图

五、大屏编写

成果展示：

​

 一、数据源

1）可以使用自己的MySQL数据库；

2）使用我提供的数据。（要数据私信/留言——>留下邮箱即可）

二、所需工具

MySQL、IDEA、jdk1.8、Maven等等，总之编写工具要准备好，环境要搭建好

三、项目框架搭建

参考我博客的项目框架搭建，从3.1看到4.3即可springboot+mybatis+echarts +mysql制作数据可视化大屏_spring + 可视化大屏_一个人的牛牛的博客-CSDN博客

四、代码编写

代码简单，后端代码都写在一起了，没有区分controller等等，前端也是一样，没有单独写js等等。有些图数据为了偷懒是手敲的，没有从数据库读取。

订单金额折线图

后端

  1. import org.springframework.beans.factory.annotation.Autowired;
  2. import org.springframework.jdbc.core.JdbcTemplate;
  3. import org.springframework.web.bind.annotation.GetMapping;
  4. import org.springframework.web.bind.annotation.RestController;
  5.  
  6. import java.util.ArrayList;
  7. import java.util.HashMap;
  8. import java.util.List;
  9. import java.util.Map;
  10.  
  11. @RestController
  12. public class Big2Controller {
  13.  
  14.     private final JdbcTemplate jdbcTemplate;
  15.  
  16.     @Autowired
  17.     public Big2Controller(JdbcTemplate jdbcTemplate) {
  18.         this.jdbcTemplate = jdbcTemplate;
  19.     }
  20.  
  21.     @GetMapping("/chart-data2")
  22.     public Map<String, Object> getChartData() {
  23.         String query = "SELECT dt, order_amount FROM ads_order_daycount";
  24.         List<Map<String, Object>> result = jdbcTemplate.queryForList(query);
  25.  
  26.         List<String> labels = new ArrayList<>();
  27.         List<Integer> values = new ArrayList<>();
  28.  
  29.         for (Map<String, Object> row : result) {
  30.             String dt = row.get("dt").toString();
  31.             Integer orderAmount = ((Number) row.get("order_amount")).intValue();
  32.  
  33.             labels.add(dt);
  34.             values.add(orderAmount);
  35.         }
  36.  
  37.         Map<String, Object> data = new HashMap<>();
  38.         data.put("labels", labels);
  39.         data.put("values", values);
  40.  
  41.         return data;
  42.     }
  43. }

 验证接口：运行项目，浏览器访问http://localhost:8081/chart-data2

前端

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>折线图</title>
  6.   <style>
  7.     html, body {
  8.       height: 100%;
  9.       margin: 0;
  10.       padding: 0;
  11.     }
  12.     #chart-container {
  13.       width: 100%;
  14.       height: 100%;
  15.       min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */
  16.     }
  17.   </style>
  18. </head>
  19. <body>
  20. <div id="chart-container"></div>
  21.  
  22. <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
  23. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  24. <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  25. <script>
  26.   // 使用 Axios 发送 AJAX 请求
  27.   axios.get('/chart-data2')
  28.           .then(function (response) {
  29.             // 处理从后端返回的数据
  30.             const data = response.data;
  31.  
  32.             // 提取 X 轴和 Y 轴数据
  33.             const xData = data.labels;
  34.             const yData = data.values;
  35.  
  36.             // 创建图表
  37.             const chartContainer = document.getElementById('chart-container');
  38.             const chart = echarts.init(chartContainer);
  39.  
  40.             // 监听窗口大小变化事件
  41.             window.addEventListener('resize', function() {
  42.               chart.resize(); // 调整图表大小
  43.             });
  44.  
  45.             const option = {
  46.               title: {
  47.                 text: '订单金额折线图'
  48.               },
  49.               xAxis: {
  50.                 type: 'category',
  51.                 data: xData
  52.               },
  53.               yAxis: {
  54.                 type: 'value'
  55.               },
  56.               series: [{
  57.                 type: 'line',
  58.                 data: yData,
  59.                 areaStyle: {
  60.                   color: 'rgba(0, 128, 255, 0.3)' // 设置背景颜色
  61.                 }
  62.               }]
  63.             };
  64.  
  65.             // 渲染图表
  66.             chart.setOption(option);
  67.  
  68.           })
  69.           .catch(function (error) {
  70.             console.log(error);
  71.           });
  72. </script>
  73. </body>
  74. </html>

验证页面：运行项目，浏览器访问http://localhost:8081/big2.html

利润情况信息

前端

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>利润情况信息</title>
  6.     <!-- 引入 echarts.js -->
  7.     <script src="/js/echarts.min.js"></script>
  8.     <script src="/js/jquery-3.5.1.min.js"></script>
  9.     <style>
  10.         html, body {
  11.             height: 100%;
  12.             margin: 0;
  13.             padding: 0;
  14.         }
  15.         #main {
  16.             width: 100%;
  17.             height: 100%;
  18.             min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  24. <div id="main"></div>
  25. <script type="text/javascript">
  26.     var chartDom = document.getElementById('main');
  27.     var myChart = echarts.init(chartDom);
  28.     var option;
  29.  
  30.     // 监听窗口大小变化事件
  31.     window.addEventListener('resize', function() {
  32.         myChart.resize(); // 调整图表大小
  33.     });
  34.  
  35.     option = {
  36.         title: {
  37.             text: '利润情况信息',
  38.             textStyle: {
  39.                 textAlign: 'center'
  40.             }
  41.         },
  42.         tooltip: {
  43.             trigger: 'axis',
  44.             axisPointer: {
  45.                 type: 'shadow'
  46.             }
  47.         },
  48.         legend: {
  49.             data: ['利润', '费用', '收入']
  50.         },
  51.         grid: {
  52.             left: '3%',
  53.             right: '4%',
  54.             bottom: '3%',
  55.             containLabel: true
  56.         },
  57.         xAxis: [
  58.             {
  59.                 type: 'value'
  60.             }
  61.         ],
  62.         yAxis: [
  63.             {
  64.                 type: 'category',
  65.                 axisTick: {
  66.                     show: false
  67.                 },
  68.                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  69.             }
  70.         ],
  71.         series: [
  72.             {
  73.                 name: 'Profit',
  74.                 type: 'bar',
  75.                 label: {
  76.                     show: true,
  77.                     position: 'inside'
  78.                 },
  79.                 emphasis: {
  80.                     focus: 'series'
  81.                 },
  82.                 data: [200, 170, 240, 244, 200, 220, 210]
  83.             },
  84.             {
  85.                 name: 'Income',
  86.                 type: 'bar',
  87.                 stack: 'Total',
  88.                 label: {
  89.                     show: true
  90.                 },
  91.                 emphasis: {
  92.                     focus: 'series'
  93.                 },
  94.                 itemStyle: {
  95.                     emphasis: {
  96.                         shadowBlur: 10,
  97.                         shadowOffsetX: 0,
  98.                         shadowColor: 'rgba(0, 0, 0, 0.5)'
  99.                     },
  100.                     normal:{
  101.                         color:function(params) {
  102.                             //自定义颜色
  103.                             var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  104.                             return colorList[params.dataIndex]
  105.                         }
  106.                     }
  107.                 },
  108.                 data: [320, 302, 341, 374, 390, 450, 420]
  109.             },
  110.             {
  111.                 name: 'Expenses',
  112.                 type: 'bar',
  113.                 stack: 'Total',
  114.                 label: {
  115.                     show: true,
  116.                     position: 'left'
  117.                 },
  118.                 emphasis: {
  119.                     focus: 'series'
  120.                 },
  121.                 itemStyle: {
  122.                     emphasis: {
  123.                         shadowBlur: 10,
  124.                         shadowOffsetX: 0,
  125.                         shadowColor: 'rgba(0, 0, 0, 0.5)'
  126.                     },
  127.                     normal:{
  128.                         color:function(params) {
  129.                             //自定义颜色
  130.                             var colorList = ['#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4','#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000', '#FE8463','#6495ed','#ff69b4'];
  131.                             return colorList[params.dataIndex]
  132.                         }
  133.                     }
  134.                 },
  135.                 data: [-120, -132, -101, -134, -190, -230, -210]
  136.             }
  137.         ]
  138.     };
  139.  
  140.     option && myChart.setOption(option);
  141.  
  142. </script>
  143. </body>

验证页面：运行项目，浏览器访问http://localhost:8081/negative.html

虚拟柱状图

前端

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>虚拟柱状图</title>
  6.     <script src="/js/echarts.min.js"></script>
  7.     <script src="/js/jquery-3.5.1.min.js"></script>
  8.     <style>
  9.         html, body {
  10.             height: 100%;
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  14.         #main {
  15.             width: 100%;
  16.             height: 100%;
  17.             min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <div id="main"></div>
  23. <script type="text/javascript">
  24.     var chartDom = document.getElementById('main');
  25.     var myChart = echarts.init(chartDom);
  26.     var option;
  27.  
  28.     // 监听窗口大小变化事件
  29.     window.addEventListener('resize', function() {
  30.         myChart.resize(); // 调整图表大小
  31.     });
  32.  
  33.     // Generate data
  34.     let category = [];
  35.     let dottedBase = +new Date();
  36.     let lineData = [];
  37.     let barData = [];
  38.     for (let i = 0; i < 20; i++) {
  39.         let date = new Date((dottedBase += 3600 * 24 * 1000));
  40.         category.push(
  41.             [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
  42.         );
  43.         let b = Math.random() * 200;
  44.         let d = Math.random() * 200;
  45.         barData.push(b);
  46.         lineData.push(d + b);
  47.     }
  48.     // option
  49.     option = {
  50.         title: {
  51.             text: '虚拟柱状',
  52.             textStyle: {
  53.                 textAlign: 'center'
  54.             }
  55.         },
  56.         backgroundColor: '',
  57.         tooltip: {
  58.             trigger: 'axis',
  59.             axisPointer: {
  60.                 type: 'shadow'
  61.             }
  62.         },
  63.         legend: {
  64.             data: ['line', 'bar'],
  65.             textStyle: {
  66.                 color: '#ccc'
  67.             }
  68.         },
  69.         xAxis: {
  70.             data: category,
  71.             axisLine: {
  72.                 lineStyle: {
  73.                     color: '#ccc'
  74.                 }
  75.             }
  76.         },
  77.         yAxis: {
  78.             splitLine: { show: false },
  79.             axisLine: {
  80.                 lineStyle: {
  81.                     color: '#ccc'
  82.                 }
  83.             }
  84.         },
  85.         series: [
  86.             {
  87.                 name: 'line',
  88.                 type: 'line',
  89.                 smooth: true,
  90.                 showAllSymbol: true,
  91.                 symbol: 'emptyCircle',
  92.                 symbolSize: 5,
  93.                 data: lineData
  94.             },
  95.             {
  96.                 name: 'bar',
  97.                 type: 'bar',
  98.                 barWidth: 10,
  99.                 itemStyle: {
  100.                     borderRadius: 5,
  101.                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  102.                         { offset: 0, color: '#14c8d4' },
  103.                         { offset: 1, color: '#43eec6' }
  104.                     ])
  105.                 },
  106.                 data: barData
  107.             },
  108.             {
  109.                 name: 'line',
  110.                 type: 'bar',
  111.                 barGap: '-100%',
  112.                 barWidth: 10,
  113.                 itemStyle: {
  114.                     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  115.                         { offset: 0, color: 'rgba(20,200,212,0.5)' },
  116.                         { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
  117.                         { offset: 1, color: 'rgba(20,200,212,0)' }
  118.                     ])
  119.                 },
  120.                 z: -12,
  121.                 data: lineData
  122.             },
  123.             {
  124.                 name: 'dotted',
  125.                 type: 'pictorialBar',
  126.                 symbol: 'rect',
  127.                 itemStyle: {
  128.                     color: '#0f375f'
  129.                 },
  130.                 symbolRepeat: true,
  131.                 symbolSize: [12, 4],
  132.                 symbolMargin: 1,
  133.                 z: -10,
  134.                 data: lineData
  135.             }
  136.         ]
  137.     };
  138.  
  139.     option && myChart.setOption(option);
  140.  
  141. </script>
  142. </body>

验证页面：运行项目，浏览器访问http://localhost:8081/histogram.html

平均支付时间统计

后端

  1. import org.springframework.beans.factory.annotation.Autowired;
  2. import org.springframework.jdbc.core.JdbcTemplate;
  3. import org.springframework.web.bind.annotation.GetMapping;
  4. import org.springframework.web.bind.annotation.RestController;
  5.  
  6. import java.util.ArrayList;
  7. import java.util.HashMap;
  8. import java.util.List;
  9. import java.util.Map;
  10.  
  11. @RestController
  12. public class Big3Controller {
  13.  
  14.     private final JdbcTemplate jdbcTemplate;
  15.  
  16.     @Autowired
  17.     public Big3Controller(JdbcTemplate jdbcTemplate) {
  18.         this.jdbcTemplate = jdbcTemplate;
  19.     }
  20.  
  21.     @GetMapping("/chart-data3")
  22.     public Map<String, Object> getChartData() {
  23.         String query = "SELECT dt, payment_avg_time FROM ads_payment_daycount";
  24.         List<Map<String, Object>> result = jdbcTemplate.queryForList(query);
  25.  
  26.         List<String> labels = new ArrayList<>();
  27.         List<Integer> values = new ArrayList<>();
  28.  
  29.         for (Map<String, Object> row : result) {
  30.             String dt = row.get("dt").toString();
  31.             Integer paymentAvgTime = ((Number) row.get("payment_avg_time")).intValue();
  32.  
  33.             labels.add(dt);
  34.             values.add(paymentAvgTime);
  35.         }
  36.  
  37.         Map<String, Object> data = new HashMap<>();
  38.         data.put("labels", labels);
  39.         data.put("values", values);
  40.  
  41.         return data;
  42.     }
  43. }

 验证接口：运行项目，浏览器访问http://localhost:8081/chart-data3

前端

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>平均支付时间统计</title>
  5.   <meta charset="UTF-8">
  6.   <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
  7.   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  8.   <style>
  9.     html, body {
  10.       height: 100%;
  11.       margin: 0;
  12.       padding: 0;
  13.     }
  14.     #chart {
  15.       width: 100%;
  16.       height: 100%;
  17.       min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */
  18.     }
  19.   </style>
  20. </head>
  21. <body>
  22. <div id="chart"></div>
  23. <script type="text/javascript">
  24.   var chart = echarts.init(document.getElementById('chart'));
  25.  
  26.   // 监听窗口大小变化事件
  27.   window.addEventListener('resize', function() {
  28.     chart.resize(); // 调整图表大小
  29.   });
  30.  
  31.   // 使用Ajax异步获取数据
  32.   $.ajax({
  33.     url: '/chart-data3',
  34.     type: 'GET',
  35.     dataType: 'json',
  36.     success: function(data) {
  37.       var option = {
  38.         title: {
  39.           text: '平均支付时间统计',
  40.           textStyle: {
  41.             textAlign: 'center'
  42.           }
  43.         },
  44.         tooltip: {},
  45.         angleAxis: {},
  46.         radiusAxis: {
  47.           type: 'category',
  48.           data: data.labels
  49.         },
  50.         polar: {},
  51.         series: [{
  52.           name: 'Avg Time',
  53.           type: 'bar',
  54.           data: data.values,
  55.           coordinateSystem: 'polar',
  56.           itemStyle: {
  57.             color: function(params) {
  58.               // 设置背景颜色
  59.               var colorList = ['#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD'];
  60.               return colorList[params.dataIndex % colorList.length];
  61.             }
  62.           }
  63.         }]
  64.       };
  65.       chart.setOption(option);
  66.     }
  67.   });
  68. </script>
  69. </body>
  70. </html>

 验证页面：运行项目，浏览器访问​​​​​​​http://localhost:8081/big3.html

订单金额统计

后端

  1. import org.springframework.beans.factory.annotation.Autowired;
  2. import org.springframework.jdbc.core.JdbcTemplate;
  3. import org.springframework.web.bind.annotation.GetMapping;
  4. import org.springframework.web.bind.annotation.RestController;
  5.  
  6. import java.util.ArrayList;
  7. import java.util.HashMap;
  8. import java.util.List;
  9. import java.util.Map;
  10.  
  11. @RestController
  12. public class Big4Controller {
  13.  
  14.     private final JdbcTemplate jdbcTemplate;
  15.  
  16.     @Autowired
  17.     public Big4Controller(JdbcTemplate jdbcTemplate) {
  18.         this.jdbcTemplate = jdbcTemplate;
  19.     }
  20.  
  21.     @GetMapping("/chart-data4")
  22.     public Map<String, Object> getChartData() {
  23.         String query = "SELECT dt, order_amount FROM ads_payment_daycount";
  24.         List<Map<String, Object>> result = jdbcTemplate.queryForList(query);
  25.  
  26.         List<String> labels = new ArrayList<>();
  27.         List<Integer> values = new ArrayList<>();
  28.  
  29.         for (Map<String, Object> row : result) {
  30.             String dt = row.get("dt").toString();
  31.             Integer orderAmount = ((Number) row.get("order_amount")).intValue();
  32.  
  33.             labels.add(dt);
  34.             values.add(orderAmount);
  35.         }
  36.  
  37.         Map<String, Object> data = new HashMap<>();
  38.         data.put("labels", labels);
  39.         data.put("values", values);
  40.  
  41.         return data;
  42.     }
  43. }

 验证接口：运行项目，浏览器访问​​​​​​​​​​​​​​http://localhost:8081/chart-data4

前端

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>订单金额统计</title>
  5.   <meta charset="UTF-8">
  6.   <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
  7.   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  8.   <style>
  9.     html, body {
  10.       height: 100%;
  11.       margin: 0;
  12.       padding: 0;
  13.     }
  14.     #chart {
  15.       width: 100%;
  16.       height: 100%;
  17.       min-height: 300px;
  18.     }
  19.   </style>
  20. </head>
  21. <body>
  22. <div id="chart"></div>
  23. <script type="text/javascript">
  24.   var chart = echarts.init(document.getElementById('chart'));
  25.  
  26.   // 监听窗口大小变化事件
  27.   window.addEventListener('resize', function() {
  28.     chart.resize(); // 调整图表大小
  29.   });
  30.  
  31.   // 使用Ajax异步获取数据
  32.   $.ajax({
  33.     url: '/chart-data4',
  34.     type: 'GET',
  35.     dataType: 'json',
  36.     success: function(data) {
  37.       var option = {
  38.         title: {
  39.           text: '订单金额统计',
  40.           textStyle: {
  41.             textAlign: 'center'
  42.           }
  43.         },
  44.         tooltip: {
  45.           trigger: 'item',
  46.           formatter: '{b}: {c} ({d}%)'
  47.         },
  48.         series: [{
  49.           name: '订单金额',
  50.           type: 'pie',
  51.           radius: '50%',
  52.           data: data.values.map(function(value, index) {
  53.             return {
  54.               name: data.labels[index],
  55.               value: value
  56.             };
  57.           })
  58.         }]
  59.       };
  60.       chart.setOption(option);
  61.     }
  62.   });
  63. </script>
  64. </body>
  65. </html>

验证页面：运行项目，浏览器访问​​​​​​​http://localhost:8081/big4.html

旭日图

前端

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>旭日图</title>
  6.   <!-- 引入 echarts.js 和 jQuery（CDN引用） -->
  7.   <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
  8.   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  9.   <style>
  10.     html, body {
  11.       height: 100%;
  12.       margin: 0;
  13.       padding: 0;
  14.     }
  15.     #main {
  16.       width: 100%;
  17.       height: 100%;
  18.       min-height: 300px; /* 设置最小高度，防止内容过小时显示异常 */
  19.     }
  20.   </style>
  21. </head>
  22. <body>
  23. <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  24. <div id="main"></div>
  25. <script type="text/javascript">
  26.  
  27.   var chartDom = document.getElementById('main');
  28.   var myChart = echarts.init(chartDom);
  29.   var option;
  30.  
  31.   option = {
  32.     title: {
  33.       text: '旭日图',
  34.       textStyle: {
  35.         textAlign: 'center'
  36.       }
  37.     },
  38.     silent: true,
  39.     series: [
  40.       {
  41.         radius: ['15%', '80%'],
  42.         type: 'sunburst',
  43.         sort: undefined,
  44.         emphasis: {
  45.           focus: 'ancestor'
  46.         },
  47.         data: [
  48.           {
  49.             value: 8,
  50.             children: [
  51.               {
  52.                 value: 4,
  53.                 children: [
  54.                   {
  55.                     value: 2
  56.                   },
  57.                   {
  58.                     value: 1
  59.                   },
  60.                   {
  61.                     value: 1
  62.                   },
  63.                   {
  64.                     value: 0.5
  65.                   }
  66.                 ]
  67.               },
  68.               {
  69.                 value: 2
  70.               }
  71.             ]
  72.           },
  73.           {
  74.             value: 4,
  75.             children: [
  76.               {
  77.                 children: [
  78.                   {
  79.                     value: 2
  80.                   }
  81.                 ]
  82.               }
  83.             ]
  84.           },
  85.           {
  86.             value: 4,
  87.             children: [
  88.               {
  89.                 children: [
  90.                   {
  91.                     value: 2
  92.                   }
  93.                 ]
  94.               }
  95.             ]
  96.           },
  97.           {
  98.             value: 3,
  99.             children: [
  100.               {
  101.                 children: [
  102.                   {
  103.                     value: 1
  104.                   }
  105.                 ]
  106.               }
  107.             ]
  108.           }
  109.         ],
  110.         label: {
  111.           color: '#000',
  112.           textBorderColor: '#fff',
  113.           textBorderWidth: 2,
  114.           formatter: function (param) {
  115.             var depth = param.treePathInfo.length;
  116.             if (depth === 2) {
  117.               return 'radial';
  118.             } else if (depth === 3) {
  119.               return 'tangential';
  120.             } else if (depth === 4) {
  121.               return '0';
  122.             }
  123.             return '';
  124.           }
  125.         },
  126.         levels: [
  127.           {},
  128.           {
  129.             itemStyle: {
  130.               color: '#CD4949'
  131.             },
  132.             label: {
  133.               rotate: 'radial'
  134.             }
  135.           },
  136.           {
  137.             itemStyle: {
  138.               color: '#F47251'
  139.             },
  140.             label: {
  141.               rotate: 'tangential'
  142.             }
  143.           },
  144.           {
  145.             itemStyle: {
  146.               color: '#FFC75F'
  147.             },
  148.             label: {
  149.               rotate: 0
  150.             }
  151.           }
  152.         ]
  153.       }
  154.     ]
  155.   };
  156.  
  157.   option && myChart.setOption(option);
  158.  
  159. </script>
  160. </body>
  161. </html>

五、大屏编写

前端

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>大屏可视化6</title>
  6.     <style>
  7.         /* CSS样式 */
  8.         body, html {
  9.             height: 100%;
  10.             margin: 0;
  11.             padding: 0;
  12.             background-color: cornflowerblue;
  13.         }
  14.         #header {
  15.             width: 100%;
  16.             height: 8%;
  17.             display: flex;
  18.             justify-content: center;
  19.             align-items: center;
  20.             background-color: cyan;
  21.             font-size: 24px;
  22.             font-weight: bold;
  23.         }
  24.         #content {
  25.             width: 100%;
  26.             height: 90%;
  27.             display: flex;
  28.             flex-wrap: wrap;
  29.             justify-content: space-around;
  30.             align-items: center;
  31.         }
  32.         .chart-container {
  33.             width: 32%;
  34.             height: 48%;
  35.             background-color: aquamarine;
  36.             margin-bottom: 20px;
  37.             box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  38.         }
  39.     </style>
  40. </head>
  41. <body>
  42.     <div id="header">电商数据情况大屏</div>
  43.  
  44.     <div id="content">
  45.         <div class="chart-container" id="chart1">
  46.             <iframe src="negative.html" style="width: 100%; height: 100%; border: none;"></iframe>
  47.         </div>
  48.         <div class="chart-container" id="chart2">
  49.             <iframe src="big2.html" style="width: 100%; height: 100%; border: none;"></iframe>
  50.         </div>
  51.         <div class="chart-container" id="chart3">
  52.             <iframe src="histogram.html" style="width: 100%; height: 100%; border: none;"></iframe>
  53.         </div>
  54.         <div class="chart-container" id="chart4">
  55.             <iframe src="big3.html" style="width: 100%; height: 100%; border: none;"></iframe>
  56.         </div>
  57.         <div class="chart-container" id="chart5">
  58.             <iframe src="big4.html" style="width: 100%; height: 100%; border: none;"></iframe>
  59.         </div>
  60.         <div class="chart-container" id="chart6">
  61.             <iframe src="yun.html" style="width: 100%; height: 100%; border: none;"></iframe>
  62.         </div>
  63.     </div>
  64.  
  65.     <script src="https://cdn.jsdelivr.net/npm/d3@7.0.0/dist/d3.min.js"></script>
  66.     <script>
  67.     </script>
  68. </body>
  69. </html>

运行项目，浏览器访问​​​​​​​http://localhost:8081/yun.html

注：http://localhost:8080/加上HTML的文件名都能够查看相应的图！

要码源的私聊/评论留下邮箱号，压缩包包括项目源码、数据sql文件，readme.txt。

声明：作品仅可作学习使用​​​​​​​。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/362475
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号