devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

web开发：如何用Echarts来自动给网页设计各种统计图_基于web的动态统计图表生成展示

作者：Gausst松鼠会 | 2024-05-20 20:06:08

赞

踩

基于web的动态统计图表生成展示

很多时候web开发也会需要用到统计图，如果单纯靠我们自己那点拙劣的css和js水平设计的话，又耗时间又做得跟史一样，这时候就需要引入别人设计师为我们设计好的动态统计图——echarts

Echarts的官网是：Apache ECharts

1、第一步：引入echarts

跟引入bootstrap、Vue这些一样，你可以选择引入本地的js文件，或者用在线的CDN

本地的文件在本文顶部开头中，自己下载。如果找不到我的资源可以下载这个链接https://registry.npmjs.org/echarts/-/echarts-5.5.0.tgz，解压后找到【dist】文件夹，找到【echarts.js】文件，把它解压到你要用它的同级目录下，然后引入本地js文件到html中

  1. <!-- 引入刚刚下载的 ECharts 文件 -->
  2. <script src="echarts.js"></script>

或者不要那么麻烦，直接用在线CDN，我更偏向这种，把这段代码写到你的html文件里

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>

2、第二步，为echarts统计图表设置一个固定宽度和高度的容器

例如：

  1. <!-- css部分 -->
  2. <style>
  3. .echarts-box {
  4.     width: 600px;
  5.     height: 400px;
  6.     padding: 30px;
  7.     margin: 0 auto;
  8.     border: 1px solid #ccc;
  9.   }
  10. </style>
  11.  
  12. <!-- HTML部分 -->
  13. <body>
  14.   <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  15.   <div class="echarts-box" id="main"></div>
  16. </body>

3、然后直接开始CV大法，乱用爽用

点开【示例】，会看到各种花里胡哨的图，直接选择自己喜欢的点击，样例代码都给你了，直接开始cv

但是它代码提供的只是这个样例的代码，并没有提供我们怎么去创建它并开启它的代码，要我们手动开启，也很简单：

1、echarts.init( )函数是开始创建这个样例的容器，你上面HTML已经写了一个容器了，那么现在echarts需要知道那个容器是用来存放、展示echarts图表的，你只需要用JavaScript绑定这个DOM元素然后传参给echarts.init( )函数就行了

let myChart = echarts.init(document.getElementById('main'));

2、通过【echars容器变量.setOption( )】函数显示图表

.setOption()函数需要往里传入配置数据参数，这个【配置数据参数】就是你刚刚网页上copy的那一堆代码，你可以直接copy到.setOption()里；也可以用一个变量等于你刚刚那一堆配置数据，然后再把变量放进.setOption()里

  1. // 指定图表的配置项和数据
  2. //这个案例是柱状图
  3. let option = {
  4.     title: {
  5.     text: 'ECharts柱状图示例'
  6.     },
  7.     tooltip: {},
  8.     legend: {
  9.     data: ['销量']
  10.     },
  11.     xAxis: {
  12.     data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  13.     },
  14.     yAxis: {},
  15.     series: [
  16.     {
  17.         name: '销量',
  18.         type: 'bar',
  19.         data: [5, 20, 36, 10, 10, 20]
  20.     }
  21.     ]
  22. };
  23. // 使用刚指定的配置项和数据显示图表。
  24. myChart.setOption(option);

下面代码是两个完整的例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.     .echarts-box {
  9.         width: 600px;
  10.         height: 400px;
  11.         padding: 30px;
  12.         margin: 0 auto;
  13.         border: 1px solid #ccc;
  14.       }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="echarts-box" id="main"></div>
  19.     <div class="echarts-box No2" id="main"></div>
  20.  
  21.     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  22.     <script type="text/javascript">
  23.         // 基于准备好的dom，初始化echarts实例
  24.         let myChart = echarts.init(document.getElementById('main'));
  25.   
  26.         // 指定图表的配置项和数据
  27.         //这个案例是柱状图
  28.         let option = {
  29.             title: {
  30.             text: 'ECharts柱状图示例'
  31.             },
  32.             tooltip: {},
  33.             legend: {
  34.             data: ['销量']
  35.             },
  36.             xAxis: {
  37.             data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  38.             },
  39.             yAxis: {},
  40.             series: [
  41.             {
  42.                 name: '销量',
  43.                 type: 'bar',
  44.                 data: [5, 20, 36, 10, 10, 20]
  45.             }
  46.             ]
  47.         };
  48.         // 使用刚指定的配置项和数据显示图表。
  49.         myChart.setOption(option);
  50.  
  51.  
  52.         //这个案例是圆饼图
  53.         let myChart2 = echarts.init(document.querySelector('.No2'))
  54.         let option2 = {
  55.             title: {
  56.                 text: '岑梓铭的圆饼图',
  57.                 subtext: '靓不靓啊？',
  58.                 left: 'center'
  59.             },
  60.             tooltip: {
  61.                 trigger: 'item'
  62.             },
  63.             legend: {
  64.                 orient: 'vertical',
  65.                 left: 'left'
  66.             },
  67.             series: [
  68.                 {
  69.                 name: 'Access From',
  70.                 type: 'pie',
  71.                 radius: '50%',
  72.                 data: [
  73.                     { value: 1048, name: '吃饭' },
  74.                     { value: 735, name: '睡觉' },
  75.                     { value: 580, name: '玩手机' },
  76.                     { value: 484, name: '学习' },
  77.                     { value: 300, name: '看美女' }
  78.                 ],
  79.                 emphasis: {
  80.                     itemStyle: {
  81.                     shadowBlur: 10,
  82.                     shadowOffsetX: 0,
  83.                     shadowColor: 'rgba(0, 0, 0, 0.5)'
  84.                     }
  85.                 }
  86.                 }
  87.             ]
  88.         };
  89.         myChart2.setOption(option2)
  90.       </script>
  91. </body>
  92. </html>

具体你需要配置什么标题、解释文字、颜色，这些你可以直接在在线示例里修改它的代码，然后慢慢找代码的哪个地方对应图表的哪个地方

具体例子还可以到这个网站去看看：echarts官网 | 中文官网

另外，在Vue中使用echart图表的话，建议刚刚那些代码写在mounted( )函数里，这样的话根据option里的配置数据（或者是绑定了data里的初始数据），当页面刚进入就能看到一个初始的图表样子。

  1. mounted () {
  2.   let myChart = echarts.init(document.querySelector('#main'))
  3.   myChart.setOption({
  4.     // 大标题
  5.     title: {
  6.       text: '消费账单列表',
  7.       left: 'center'
  8.     },
  9.     // 提示框
  10.     tooltip: {
  11.       trigger: 'item'
  12.     },
  13.     // 图例
  14.     legend: {
  15.       orient: 'vertical',
  16.       left: 'left'
  17.     },
  18.     // 数据项
  19.     series: [
  20.       {
  21.         name: '消费账单',
  22.         type: 'pie',
  23.         radius: '50%', // 半径
  24.         data: [
  25.           { value: 1048, name: '球鞋' },
  26.           { value: 735, name: '防晒霜' }
  27.         ],
  28.         emphasis: {
  29.           itemStyle: {
  30.             shadowBlur: 10,
  31.             shadowOffsetX: 0,
  32.             shadowColor: 'rgba(0, 0, 0, 0.5)'
  33.           }
  34.         }
  35.       }
  36.     ]
  37.   })
  38. },

那么如果你要动态更新的话，只需要在Vue的methods函数配置项里设置一个函数，在这个函数里再次.setOption( )就可以了动态更新了。

但是这里有一个需要注意的：你在methods的函数里设置.setOption( )，说明你已经离开mounted函数了，那就拿不到【代表echarts图表的容器】了，那怎么setOption呢？记住一点：只要要在Vue里想全局使用某个变量，就把他挂到data里。那么这里也可以把【代表echarts图表的容器】挂到data

上面的例子改一下（数据配置啥的代码省略了，一样的）：

  1. data: {
  2.   //挂载的全局变量
  3.   list: [],
  4.   name: '',
  5.   price: ''
  6. },
  7. computed: {
  8.   某函数 () {
  9.     return 统计结果
  10.   }
  11. },
  12. created () {
  13.   //做一些网络数据请求、数据操作
  14. },
  15. mounted () {
  16.   //直接一个【this.变量】，甚至都不用在data里设置变量，就可以到处用它了
  17.   this.myChart = echarts.init(document.querySelector('#main'))
  18.   this.myChart.setOption({
  19.     //echarts的数据配置
  20.   })
  21. },

现在再拿【this.变量】去setOption()就可以更新图表了

  1. methods: {
  2.     // 更新图表
  3.     // 现在就可以用this.myChart去调用setOption()了
  4.     this.myChart.setOption({
  5.       // 其他项可以不用复制过来，只用设置要修改的数据项就好了
  6.       // 数据项
  7.       series: [
  8.         {
  9.           // 这里也不是一个一个数据写好去配置，而是采用动态配置
  10.           // data: [
  11.           //   { value: 1048, name: '球鞋' },
  12.           //   { value: 735, name: '防晒霜' }
  13.           // ]
  14.           data: this.list.map(item => ({ value: item.price, name: item.name}))
  15.           //这里先解释一下.map()函数是什么意思
  16.           //.map()函数是遍历数组每个成员，然后return一个经过修改的值，作为遍历到的这个成员的新值
  17.           //item是自定义的，代表遍历到的数组的每一个成员
  18.           //然后()=>箭头函数如果是一个值、一句话、一个表达式，就代表这就是要return的内容
  19.           //例子中：{ value: item.price, name: item.name }就是return这么一个对象值
  20.           //为什么用()包住这个对象？因为对象外层是{}，箭头函数会当成这是一个函数体，要用()包起来
  21.  
  22.           //然后为什么要修改list数组的值？
  23.           //因为前面我们把网络数据返回的内容给到了data设的数组list
  24.           //然后我们要去用console.log()检查这些数据有什么内容，哪些有用要，哪些没用不要
  25.           //然后发现echarts需要的data的配置参数只有value和name这两个参数
  26.           //那我们就只提取出list的每一个对象成员的符合value和name这两个参数要的值
  27.           //然后把list的每一个对象成员设置成{ value: xxx, name: xxx }这种形式,就符合echarts示例所需要得到配置参数要求了
  28.         }
  29.       ]
  30.     })
  31. },

这里先解释一下.map()函数是什么意思
.map()函数是遍历数组每个成员，然后return一个经过修改的值，作为遍历到的这个成员的新值。item是自定义的，代表遍历到的数组的每一个成员
然后()=>箭头函数如果是一个值、一句话、一个表达式，就代表这就是要return的内容
例子中：{ value: item.price, name: item.name }就是return这么一个对象值
为什么用()包住这个对象？因为对象外层是{}，箭头函数会当成这是一个函数体，要用()包起来

然后为什么要修改list数组的值？
因为前面我们把网络数据返回的内容给到了data设的数组list，然后我们要去用console.log()检查这些数据有什么内容，哪些有用要，哪些没用不要
然后发现echarts需要的data的配置参数只有value和name这两个参数，那我们就只提取出list的每一个对象成员的符合value和name这两个参数要的值
然后把list的每一个对象成员设置成{ value: xxx, name: xxx }这种形式,就符合echarts示例所需要得到配置参数要求了

兄弟们我解释得很透彻很幸苦，各位好好看，点个赞

另外把整个例子完整代码放这里：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <!-- CSS only -->
  8.     <link
  9.       rel="stylesheet"
  10.       href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  11.     />
  12.     <style>
  13.       .red {
  14.         color: red!important;
  15.       }
  16.       .search {
  17.         width: 300px;
  18.         margin: 20px 0;
  19.       }
  20.       .my-form {
  21.         display: flex;
  22.         margin: 20px 0;
  23.       }
  24.       .my-form input {
  25.         flex: 1;
  26.         margin-right: 20px;
  27.       }
  28.       .table > :not(:first-child) {
  29.         border-top: none;
  30.       }
  31.       .contain {
  32.         display: flex;
  33.         padding: 10px;
  34.       }
  35.       .list-box {
  36.         flex: 1;
  37.         padding: 0 30px;
  38.       }
  39.       .list-box  a {
  40.         text-decoration: none;
  41.       }
  42.       .echarts-box {
  43.         width: 600px;
  44.         height: 400px;
  45.         padding: 30px;
  46.         margin: 0 auto;
  47.         border: 1px solid #ccc;
  48.       }
  49.       tfoot {
  50.         font-weight: bold;
  51.       }
  52.       @media screen and (max-width: 1000px) {
  53.         .contain {
  54.           flex-wrap: wrap;
  55.         }
  56.         .list-box {
  57.           width: 100%;
  58.         }
  59.         .echarts-box {
  60.           margin-top: 30px;
  61.         }
  62.       }
  63.     </style>
  64.   </head>
  65.   <body>
  66.     <div id="app">
  67.       <div class="contain">
  68.         <!-- 左侧列表 -->
  69.         <div class="list-box">
  70.  
  71.           <!-- 添加资产 -->
  72.           <form class="my-form">
  73.             <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
  74.             <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
  75.             <button @click="add" type="button" class="btn btn-primary">添加账单</button>
  76.           </form>
  77.  
  78.           <table class="table table-hover">
  79.             <thead>
  80.               <tr>
  81.                 <th>编号</th>
  82.                 <th>消费名称</th>
  83.                 <th>消费价格</th>
  84.                 <th>操作</th>
  85.               </tr>
  86.             </thead>
  87.             <tbody>
  88.               <tr v-for="(item, index) in list" :key="item.id">
  89.                 <td>{{ index + 1 }}</td>
  90.                 <td>{{ item.name }}</td>
  91.                 <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
  92.                 <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
  93.               </tr>
  94.             </tbody>
  95.             <tfoot>
  96.               <tr>
  97.                 <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
  98.               </tr>
  99.             </tfoot>
  100.           </table>
  101.         </div>
  102.         
  103.         <!-- 右侧图表 -->
  104.         <div class="echarts-box" id="main"></div>
  105.       </div>
  106.     </div>
  107.     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
  108.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  109.     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  110.     <script>
  111.       /**
  112.        * 接口文档地址：
  113.        * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
  114.        * 
  115.        * 功能需求：
  116.        * 1. 基本渲染
  117.        *    (1) 立刻发送请求获取数据 created
  118.        *    (2) 拿到数据，存到data的响应式数据中
  119.        *    (3) 结合数据，进行渲染 v-for
  120.        *    (4) 消费统计 => 计算属性
  121.        * 2. 添加功能
  122.        *    (1) 收集表单数据 v-model
  123.        *    (2) 给添加按钮注册点击事件，发送添加请求
  124.        *    (3) 需要重新渲染
  125.        * 3. 删除功能
  126.        *    (1) 注册点击事件，传参传 id
  127.        *    (2) 根据 id 发送删除请求
  128.        *    (3) 需要重新渲染
  129.        * 4. 饼图渲染
  130.        *    (1) 初始化一个饼图 echarts.init(dom)  mounted钩子实现
  131.        *    (2) 根据数据实时更新饼图 echarts.setOption({ ... })
  132.        */
  133.       const app = new Vue({
  134.         el: '#app',
  135.         data: {
  136.           list: [],
  137.           name: '',
  138.           price: ''
  139.         },
  140.         computed: {
  141.           totalPrice () {
  142.             return this.list.reduce((sum, item) => sum + item.price, 0)
  143.           }
  144.         },
  145.         created () {
  146.           // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
  147.           //   params: {
  148.           //     creator: '小黑'
  149.           //   }
  150.           // })
  151.           // this.list = res.data.data
  152.  
  153.           this.getList()
  154.         },
  155.         mounted () {
  156.           this.myChart = echarts.init(document.querySelector('#main'))
  157.           this.myChart.setOption({
  158.             // 大标题
  159.             title: {
  160.               text: '消费账单列表',
  161.               left: 'center'
  162.             },
  163.             // 提示框
  164.             tooltip: {
  165.               trigger: 'item'
  166.             },
  167.             // 图例
  168.             legend: {
  169.               orient: 'vertical',
  170.               left: 'left'
  171.             },
  172.             // 数据项
  173.             series: [
  174.               {
  175.                 name: '消费账单',
  176.                 type: 'pie',
  177.                 radius: '50%', // 半径
  178.                 data:[
  179.                   { value: 1048, name: '球鞋' },
  180.                   { value: 735, name: '防晒霜' }
  181.                 ],
  182.                 emphasis: {
  183.                   itemStyle: {
  184.                     shadowBlur: 10,
  185.                     shadowOffsetX: 0,
  186.                     shadowColor: 'rgba(0, 0, 0, 0.5)'
  187.                   }
  188.                 }
  189.               }
  190.             ]
  191.           })
  192.         },
  193.  
  194.         methods: {
  195.           async getList () {
  196.             const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
  197.               params: {
  198.                 creator: '小黑'
  199.               }
  200.             })
  201.             this.list = res.data.data
  202.             console.log(res.data.data)
  203.             console.log(this.list)
  204.  
  205.             // 更新图表
  206.             this.myChart.setOption({
  207.               // 数据项
  208.               series: [
  209.                 {
  210.                   // data: [
  211.                   //   { value: 1048, name: '球鞋' },
  212.                   //   { value: 735, name: '防晒霜' }
  213.                   // ]
  214.                   data: this.list.map(item => ({ value: item.price, name: item.name}))
  215.                   //这里这么写是因为
  216.                   //看echarts的这个示例的源码的配置数据可以知道，在这个配置数据的data这里只能有value和name这两个参数
  217.                   //然后我们console.log可以看到我们拿到的对象数据里很乱，什么值都有，但是没有value这个参数名（name刚好有）
  218.                   //但是我们打印输出可以注意到，对象里的price值就对应着value要的值，name值对应name要的值
  219.                   //那么只是名字不一样，而且还有别的多余的参数，那就把获取到对象数据的list数组修改一下里面的内容
  220.                   //用map函数，item是自定义的，代表遍历到数组的每一个成员，那么item.price不就是这个对象成员的price项吗
  221.                   //这样一来list数组每个对象成员就变成{ value: xxx, name: xxx }这种形式了，就符合echarts示例所需要得到配置参数要求了
  222.                 }
  223.               ]
  224.             })
  225.           },
  226.           async add () {
  227.             console.log(this.list)
  228.             if (!this.name) {
  229.               alert('请输入消费名称')
  230.               return
  231.             }
  232.             if (typeof this.price !== 'number') {
  233.               alert('请输入正确的消费价格')
  234.               return
  235.             }
  236.  
  237.             // 发送添加请求
  238.             const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
  239.               creator: '小黑',
  240.               name: this.name,
  241.               price: this.price
  242.             })
  243.             // 重新渲染一次
  244.             this.getList()
  245.  
  246.             this.name = ''
  247.             this.price = ''
  248.           },
  249.           async del (id) {
  250.             // 根据 id 发送删除请求
  251.             const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
  252.             // 重新渲染
  253.             this.getList()
  254.           }
  255.         }
  256.       })
  257.     </script>
  258.   </body>
  259. </html>

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

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

  

闽ICP备14008679号