1.echarts的介绍

1.brief introduction

echarts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

2.echarts的下载

（1）从 npm 获取
npm install echarts –save
（2）从 CDN 获取
（3）从 GitHub 获取（下载echarts.min.js文件）

2.echarts语法

1.常见术语
英文 汉语
title 标题
legend 图例
tooltip 提示
xAxis x轴线
yAxis y轴线
series 系列
data 数据
2.图表常见类型
  1. bar 柱状图
  2. line折线图
    (1)曲线图
    加上smooth:true;就会变成曲线图
    (2)面积图
    加上areaStyle:{fill:“颜色编号”} 会变成面积图
  3. pie 饼形图
    加上radius:[80,50] 会变成环形图 //第一个值是外半径，第二个值是内半径

开始写一个简单的柱状图：

  1. 准备具有大小的DOM容器
  2. 初始化实例对象 echarts.init(dom容器)
  3. 指定配置项和数据
  4. 将配置项设置给echarts实例对象，使用刚指定的配置项和数据显示图表。
3.echarts中的样式简介
  1. color调色盘

在 option 中设置。可以设置全局的调色盘，也可以设置系列自己专属的调色盘。
全局调色盘option.color

option.color：color: ["pink", "#ff0", "#f0f", "#0ff"]

局部调色盘series.item.color

series: [
    {
      type: 'bar',
      // 此系列自己的调色盘。
      color: [
        '#dd6b66',
        '#759aa0',
        '#e69d87',
        '#8dc1a9',
        '#ea7e53',
        '#eedd78',
        '#73a373',
        '#73b9bc',
        '#7289ab',
        '#91ca8c',
        '#f49f42'
      ]
     
    },

itemStyle项的颜色

  • itemStyle:{color:“#00f” }
  • 高亮的样式emphasis
itemStyle:{
normal:{color:"#93da6c"},
emphasis:{color:"#bcff57"}
}
  1. 特殊样式

渐变色

// 定义渐变
	let linear = {
	  type: 'linear',
	  x: 0,
	  y: 0,
	  x2: 0,
	  y2:1,
	  colorStops: [{
		  offset: 0, color: '#02bcff' // 0% 处的颜色
	  }, {
		  offset: 1, color: '#5555ff' // 100% 处的颜色
	  }],
	  global: false // 缺省为 false
	}

itemStyle:{
	color:linear,
	borderRadius:[30,30,0,0]
		}
  1. label 标签

  • show：true是否显示

  • position：”insideRight“位置

  • formatter格式
    formatter:

  • formatter 是一个用于格式化标签、提示框等的模板字符串。它可以用在以下几个地方：

    • tooltip.formatter：提示框内容的格式化。
    • series.label.formatter：系列中每个数据项的标签格式化。
    • axisLabel.formatter：坐标轴标签的格式化。

    这里使用字符串模板进行设置，其中模板变量有{a}, {b}, {c}, {d}，在不同图表类型下代表含义分别为
    折线图、柱状图、K线图：{a} (系列名称)、{b}(类目值)，{c}(数值)，{d}（无）
    散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
    地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
    饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

    formatter: '{name|{b}}\n{time|{c} 小时}' // 包含两个内容（“{b}”、“{c} 小时”），它们之间使用“\n”分隔

    还有一种写法 {classname|content} 配合富文本使用

    formatter: '{a|这段文本采用样式a}'

  • rich富文本

rich 的目的就是给文字加上一些自定义的样式

formatter:[
		'{名称|...}',
		'...',
		...
	].join('\n'),
	rich:{
		名称:{
			对该名称的文本进行添加样式,且可以看成inline-block
			lineHeight: 10
			width:10,
			align:'left|center|right',			
			verticalAlign:'top|middle|bottom'	//在lineHeight被决定后,竖直位置由verticalAlign来指定	
			backgroundColor: {	使用图片
	            image: './data/asset/img/weather/sunny_128.png'
	        },
		}
	}
4.缓冲动画

动画延迟animationDelay

动画时长animationDuration

动画缓动函数animationEasing

animationDelay: function(idx) {
					// 越往后的数据延迟越大
					return idx * 200;
				},
				animationDuration: function(idx) {
					// 每小格动画的时候
					return idx * 200;
				},
				// 弹性的方式出现动画
				animationEasing: "bounceInOut"
			}