• web开发：如何用Echarts来自动给网页设计各种统计图

    很多时候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中

    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统计图表设置一个固定宽度和高度的容器

    例如：

    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.  
    13. <body>
    14.   
    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. 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>Documenttitle>
    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. 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>Documenttitle>
    7.     
    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>

  • 相关阅读:
    基于jsp+mysql+Spring+mybatis的SSM学生兼职网站
    Kinsoku jikou desu新浪股票接口变动（php）
    如何使用visual studio 2010构建SQLite3.lib文件
    全新跑分软件GeekRUN-7问世
    树莓派进行导航时，定位问题
    GPT-4.0网页平台-ChatYY
    汇编语言实验8：BIOS/DOS功能调用与宏指令程序设计
    SpringCloud-01
    pyCharm远程DEBUG
    面试题精选 droos spring底层原理
  • 原文地址：https://blog.csdn.net/m0_73991249/article/details/136416807