echarts.js 画报表、数据可视化(第一部分)

echarts.js 画报表、数据可视化(第一部分)

---

目标: 本次目标主要可以通过这个框架画出各种图标，例如：矩形图、饼图、折线图等等。

搭建环境。

安装

我们这里直接使用cdn引入,如果使用npm或者bower或者yarn 可以用下面命令进行安装:

$ npm install echarts
# 或者
$ bower install echarts
# 或者
$ yarn add echarts

安装后的文件在node_modules或者bower_components直接导入使用即可。

下面直接从cdn中导入，cdnjs

创建项目目录

如上图准备一个html文件，在script标签导入: echarts.

Ps: js 文件除非前置依赖，一般都在html文档末尾导入。这里只为演示使用。

画一个矩形图

首先先看效果:

这里主要是一个矩形图展示虚拟数据。应用了设置了x,y轴和tooltips。下面看代码:

 let barEcharts = echarts.init(document.querySelector('#echarts'))
    // 设置图标项
    let option = {
      title: { // 设置标题
        text: '演示矩形图',
        x: 'center'
      },
      tooltip: {  // 设置悬浮提示
        trigger: 'item',
        formatter: function (params) {
          return `${params.name}的销售额为${params.value}万元`
        }
      },
      legend: { // 设置
        data: ['销售额']
      },
      xAxis: { // x轴设置
        data: ['一号店', '淘宝', '天猫', '京东'],
        name: '电商平台'
      },
      yAxis: {  // y轴设置
        name: '销售额/万元'
      },
      series: {  // 图标设置
        name: '销售额/万元',
        type: 'bar',  // 设置图标类型
        data: [320, 1000, 874, 669]  //设置数据数据一般都是数组
      }
    }
    barEcharts.setOption(option) // 将设置应用到图表容器中

在上图标中，如果要针对每一项的记录进行点击反馈如何操作？

在series选项中的data，他是一个数组，例如对于矩形图这样的。可以这样设置:
    data: [
            {
                value: 320,
                name: 'yhd'
                
            },
            ...,
            {
                value: 669,
                name: 'jd'
            }
        ]
这样设置，data是可是数据中每个object的value的，只要设置了value即可，其他参数可以附带。

画一个饼图

看效果:

let pieEcharts = echarts.init(document.querySelector('#pie'))
    let pie = pieEcharts.setOption({
      title: {
        text: '演示饼图',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        data: ['销售额']
      },
      series: {
        name: '销售额/万元',
        type: 'pie',
        data: [{
          name: '京东',
          value: 669,
          type: 'jd'
        }, {
          name: '淘宝',
          value: 1000,
          type: 'jd'
        }, {
          name: '天猫',
          value: 874,
          type: 'jd'
        }, {
          name: '一号店',
          value: 320,
          type: 'jd'
        }]
      }

未完待续...