echarts图表的应用

echarts

1. echarts介绍

什么是echarts：

商业级数据图表，它是一个纯JavaScript的图表库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持的图表:

​ 折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）

​ 雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等各种图表

• echarts是百度公司开发，参考官网

2. 绘制简单图表——柱状图

应用：

​ 绘制一个简单的图表，实现对粉丝的统计，关键字：fans

步骤：

1. 安装echarts功能包

   npm i echarts
   

2. 创建组件 src/views/fans/index.vue文件

3. 创建路由

   { path: '/fans', name: 'fans', component: () => import('@/views/fans/index.vue') },
   

4. 设置导航

   <el-menu-item index="/fans" :style="{width:isCollapse?'65px':'200px'}">
     <i class="el-icon-location"></i>
     <span slot="title">粉丝管理</span>
   </el-menu-item>
   

5. 设置el-card卡片区、图表显示的div占位符

   <template>
     <el-card class="box-card">
       <div slot="header" class="clearfix">
         <span>粉丝统计</span>
       </div>
       <div id="main" ref="main2" style="width: 600px;height:400px;"></div>
     </el-card>
   </template>
   

6. 引入echarts

   // 导入echarts
   import echarts from 'echarts'
   

7. 声明methods方法paintPic,内部实例化echarts对象并进行图像制作

   methods: {
       // 绘制图表
       paintPic () {
           // 基于准备好的dom，初始化echarts实例
           // 在Vue中获得页面元素有两种方式：
           // 1. dom方式，例如document.getElementById('main')
           // 2. ref方式，this.$refs.xxx  
           // el-form ref="loginForm"                
           // this.$refs.loginForm.validate() 
           // ref既可以获得组件对象 还可以获得html标签对象(与document.getElementById()表达意思相同)
           
           // var myChart = echarts.init(document.getElementById('main'))
           let dv = this.$refs.main2
           var myChart = echarts.init(dv)
   
           let option = {
               title: {
                   text: 'ECharts 入门示例'
               },
               tooltip: {},
               xAxis: {
                   data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
               },
               yAxis: {},
               series: [{
                   name: '销量',
                   type: 'bar',
                   data: [5, 20, 36, 10, 10, 20]
               }]
           }
   
           // 绘制图表
           myChart.setOption(option)
       }
   }
   

8. 在mounted中调用 paintPic 方法执行

   // paintPic需要尽早被调用(以便显示图表效果)，要在mounted中调用(此时页面元素已经编译好并渲染完成了)
   mounted () {
       // 绘制图表
       this.paintPic()
   },
   

效果：

注意：

1. 要通过mounted调用paintPic()方法，此时页面元素已经被Vue解析和渲染完毕，可以正常获得到div元素用于绘制图表。
2. 获得页面元素有两种方式(dom原生操作 或 vue ref方式)。

3. 绘制其他图表——饼图

应用：

​ 绘制一个饼图效果，根据业务需要，不同业务数据使用不同类型的图表来表现有时会更合适。

实现：

把官网例子的option参数选项复制过来应用即可，

其他代码不动，methods的paintPic()方法更改为如下：

// 绘制图表
paintPic () {
  // var myChart = echarts.init(document.getElementById('main'))
  let dv = this.$refs.main2
  var myChart = echarts.init(dv)

  // 饼图的参数项目
  let option = {
    title: {
      text: '某站点用户访问来源',
      subtext: '纯属虚构',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  // 绘制图表
  myChart.setOption(option)
}

效果：

注意：

​ 在真实案例中是这样的，数据会返回，样子是option选项类型的参数 (如果不是，要手动修改为option类型的)，然后在axios成功回调里边再次调用setOption()方法，参数会覆盖之前旧的参数

let pro = axios(url,xxx)
pro
    .then(result=>{
    myChart.setOption(服务器端返回的数据)  // 根据服务器端返回的数据绘制图标
})

4. 饼图应用axios请求数据

应用：

​ 在饼图基础上，对项目中的粉丝信息进行统计输出。

实现：

1. 根据已有条件把图表基本结构绘制出来(div、mounted、paintPic、option相关参数)
2. axios向服务器端发请求，获得粉丝数据，并制作为option参数格式。
3. 图表对象再次调用setOption()方法，把获取的真实数据二次填充到数据图表中。

<script>
// 导入echarts
import echarts from 'echarts'

export default {
  name: 'Fans',
  mounted () {
    // 绘制图表
    this.paintPic()
  },
  data () {
    return {
      myChart: null // 接收echarts图表对象
    }
  },
  methods: {
    // 绘制图表
    paintPic () {
      let dv = this.$refs.main2
      this.myChart = echarts.init(dv)

      // 饼形图的参数项目
      let option = {
        title: {
          text: '某站点用户访问来源',
          subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 绘制图表
      this.myChart.setOption(option)
      // 获取数据对图表进行二次填充
      this.getFansStat()
    },
      
    // 获得对象的成员名称集合
    getkeys (obj) {
      var keys1 = []
      for (var p1 in obj) {
        if (obj.hasOwnProperty(p1)) { keys1.push(p1) }
      }
      return keys1
    },

    // 动态获得服务器真实粉丝数据
    getFansStat () {
      // axios发起请求
      let pro = this.$http({
        url: '/mp/v1_0/statistics/followers',
        method: 'get'
      })
      pro
        .then(result => {
          // 把粉丝数据封装为option的样子
          // age:{le18:57,le23:71……}
          // 1. 把legend的data数据通过result组织
          let keys = this.getkeys(result.data.data.age)
          // 2. 把series的data数据通过result组织
          let dataObj = []
          let ages = result.data.data.age
          for (var k in ages) {
            // 把 成员的key和value获得出来填充到dataObj里边
            dataObj.push({ value: ages[k], name: k })
          }
          let opt = {
            legend: {
              // data: ['le18', 'le23', 'le30', 'le40', 'le50']
              data: keys
            },
            series: [
              {
                data: dataObj
              }
            ]
          }
          // echarts图表对象调用setOption()
          this.myChart.setOption(opt)
        })
        .catch(err => {
          return this.$message.error('获得粉丝统计数据失败：' + err)
        })
    }
  }
}
</script>

效果：