• 数据可视化-ECharts Html项目实战（2）

     在之前的文章中，我们学习了如何创建简单的折线图，条形图，柱形图并实现动态触发，最大最小平均值。想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢。

    数据可视化-ECharts Html项目实战（1）-CSDN博客文章浏览阅读858次，点赞32次，收藏23次。在之前的文章中，我们学习了如何安装Visual Studio Code并下载插件，想了解的朋友可以查看这篇文章。安装 Visual Studio Code今天的文章，我会从基础案例开始，带着大家在VS code中绘制ECharts里的折线图、条形图与柱形图，并实现动态触发以及最大、最小、平均值。https://blog.csdn.net/qq_49513817/article/details/136665547?spm=1001.2014.3001.5501

     今天的文章，我会从上一篇结尾的案例开始，带着大家在VS code中绘制ECharts里的堆积折线图、瀑布图、饼图。并实现图表标题的设置。

    目录

    一、知识回顾

    二、项目实战

    1.堆积折线图

    2.瀑布图

    3.饼图

    三、标题设置

    拓展-标题设置常用属性

    一、知识回顾

     在上一篇文章中，我们学习了如何创建一个基本的图表，也学习了一些基本的图表类型。

    更改图表类型的方法，学习能力强的朋友，应该已经知道了。

     就是更改这个type，中文意思就是“类型”，很好理解。

    常见的图表类型也告诉大家了，那么我想，今天的学习任务对于大家应该都很简单吧！

    在后面的动态触发和最大值，最小值，平均值中的代码我用到了几个陌生的东西。

    一个是toolbox，一个是tooltip，分别是提示框组件和工具箱，在后面的文章中我会告诉大家它的用法，大家现在只用知道它是什么，它的作用就行。

    现在，开始今天的学习吧。

    二、项目实战

    1.堆积折线图

    想要实现堆积折线图其实并不复杂，只需要两句简单的代码，但是有很多人不会用，它的关键在于放的位置。

    1.  stack:"all",
    2. //stack 属性通常用于堆叠多个系列的数据。当设置为 "all" 时，意味着图表上的所有系列都将被堆叠在一起。
    3.  areaStyle:{}
    4. //areaStyle 属性用于定义区域填充的样式。当这个属性为空对象 {} 时，//它通常意味着默认样式将被应用。但是，你可以在这个对象中添加各种属性来定制区域的填充颜色、透明度、边框等。

    现在，我们把它放到代码里试试

    可以看到，我们想要的堆积效果出现了。

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <script src="js/echarts.js">script>
    7. head>
    8.  
    9. <body>
    10.     <div id="main" style="width: 800px; height: 400px">div>
    11.     <script type="text/javascript">
    12.         var myChart = echarts.init(document.getElementById("main"));
    13.         var option = {
    14.             title: {
    15.                 text: '红红成绩表',
    16.                 subtext: '成绩来源于辅导员',
    17.             },
    18.             tooltip: {
    19.                 trigger: 'axis',
    20.             },
    21.             legend: {
    22.                 data: ['2023年', '2024年'],
    23.             },
    24.             toolbox: {
    25.                 show: true,
    26.                 feature: {
    27.                     mark: { show: true },
    28.                     dataView: { show: true, readOnly: false },
    29.                     magicType: { show: true, type: ['line', 'bar'] },
    30.                     restore: { show: true },
    31.                     saveAsImage: { show: true },
    32.                 },
    33.             },
    34.             calculable: true,
    35.             xAxis: [
    36.                 {
    37.                     type: 'category',  
    38.                     data:['2月','4月','6月','9月','11月','1月']
    39.                 },
    40.             ],
    41.             yAxis: [
    42.                 {
    43.                     type: 'value',
    44.                     data: ['红红'],
    45.                 },
    46.             ],
    47.             series: [
    48.                 {
    49.                     name: '2023年',
    50.                     type: 'line',
    51.                     data: [65,75,66,80,90,73],
    52.                     stack:"all",
    53.                     areaStyle:{}
    54.  
    55.                 },
    56.                 {
    57.                     name: '2024年',
    58.                     type: 'line',
    59.                     data: [65,88,75,40,60,72],
    60.                     stack:"all",
    61.                     areaStyle:{}
    62.  
    63.                 },
    64.             ],
    65.         };
    66.  
    67.         //使用刚指定的配置项和数据显示图表
    68.         myChart.setOption(option);
    69.     script>
    70. body>
    71.  
    72. html>

    现在，我们把昨天学的最大最小平均值加进去试试。

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <script src="js/echarts.js">script>
    7. head>
    8.  
    9. <body>
    10.     <div id="main" style="width: 800px; height: 400px">div>
    11.     <script type="text/javascript">
    12.         var myChart = echarts.init(document.getElementById("main"));
    13.         var option = {
    14.             title: {
    15.                 text: '红红成绩表',
    16.                 subtext: '成绩来源于辅导员',
    17.             },
    18.             tooltip: {
    19.                 trigger: 'axis',
    20.             },
    21.             legend: {
    22.                 data: ['2023年', '2024年'],
    23.             },
    24.             toolbox: {
    25.                 show: true,
    26.                 feature: {
    27.                     mark: { show: true },
    28.                     dataView: { show: true, readOnly: false },
    29.                     magicType: { show: true, type: ['line', 'bar'] },
    30.                     restore: { show: true },
    31.                     saveAsImage: { show: true },
    32.                 },
    33.             },
    34.             calculable: true,
    35.             xAxis: [
    36.                 {
    37.                     type: 'category',  
    38.                     data:['2月','4月','6月','9月','11月','1月']
    39.                 },
    40.             ],
    41.             yAxis: [
    42.                 {
    43.                     type: 'value',
    44.                     data: ['红红'],
    45.                 },
    46.             ],
    47.             series: [
    48.                 {
    49.                     name: '2023年',
    50.                     type: 'line',
    51.                     data: [65,75,66,80,90,73],
    52.                     stack:"all",
    53.                     areaStyle:{},
    54.                     markPoint: { // 标记点
    55.             data: [
    56.               {
    57.                 type: 'max', name: '最大值'
    58.               },{
    59.                 type: 'min', name: '最小值'
    60.               }
    61.             ]
    62.           },
    63.           markLine: { // 标记线
    64.             data: [
    65.               {
    66.                 type: 'average', name: '平均值'
    67.               }
    68.             ]
    69.           },
    70.  
    71.  
    72.                 },
    73.                 {
    74.                     name: '2024年',
    75.                     type: 'line',
    76.                     data: [65,88,75,40,60,72],
    77.                     stack:"all",
    78.                     areaStyle:{},
    79.                     markPoint: { // 标记点
    80.             data: [
    81.               {
    82.                 type: 'max', name: '最大值'
    83.               },{
    84.                 type: 'min', name: '最小值'
    85.               }
    86.             ]
    87.           },
    88.           markLine: { // 标记线
    89.             data: [
    90.               {
    91.                 type: 'average', name: '平均值'
    92.               }
    93.             ]
    94.           },
    95.  
    96.  
    97.                 },
    98.             ],
    99.         };
    100.  
    101.         //使用刚指定的配置项和数据显示图表
    102.         myChart.setOption(option);
    103.     script>
    104. body>
    105.  
    106. html>

    可以看到，最大值都超过我们需要的100了，这是因为堆积折线图数据会堆积起来，设平均值并不是一个很好的选择。

    2.瀑布图

     在这里，就有一些难度了，在 ECharts 中，并没有瀑布图这种类型，需要我们运用一些技巧，达到这种效果。使用serise中的type:"bar"条形图）来模拟瀑布图。

    在 ECharts 中，设置非数值部分（例如瀑布图的起始和结束部分）透明，你需要在 itemStyle 中针对这些特定数据点设置透明颜色。

    这里的数值是我为了演示随机输入的，大家在实战中的数值一定要严谨。

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <script src="js/echarts.js">script>
    7. head>
    8.  
    9. <body>
    10.     <div id="main" style="width: 800px; height: 400px">div>
    11.     <script type="text/javascript">
    12.         var myChart = echarts.init(document.getElementById("main"));
    13.         var option = {
    14.             title: {//设置标题
    15.                 text: '红消费表表',
    16.                 subtext: '数据来源于账单',
    17.             },
    18.             tooltip: {//动态触发
    19.                 trigger: 'axis',
    20.                 axisPointer:{
    21.                     type:'shadow'
    22.                 },
    23.         
    24.             },
    25.  
    26.             toolbox: {
    27.                 x:462,
    28.                 show: true,
    29.                 feature: {
    30.                     mark: { show: true },
    31.                     dataView: { show: true, readOnly: false },
    32.                     magicType: { show: true, type: ['line', 'bar'] },
    33.                     restore: { show: true },
    34.                     saveAsImage: { show: true },
    35.                 },
    36.             },
    37.             calculable: true,
    38.             xAxis: [  
    39.                 {  
    40.                     type: 'category',  
    41.                     spliLine:{show:false},    
    42.                     data: ['总费用', '吃饭', '喝水洗澡','网购费', '网费', '日用品']//定义数据  
    43.                 },  
    44.             ],  
    45.             yAxis: [  
    46.                 {  
    47.                     type: 'value'  
    48.                 },  
    49.             ],   
    50.  
    51.     series: [  
    52.         {  
    53.             name: '辅助',  
    54.             type: 'bar',  
    55.             stack: 'total',  
    56.             itemStyle: {  
    57.                 normal:{
    58.                     barBorderColor:'rgba(0,0,0,0)',
    59.                     //barBorderColor:'20,20,0,0.5',备用颜色，更好可视化
    60.                     barBorderWidth:5,
    61.                     color:'rgba(0,0,0,0)'
    62.                     //color:'rgba(0,220,0,0.8)',备用颜色，更好可视化
    63.                 },
    64.                 emphasis:{
    65.                     barBorderColor:'rgba(0,0,0,0)',
    66.                     barBorderWidth:25,
    67.                     color:'rgba(0,0,0,0)',
    68.                     }
    69.                 },
    70.                 data:[0, 700, 400, 300, 200, 50]
    71.             },  
    72.             {
    73.                 name:'生活费',
    74.                 type:'bar',
    75.                 stack:'total',
    76.                 itemStyle:{normal:{label:{show:true,positon:'inside'}}},
    77.                 data:[1500, 800, 350, 100, 150, 100],
    78.             }
    79.         
    80.     ],  
    81. };
    82.  
    83.         myChart.setOption(option);
    84.     script>
    85. body>
    86.  
    87. html>

    快去试试吧

    3.饼图

    变为饼图。你需要做这些：

    • 将 xAxis 和 yAxis 配置项移除，因为饼图不需要坐标轴。
    • 移除 series 中的 type: 'line'，改为 type: 'pie'。
    • 饼图通常不需要 tooltip 的 trigger: 'axis' 配置，因为它基于整个饼图的数据点触发提示框。
    • 添加饼图特有的配置项，比如 radius（饼图的半径）、center（饼图的中心位置）等。

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <script src="js/echarts.js">script>
    7. head>
    8.  
    9. <body>
    10.     <div id="main" style="width: 800px; height: 400px">div>
    11.     <script type="text/javascript">
    12.         var myChart = echarts.init(document.getElementById("main"));
    13.         var option = {  
    14.     title: {  
    15.         text: '成绩表',  
    16.         subtext: '总分706',  
    17.         left: 'center'  
    18.     },  
    19.     tooltip: {  
    20.         trigger: 'item',  
    21.         formatter: '{a}
      {b}: {c} ({d}%)
      成绩: {e}'        
    22.     },  
    23.     legend: {  
    24.         orient: 'vertical',  
    25.         left: 'left',   
    26.         top: 'center',  
    27.         data: ['数学', '语文', '外语', '理科', '文科']  
    28.     },  
    29.     toolbox: {  
    30.         show: true,  
    31.         left: 'right',  
    32.         top: 'top',  
    33.         feature: {  
    34.             mark: { show: true },  
    35.             dataView: { show: true, readOnly: false },  
    36.             magicType: {  
    37.                 show: true,  
    38.                 type: ['pie', 'funnel'],  
    39.                 option: {  
    40.                     funnelAlign: 'left',  
    41.                     max: 1548  
    42.                 }  
    43.             },  
    44.             restore: { show: true },  
    45.             saveAsImage: { show: true } 
    46.         }  
    47.     },  
    48.     series: [  
    49.         {  
    50.             name: '成绩',  
    51.             type: 'pie',  
    52.             radius: '66%',  
    53.             center: ['50%', '50%'],   
    54.             clockWise: true,  
    55.             data: [  
    56.                 {value: 17, name: '语文', },  
    57.                 {value: 13, name: '数学', },  
    58.                 {value: 12, name: '外语', },  
    59.                 {value: 21, name: '物理，化学', },  
    60.                 {value: 37, name: '生物，地理，历史', },
    61.             ],  
    62.              
    63.             scoreData: [123, 95, 88, 150, 250]  
    64.         }  
    65.     ]  
    66. };  
    67.   
    68. option.tooltip.formatter = function (params) {  
    69.     var seriesData = option.series[0].data;  
    70.     var scoreData = option.series[0].scoreData;  
    71.     var index = params.dataIndex;  
    72.     return params.seriesName + '
      '       + params.name + ': ' + params.value + ' (' + params.percent + '%)
      成绩: '       + scoreData[index];  
    73. };  
    74.   
    75.         myChart.setOption(option);
    76.     script>
    77. body>
    78.  
    79. html>

    三、标题设置

    在ECharts中，title组件用于显示图表的标题。

    1.  title: {
    2.                 text: '红红成绩表',
    3.                 borderWidth:2,//边框宽度    
    4.                 borderColor:"#00FF00",//边框颜色
    5.                 subtext: '成绩来源于辅导员',//副标题
    6.                 textAlign:'',//
    7.                 left:"center",//水平居中
    8.                 top:"",
    9.             },

    把他加到堆积折线图试试效果

    可以看到图表标题以及设置到了最中间了，并且加上了绿色的边框。

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <script src="js/echarts.js">script>
    7. head>
    8.  
    9. <body>
    10.     <div id="main" style="width: 800px; height: 400px">div>
    11.     <script type="text/javascript">
    12.         var myChart = echarts.init(document.getElementById("main"));
    13.         var option = {
    14.             title: {
    15.                 text: '红红成绩表',
    16.                 borderWidth:2,//边框宽度    
    17.                 borderColor:"#00FF00",//边框颜色
    18.                 subtext: '成绩来源于辅导员',//副标题
    19.                 textAlign:'',//
    20.                 left:"center",//水平居中
    21.                 top:"",
    22.             },
    23.             tooltip: {
    24.                 trigger: 'axis',
    25.             },
    26.             legend: {
    27.                 data: ['2023年', '2024年'],
    28.                 top:"bottom",
    29.             },
    30.             toolbox: {
    31.                 show: true,
    32.                 feature: {
    33.                     mark: { show: true },
    34.                     dataView: { show: true, readOnly: false },
    35.                     magicType: { show: true, type: ['line', 'bar'] },
    36.                     restore: { show: true },
    37.                     saveAsImage: { show: true },
    38.                 },
    39.             },
    40.             calculable: true,
    41.             xAxis: [
    42.                 {
    43.                     type: 'category',  
    44.                     data:['2月','4月','6月','9月','11月','1月']
    45.                 },
    46.             ],
    47.             yAxis: [
    48.                 {
    49.                     type: 'value',
    50.                     data: ['红红'],
    51.                 },
    52.             ],
    53.             series: [
    54.                 {
    55.                     name: '2023年',
    56.                     type: 'line',
    57.                     data: [65,75,66,80,90,73],
    58.                     stack:"all",
    59.                     areaStyle:{},
    60.                     markPoint: { // 标记点
    61.             data: [
    62.               {
    63.                 type: 'max', name: '最大值'
    64.               },{
    65.                 type: 'min', name: '最小值'
    66.               }
    67.             ]
    68.           },
    69.           markLine: { // 标记线
    70.             data: [
    71.               {
    72.                 type: 'average', name: '平均值'
    73.               }
    74.             ]
    75.           },
    76.                 },
    77.                 {
    78.                     name: '2024年',
    79.                     type: 'line',
    80.                     data: [65,88,75,40,60,72],
    81.                     stack:"all",
    82.                     areaStyle:{},
    83.                     markPoint: { // 标记点
    84.             data: [
    85.               {
    86.                 type: 'max', name: '最大值'
    87.               },{
    88.                 type: 'min', name: '最小值'
    89.               }
    90.             ]
    91.           },
    92.           markLine: { // 标记线
    93.             data: [
    94.               {
    95.                 type: 'average', name: '平均值'
    96.               }
    97.             ]
    98.           },
    99.                 },
    100.             ],
    101.         };
    102.         //使用刚指定的配置项和数据显示图表
    103.         myChart.setOption(option);
    104.     script>
    105. body>
    106.  
    107. html>

    拓展-标题设置常用属性

    属性名类型默认值说明
    textstring''主标题文本，支持使用 \n 换行。
    subtextstring''副标题文本，支持使用 \n 换行。
    leftstring / number'auto'标题组件离容器左侧的距离。
    topstring / number'auto'标题组件离容器上侧的距离。
    textAlignstring'left'主标题的水平对齐方式，可选值为：'left'、'center'、'right'。
    textVerticalAlignstring'top'垂直对齐方式，可选值为：'top'、'middle'、'bottom'。
    textStyleobject{}主标题样式，包括颜色、字体、对齐方式等。
    subtextStyleobject{}副标题样式，包括颜色、字体、对齐方式等。
    paddingnumber / array0内边距，单位是像素，可以是单一数字，也可以是数组分别表示上、右、下、左的内边距。
    itemStyleobject{}标题标记的图形样式，例如颜色、边框等。
    backgroundColorstring'transparent'标题背景色，默认为透明。
    borderColorstring'#ccc'标题边框颜色。
    borderWidthnumber0标题边框线宽。
    padding[number, number, number, number][0, 0, 0, 0]标题内边距，单位px，默认各方向内边距为0，顺序为：上、右、下、左。
    shadowBlurnumber0图形阴影的模糊大小。
    shadowColorstring'rgba(0, 0, 0, 0.5)'图形阴影的颜色。
    shadowOffsetXnumber0图形阴影在水平方向上的偏移距离。
    shadowOffsetYnumber0图形阴影在垂直方向上的偏移距离。
    textBorderColorstring'#000'文本边框颜色。
    textBorderWidthnumber0文本边框线宽。
    zlevelnumber0所有图形的 zlevel 值。
    znumber2组件的所有图形的 z 值。

  • 相关阅读:
    数据结构——队列
    计算机网络(一)：计算机网络概念、功能、组成
    关于生命的本质 复制
    基于ssm框架的农产品扶农商农平台的设计与实现
    PHP 在线学习平台系统mysql数据库web结构layUI布局apache计算机软件工程网页wamp
    基于SSM+SpringBoot+VUE前后端分离的停车场管理系统
    mariadb弱口令登录
    MySQL高级：（一）MySQL逻辑架构
    vue3接口封装 亲测有效
    C语言指针操作（七）*指针数组和多重指针
  • 原文地址：https://blog.csdn.net/qq_49513817/article/details/136740464