echarts学习1

最新推荐文章于 2024-04-25 22:52:53 发布

小叶_01

最新推荐文章于 2024-04-25 22:52:53 发布

阅读量408

点赞数 2

分类专栏： Echarts 文章标签： echarts 学习 javascript

本文链接：https://blog.csdn.net/qq_38799387/article/details/125860834

版权

Echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.echarts介绍

ECharts是百度公司开源的一个使用 JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender ，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

2.echarts快速上手

步骤1：引入 echarts.js 文件。

echarts是一个 js 的库，当然得先引入这个库文件
步骤2：准备一个呈现图表的盒子

这个盒子通常来说就是我们熟悉的 div ，这个 div 决定了图表显示在哪里
步骤3：初始化 echarts 实例对象

在这个步骤中, 需要指明图表最终显示在哪里的DOM元素
步骤4：准备配置项

这步很关键，我们最终的效果，到底是显示饼图还是折线图，基本上都是由配置项决定的
将配置项设置给 echarts 实例对象

通过简单的5个步骤, 就能够把一个简单的柱状图给显示在网页中了.这几个步骤中, 步骤4最重要, 一个图表最终呈现什么样子,完全取决于这个配置项.所以对于不同的图表,除了配置项会发生改变之外,其他的代码都是固定不变的.

3.相关配置(配置项都是以键值对的形式存在)

普通配置
1. xAxis：直角坐标系中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的呈现
2. yAxis: 直角坐标系中的 y 轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去 series 下找数据进行图表的绘制
3. series: 系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据
通用配置
1. 标题：title

var option = {
   title: {
       text: "成绩",   // 标题文字
       textStyle: {
           color: 'red' // 文字颜色
      },
       borderWidth: 5,  // 标题边框
       borderColor: 'green', // 标题边框颜色     borderRadius: 5,  // 标题边框圆角    left: 20, // 标题的位置
       top: 20 // 标题的位置
  }
}

提示框：tooltip—tooltip 指的是当鼠标移入到图表或者点击图表时, 展示出的提示框
触发类型: trigger—可选值有item\axis
触发时机: triggerOn —可选值有 mouseOver\click
格式化显示: formatter —字符串模板



var option = {
   tooltip: {
       trigger: 'item',
       triggerOn: 'click',
       formatter: '{b}:{c}'
  }
}

回调函数
var option = {
   tooltip: {
       trigger: 'item',
       triggerOn: 'click',
       formatter: function (arg) {
           return arg.name + ':' + arg.data       }
  }
}
这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述

工具按钮：toolbox—toolbox 是 ECharts 提供的工具栏, 内置有导出图片，数据视图, 重置, 数据区域缩放, 动态类型切换五个工具

var option = {
   toolbox: {
       feature: {
           saveAsImage: {}, // 将图表保存为图片
           dataView: {}, // 是否显示出原始数据
           restore : {}, // 还原图表
           dataZoom: {}, // 数据缩放
           magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持                type: ['bar', 'line']
          }
      }
  }
}

图例: legend—legend 是图例,用于筛选类别,需要和 series 配合使用。legend 中的data是一个数组，需要何series数组中某组数据name值一致

var option = {
   toolbox: {
       feature: {
           saveAsImage: {}, // 将图表保存为图片
           dataView: {}, // 是否显示出原始数据
           restore : {}, // 还原图表
           dataZoom: {}, // 数据缩放
           magicType: { // 将图表在不同类型之间切换,图表的转换需要数据的支持                type: ['bar', 'line']
          }
      }
  }
}

直角坐标系的常见配置
直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图折线图散点图
针对于直角坐标系的图表, 有一些通用的配置

配置1：网格grid
var option = {
   grid: {
       show: true, // 显示grid
       borderWidth: 10, // grid的边框宽度
       borderColor: 'red', // grid的边框颜色
       left: 100, // grid的位置
       top: 100,
       width: 300, // grid的大小
       height: 150
  }
}

配置2: 坐标轴 axis
坐标轴分为x轴和y轴, 一个 grid 中最多有两种位置的 x 轴和 y 轴
坐标轴类型 type
value : 数值轴, 自动会从目标数据中读取数据
category : 类目轴, 该类型必须通过 data 设置类目数据
坐标轴位置
xAxis : 可取值为 top 或者 bottom
yAxis : 可取值为 left 或者 right

var option = {
   xAxis: {
       type: 'category',
       data: xDataArr,
       position: 'top'
  },
   yAxis: {
       type: 'value',
       position: 'right'
  }
}

配置3: 区域缩放 dataZoom
dataZoom 用于区域缩放, 对数据范围过滤, x轴和y轴都可以拥有, dataZoom 是一个数组, 意味着
可以配置多个区域缩放器
区域缩放类型 type slider : 滑块
inside : 内置, 依靠鼠标滚轮或者双指缩放
产生作用的轴
xAxisIndex :设置缩放组件控制的是哪个 x 轴, 一般写0即可
yAxisIndex :设置缩放组件控制的是哪个 y 轴, 一般写0即可
指明初始状态的缩放情况
start : 数据窗口范围的起始百分比
end : 数据窗口范围的结束百分比
var option = {
   xAxis: {
       type: 'category',
       data: xDataArr
  },
   yAxis: {
       type: 'value'
  },
   dataZoom: [
      {
           type: 'slider',
           xAxisIndex: 0
      },
      {
           type: 'slider',
           yAxisIndex: 0,
           start: 0,
           end: 80
      }
  ]
}