【echart】二、使用手册、配置项阅读笔记

本文介绍了如何在Vue环境中引入并使用ECharts5创建第一个图表,并概述了ECharts5的新特性,包括动态叙事、视觉设计优化、增强的交互能力和性能提升等方面。同时,还详细解释了如何利用数据集组件来更好地管理和复用数据。
摘要由CSDN通过智能技术生成

入门篇

第一个echart

  • 引入echart
npm install echarts --save
  • vue
<template>
  <div class="about">
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  components: {
  },
  mounted () {
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  },
  data () {
    return {
    }
  },
}
</script>

echart5的新特性

1.动态叙事
在数据的切换中增加了平滑过渡的动画效果

2.视觉设计

  • 优化颜色的搭配:同一类型的数据的颜色饱和度等一致,使得表达出来的重要性是一致的
  • 报表中的标签:不在挤成一团,可以通过布局策略等来使标签在局促的空间优雅得显示
  • 时间轴
  • focus提示框:美化界面、并且增加了按类目或数值排序的功能
  • 仪表盘
  • 扇形圆角:在饼图、旭日图、矩形树图中,可以调整border-radius
  • 贴花图案

3.交互能力

  • 状态管理
    当鼠标focus到某一个元素上,echart4会通过高亮的状态来突出目标,但hover元素后,echart4则会取消高亮,使目标从高亮状态变回普通状态。在echart4的基础上,echart5新增了淡出的特性,在focus到目标后,目标会高亮,而其他元素会淡出。

4.性能提升

5.开发体验

  • 数据集:ECharts 5 加强了数据集的数据转换能力
  • 国际化

进阶篇

echart的样式

echart的样式,大致可以通过以下的手段来进行调整:
颜色主题(Theme)
调色盘
直接样式设置(itemStyle、lineStyle、areaStyle、label、…)
视觉映射(visualMap)

数据集

 数据集(dataset)是专门用来管理数据的组件。虽然每个系列都可以在 series.data 中设置数据,但是从 ECharts4 支持 数据集 开始,更推荐使用 数据集 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和其他配置” 分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。

 传统的series常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。

 使用数据集的好处如下所示:

  • 能够贴近数据可视化常见思维方式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。
  • 数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。
  • 数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。
  • 支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。

要注意的是,dataset也有两种格式:二维数组 和 对象数组

seriesLayoutBy可以理解成以什么为x轴
如果以第一行为x轴,那么第一列就为维度;如果以第一列为x轴,那么就以第一行为维度
至于数据,永远都是y轴
在这里插入图片描述
将dataset数据映射成系列图表series,是用series.encode来配置的。
在这里插入图片描述
目前并非所有图表都支持 dataset。支持 dataset 的图表有: line、bar、pie、scatter、effectScatter、parallel、candlestick、map、funnel、custom。 后续会有更多的图表进行支持

坐标轴

直角坐标系(grid/cartesian):就是x轴、y轴
单轴(singleAxis):
极坐标系(polar):就是圆形类的报表
地理坐标系(geo):就是地图
对于一些没有坐标系的图表,例如饼图、漏斗图等

配置篇

echart5支持的图形

echart5目前支持的图形可以自行到配置项手册看看,如下图所示
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我叫985

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值