码迷,mamicode.com
首页 > 其他好文 > 详细

数据可视化

时间:2020-07-12 11:59:03      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:数据可视化   round   echart   style   ima   了解   大屏   tle   实例   

什么是数据可视化

  1. 数据可视化的主要目的:借助图形的手段,情绪有效的传递沟通信息
  2. 数据可视化在我们互联网公司中经常用于通用数据报表,移动端图表,大屏可视化,图编辑等
  3. 数据可视化库有很多,重点学习Echarts

Echarts使用五部曲

  1. 步骤一:下载并引入echarts.js文件-----------图表依赖这个js库
  2. 步骤二:准备具备大小的DOM容器-----------生成的图表会放入这个容器当中
  3. 步骤三:初始化echarts实例对象    -----------实例化echarts对象
  4. 步骤四:指定配置项和数据(option)-------根据需求修改配置选项
  5. 步骤五:将配置项设置给echarts实例对象

Echarts的基本使用:

  相关配置:

    1.  title:标题组件
    2. tooltip:提示框组件
    3. legend:图例组件
    4. toolbox: 工具栏
    5. grid:  直角坐标系内绘图网格
    6. xAxis:直角坐标系中的x轴
    7. yAxis:直角坐标系中的y轴
    8. serise:系列列表每个系列通过type决定自己的图表类型是什么
    9. color:调色盘颜色系列

      注:先了解以上9个,其余查阅文档,根据需求修改配置

边框图片语法:

border-image-source -----------用在边框的图片路径

border-image-slice ---------------图片边框向内偏移(裁剪尺寸,一定不加单位,上右下左顺序)

border- image-width--------------图片边框的宽度(需要加单位)(不是边框的宽度是边框图片的宽度)

border- image-repeat-------------图片边框是否平铺(0repeat)、铺满(round)、拉伸(stretch)默认拉伸   

数据可视化

标签:数据可视化   round   echart   style   ima   了解   大屏   tle   实例   

原文地址:https://www.cnblogs.com/sunluo/p/13287689.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!