资讯专栏INFORMATION COLUMN

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

Rainie / 570人阅读

摘要:画报表数据可视化第一部分目标本次目标主要可以通过这个框架画出各种图标,例如矩形图饼图折线图等等。可以这样设置这样设置,是可是数据中每个的的,只要设置了即可,其他参数可以附带。画一个饼图看效果演示饼图销售额销售额万元京东淘宝天猫一号店未完待续

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} 
{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" }] }

未完待续...

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/84414.html

相关文章

  • 将HTML页面转换为PDF文件并导出

    摘要:目前,在大多数的管理系统中,都会有这样一个功能根据相关的条件查询相应的数据,并生成可视化报表,然后可导出为文件。利用将新的元素生成图片利用将图片生成文件并保存到本地。 目前,在大多数的管理系统中,都会有这样一个功能:根据相关的条件查询相应的数据,并生成可视化报表,然后可导出为PDF文件。本文只展现生成可视化报表之后导出PDF文件的过程,生成可视化的报表可使用Echarts,D3js等框...

    Airy 评论0 收藏0
  • 对web数据可视的一些理解

    摘要:本人也做过一些数据可视化相关的产品,下面聊聊对数据可视化的一些思考。这也是数据可视化最麻烦的一直,一般我们借助的地图,或者百度地图,高德地图等来开发,其实百度地图也出了个地图可视化的库,展示效果没有好。。。。 最近几年随着大数据的兴起,以及浏览器性能的提升,数据可视化成为了一个热点,前端也冒出来了很多数据可视化的岗位。本人也做过一些数据可视化相关的产品,下面聊聊对数据可视化的一些思考。...

    andong777 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<