Echarts系列(三)：异步加载数据&&事件行为

Echarts使用小总结：

• 什么是图表混搭？

  • echarts图表混搭使我们在工作当中很常见的一种做法，也就是说当我们需要从不同的侧面，不同的角度去观察数据的话，就需要结合多种类型图表来去展示数据。

  • 比如，我们常用的一些图表混搭有：

    • 混搭折线与柱状图+双轴：

      

    • 经典的多图表联动：

      

    • 等等很多一些常用的混搭方式，比如：折线与柱状图，饼图与折线图.....，这里就不一一叙述了，详情案例请看官网实例：

      点击链接地址

• 如何实现Echarts自定义主题？

  • echarts自定义主题非常的强大，不但可以使用官方提供的主题，还可以让我们真正通过可视化的形式自己去定义主题

    1. 下载主题，打开官方网站主题下载页面:

       https://echarts.apache.org/zh/download-theme.html

    2. 点击定制主题：

       

    3. 点击下载主题即可：

       

    4. 最后在html页面引入相对应的js文件名，在初始化echarts实例时进行挂载就可以了

       <script src="echarts.js"></script>
       <!-- 引入 vintage 主题 -->
       <script src="theme/vintage.js"></script>
       <script>
       // 第二个参数可以指定前面引入的主题
       var chart = echarts.init(document.getElementById('main'), 'vintage');
       chart.setOption({
           ...
       });
       </script>
       

• vue中如何使用主题以及自定主题呢？

  • 其实也很简单，当我们通过npm下载echarts后，会发现node_modules里多了echarts文件夹，找到并打开，找到 theme文件夹，你会发现有很多默认默认的官方主题js
    

  • 最后在组件中局部引入，或在main.js中全局引入即可

    // 默认主题在echarts依赖包下的theme里面，如果想要使用自定义主题的话
    // 只需要把下载的js文件放入 echarts/theme 这个文件夹里，然后根据文件名，进行引入即可
    import 'echarts/theme/purple-passion.js'
    
    // 第二个参数可以指定前面引入的主题,根据自己定义的echarts对象名称来进行初始化就行了
    var chart = this.$echarts.init(document.getElementById('main'), 'purple-passion');
    

• 异步加载数据的方式有哪两种呢？

  • 官网上有详细的讲解,这里就不多说，看官网就可以，连接地址：点击链接

  • 这里我用vue简单地实现了一个异步加载数据的例子，通过axios获取本地json来模拟了获取线上接口，封装的可能不是很好，毕竟使用的少，有什么更好的方法可以指导下

    本地json配置
    

    组件中的代码,直接复制即可使用

    <template>
      <div class="async">
        <!-- 异步加载数据,动态更新 -->
        <div
          class="charts"
          ref="yibu"
        ></div>
      </div>
    </template>
    
    <script>
    import axios from 'axios'
    export default {
      name: '',
      data () {
        return {
        }
      },
      props: {
    
      },
      computed: {
      },
      components: {
      },
      mounted () {
        this.myChart = this.$echarts.init(this.$refs.yibu)
        // 为了让用户有更好的体验，所以我们先初始化option配置
        this.myChart.setOption(this.option())
        // 显示loading动画 表示正在加载中
        this.myChart.showLoading()
        // 三秒后进行显示
        this.asyncData()
      },
      methods: {
        // option初始化配置 ,把data设置为空数组
        option () {
          return {
            title: {
              text: '我是异步加载的数据，刷新试下',
              subtext: '我是本地json定义的数据',
              left: 'center',
              textStyle: {
                fontSize: 30,
              }
            },
            tooltip: {},
            // legend: {
            //   data: ['销量']
            // },
            xAxis: {
              data: []
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: []
              }
            ]
          }
        },
        // 异步请求数据
        asyncData () {
          // 异步加载数据 模拟3秒时间
          setTimeout(() => {
            // 异步请求数据 加载数据
            axios.get('/static/data/yibu.json').then((res) => {
              // 数据3秒后请求成功，隐藏loading动画
              this.myChart.hideLoading()
              this.myChart.setOption({
                xAxis: {
                  data: res.data.catogories
                },
                series: [{
                  data: res.data.data
                }]
              })
            })
          }, 3000);
        }
      },
    }
    </script>
    
    <style scoped lang='scss'>
    .async {
      margin-top: 20px;
    }
    .charts {
      width: 100%;
      height: 600px;
    }
    </style>
    

  • 实现效果图如下

• Echarts中的事件与行为

  • 其实正是因为有了echarts的事件与行为，才能让图表做到与用户的一个互动功能

  • echarts中的事件与行为分为两大类

    1. 鼠标的相关事件行为，比如说鼠标的点击(click),鼠标的双击(doubleclick),鼠标的移入移出等等一些鼠标的事件，还有移动端的touch事件都可以支持
    2. 组件交互的事件，组件交互的事件用的比较少，重要的是鼠标交互事件

  • 比如举个例子，使用click事件我想要点击某个数据，让柱状图变为折线图，怎么做呢？

    非常简单，可以通过几句代码就能实现
    

  • 这里我还是沿用了上面的例子做了一个更改,代码：

    // 在mounted钩子函数内，对echarts实例榜定了click事件
        this.myChart.on('click', (params) => {
          if (params.name == '男士内裤') {
            this.myChart.setOption({
              legend: {
                data: ['更新'],
                left: 10,
                orient: 'vertical'
              },
              xAxis: {
                data: ['我更新了数据', '我更新了数据1', '我更新了数据2']
              },
              series: [
                {
                  name: '更新',
                  type: 'line',
                  data: [15, 23, 46]
                }
              ]
            })
          }
        })
    

  • 这只是个简单地例子，想要详细了解事件的话，可以通过官方文档进行查询，讲的很详细，链接地址：点击链接跳转

    希望能对大家有所帮助，有什么不足之处还请谅解，感谢观看！！！