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中

<!-- 引入刚刚下载的 ECharts 文件 -->
<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统计图表设置一个固定宽度和高度的容器

例如：

<!-- css部分 -->
<style>
.echarts-box {
    width: 600px;
    height: 400px;
    padding: 30px;
    margin: 0 auto;
    border: 1px solid #ccc;
  }
</style>

<!-- HTML部分 -->
<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div class="echarts-box" id="main"></div>
</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()里

// 指定图表的配置项和数据
//这个案例是柱状图
let option = {
    title: {
    text: 'ECharts柱状图示例'
    },
    tooltip: {},
    legend: {
    data: ['销量']
    },
    xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
    {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }
    ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .echarts-box {
        width: 600px;
        height: 400px;
        padding: 30px;
        margin: 0 auto;
        border: 1px solid #ccc;
      }
    </style>
</head>
<body>
    <div class="echarts-box" id="main"></div>
    <div class="echarts-box No2" id="main"></div>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('main'));
  
        // 指定图表的配置项和数据
        //这个案例是柱状图
        let option = {
            title: {
            text: 'ECharts柱状图示例'
            },
            tooltip: {},
            legend: {
            data: ['销量']
            },
            xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        //这个案例是圆饼图
        let myChart2 = echarts.init(document.querySelector('.No2'))
        let option2 = {
            title: {
                text: '岑梓铭的圆饼图',
                subtext: '靓不靓啊？',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '吃饭' },
                    { value: 735, name: '睡觉' },
                    { value: 580, name: '玩手机' },
                    { value: 484, name: '学习' },
                    { value: 300, name: '看美女' }
                ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
                }
            ]
        };
        myChart2.setOption(option2)
      </script>
</body>
</html>

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

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

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

mounted () {
  let myChart = echarts.init(document.querySelector('#main'))
  myChart.setOption({
    // 大标题
    title: {
      text: '消费账单列表',
      left: 'center'
    },
    // 提示框
    tooltip: {
      trigger: 'item'
    },
    // 图例
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    // 数据项
    series: [
      {
        name: '消费账单',
        type: 'pie',
        radius: '50%', // 半径
        data: [
          { value: 1048, name: '球鞋' },
          { value: 735, name: '防晒霜' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })
},

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

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

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

data: {
  //挂载的全局变量
  list: [],
  name: '',
  price: ''
},
computed: {
  某函数 () {
    return 统计结果
  }
},
created () {
  //做一些网络数据请求、数据操作
},
mounted () {
  //直接一个【this.变量】，甚至都不用在data里设置变量，就可以到处用它了
  this.myChart = echarts.init(document.querySelector('#main'))
  this.myChart.setOption({
    //echarts的数据配置
  })
},

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

methods: {
    // 更新图表
    // 现在就可以用this.myChart去调用setOption()了
    this.myChart.setOption({
      // 其他项可以不用复制过来，只用设置要修改的数据项就好了
      // 数据项
      series: [
        {
          // 这里也不是一个一个数据写好去配置，而是采用动态配置
          // data: [
          //   { value: 1048, name: '球鞋' },
          //   { value: 735, name: '防晒霜' }
          // ]
          data: this.list.map(item => ({ value: item.price, name: item.name}))
          //这里先解释一下.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示例所需要得到配置参数要求了
        }
      ]
    })
},

这里先解释一下.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示例所需要得到配置参数要求了

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- CSS only -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
    />
    <style>
      .red {
        color: red!important;
      }
      .search {
        width: 300px;
        margin: 20px 0;
      }
      .my-form {
        display: flex;
        margin: 20px 0;
      }
      .my-form input {
        flex: 1;
        margin-right: 20px;
      }
      .table > :not(:first-child) {
        border-top: none;
      }
      .contain {
        display: flex;
        padding: 10px;
      }
      .list-box {
        flex: 1;
        padding: 0 30px;
      }
      .list-box  a {
        text-decoration: none;
      }
      .echarts-box {
        width: 600px;
        height: 400px;
        padding: 30px;
        margin: 0 auto;
        border: 1px solid #ccc;
      }
      tfoot {
        font-weight: bold;
      }
      @media screen and (max-width: 1000px) {
        .contain {
          flex-wrap: wrap;
        }
        .list-box {
          width: 100%;
        }
        .echarts-box {
          margin-top: 30px;
        }
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="contain">
        <!-- 左侧列表 -->
        <div class="list-box">

          <!-- 添加资产 -->
          <form class="my-form">
            <input v-model.trim="name" type="text" class="form-control" placeholder="消费名称" />
            <input v-model.number="price" type="text" class="form-control" placeholder="消费价格" />
            <button @click="add" type="button" class="btn btn-primary">添加账单</button>
          </form>

          <table class="table table-hover">
            <thead>
              <tr>
                <th>编号</th>
                <th>消费名称</th>
                <th>消费价格</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in list" :key="item.id">
                <td>{{ index + 1 }}</td>
                <td>{{ item.name }}</td>
                <td :class="{ red: item.price > 500 }">{{ item.price.toFixed(2) }}</td>
                <td><a @click="del(item.id)" href="javascript:;">删除</a></td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <td colspan="4">消费总计： {{ totalPrice.toFixed(2) }}</td>
              </tr>
            </tfoot>
          </table>
        </div>
        
        <!-- 右侧图表 -->
        <div class="echarts-box" id="main"></div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      /**
       * 接口文档地址：
       * https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058
       * 
       * 功能需求：
       * 1. 基本渲染
       *    (1) 立刻发送请求获取数据 created
       *    (2) 拿到数据，存到data的响应式数据中
       *    (3) 结合数据，进行渲染 v-for
       *    (4) 消费统计 => 计算属性
       * 2. 添加功能
       *    (1) 收集表单数据 v-model
       *    (2) 给添加按钮注册点击事件，发送添加请求
       *    (3) 需要重新渲染
       * 3. 删除功能
       *    (1) 注册点击事件，传参传 id
       *    (2) 根据 id 发送删除请求
       *    (3) 需要重新渲染
       * 4. 饼图渲染
       *    (1) 初始化一个饼图 echarts.init(dom)  mounted钩子实现
       *    (2) 根据数据实时更新饼图 echarts.setOption({ ... })
       */
      const app = new Vue({
        el: '#app',
        data: {
          list: [],
          name: '',
          price: ''
        },
        computed: {
          totalPrice () {
            return this.list.reduce((sum, item) => sum + item.price, 0)
          }
        },
        created () {
          // const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
          //   params: {
          //     creator: '小黑'
          //   }
          // })
          // this.list = res.data.data

          this.getList()
        },
        mounted () {
          this.myChart = echarts.init(document.querySelector('#main'))
          this.myChart.setOption({
            // 大标题
            title: {
              text: '消费账单列表',
              left: 'center'
            },
            // 提示框
            tooltip: {
              trigger: 'item'
            },
            // 图例
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            // 数据项
            series: [
              {
                name: '消费账单',
                type: 'pie',
                radius: '50%', // 半径
                data:[
                  { value: 1048, name: '球鞋' },
                  { value: 735, name: '防晒霜' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        },

        methods: {
          async getList () {
            const res = await axios.get('https://applet-base-api-t.itheima.net/bill', {
              params: {
                creator: '小黑'
              }
            })
            this.list = res.data.data
            console.log(res.data.data)
            console.log(this.list)

            // 更新图表
            this.myChart.setOption({
              // 数据项
              series: [
                {
                  // data: [
                  //   { value: 1048, name: '球鞋' },
                  //   { value: 735, name: '防晒霜' }
                  // ]
                  data: this.list.map(item => ({ value: item.price, name: item.name}))
                  //这里这么写是因为
                  //看echarts的这个示例的源码的配置数据可以知道，在这个配置数据的data这里只能有value和name这两个参数
                  //然后我们console.log可以看到我们拿到的对象数据里很乱，什么值都有，但是没有value这个参数名（name刚好有）
                  //但是我们打印输出可以注意到，对象里的price值就对应着value要的值，name值对应name要的值
                  //那么只是名字不一样，而且还有别的多余的参数，那就把获取到对象数据的list数组修改一下里面的内容
                  //用map函数，item是自定义的，代表遍历到数组的每一个成员，那么item.price不就是这个对象成员的price项吗
                  //这样一来list数组每个对象成员就变成{ value: xxx, name: xxx }这种形式了，就符合echarts示例所需要得到配置参数要求了
                }
              ]
            })
          },
          async add () {
            console.log(this.list)
            if (!this.name) {
              alert('请输入消费名称')
              return
            }
            if (typeof this.price !== 'number') {
              alert('请输入正确的消费价格')
              return
            }

            // 发送添加请求
            const res = await axios.post('https://applet-base-api-t.itheima.net/bill', {
              creator: '小黑',
              name: this.name,
              price: this.price
            })
            // 重新渲染一次
            this.getList()

            this.name = ''
            this.price = ''
          },
          async del (id) {
            // 根据 id 发送删除请求
            const res = await axios.delete(`https://applet-base-api-t.itheima.net/bill/${id}`)
            // 重新渲染
            this.getList()
          }
        }
      })
    </script>
  </body>
</html>