文章目录

echarts
- 使用
- - 渐变色
- 一些配置项
- dataset与transform数据过滤
- - dataset
  - transform
- 动态排序
- 时间轴更新数据
- 极坐标系

echarts

官网https://echarts.apache.org/zh/index.html

使用

1.首先需要先引入echarts

html直接引入js文件

<script src="../echarts.min.js"></script>

vue项目中需要先安装

npm install echarts --save

然后在需要的地方引入

import * as echarts from 'echarts'

2.初始化dom节点

首先得有一个dom节点容器

<div id="main" style="height: 600px;width: 800px;"></div>

然后对其进行echarts初始化

    let myCharts = echarts.init(document.getElementById('main'))

3.配置option，绘制一个图标

let option = {title:{text:'echars使用示例',subtext:'副标题'},legend:{data:['series']},tooltip:{},xAxis:{type:'category',data:['星期一','星期二','星期三','星期四','星期五','星期六','星期日',]},yAxis:{type:'value'},series:[{  name:'series',type:'bar',data:[10,20,30,40,50,60,70]}]
}

4.使用上述设置的option显示图表

myCharts.setOption(option)

成功显示

渐变色

有个echarts.graphic.LineaGradient()一个方法可以用来设置渐变色.其中有五个参数，前四个参数分别代表变色方位右下上左，0,0,0,1表示渐变色从正上方开始，1，0，0，0，表示渐变色从右边开始等，

第五个参数是一个数组，用于配置颜色的渐变过程，offset范围为0~1,color表示颜色，可以设置多个颜色渐变

上代码

{type: 'bar',itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'yellow'}, {offset: 1,color: 'red'}])},data: [10, 20, 30, 40, 50, 60, 70]}

还有另一种渐变方式

线性渐变，前四个参数分别是 x0, y0, x2, y2, (右下左上)范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 true，则该四个值是绝对的像素位置

下述代码和上面的示例效果一样

color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: 'red' // 0% 处的颜色}, {offset: 1,color: 'yellow' // 100% 处的颜色}],global: false // 默认为 false}

径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变

color: {type: 'radial',x: 0.5,y: 0.5,r: 0.5,colorStops: [{offset: 0, color: 'red' // 0% 处的颜色}, {offset: 1, color: 'blue' // 100% 处的颜色}],global: false // 缺省为 false
}

纹理填充

color: {image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串repeat: 'repeat' // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

一些配置项

1.折线图平滑曲线：

smooth:true

2.折线图点样式

symbol:'rect/triangle/cirle/...' //点的样式 none为不显示
symbolSize:5 //点的大小

3.折线图面积

areaStyle:{opacity:0.8,color:'red'
}

4.标记点，标记行,标记区域

markPoint:{symbolSize:10,itemStyle:{color:'red'}data:[{type:'max',name:'最大值'},{type:'min',name:'最小值'},{    //指定坐标coord:[1,10]}]
},
markLine{lineStyle:{color:'red'},data:[{name:'start'coord:[0,1],label:'标记线'},{name:'end',coord:[3,1]}，{  //标记第一列xAxis:1}]
},markArea:{itemStyle:{color:'red'},data:[[{name:'area1',xAxis:0},{xAxis:1}],[{name:'area2',xAxis:5},{xAxis:6}]]
}

5.数据过滤

transform:{id:'dataset_since_2015_china'type:'filter',config:{and:[//交集    or/not  { //年份大于等于2015dimension:'Year',gte:2015},{  //国家为中国dimension:'Country''=':'China'}]}
}
//引用transform
series:{....    datasetId:'dataset_since_2015_china'....
}

6.visualmap渐变

visualMap:[{ //侧边颜色指示框show:fasle,//设置为连续型type:'continuous',//选择第一个seriesseriesIndex:0,//渐变值从0-400min:0,max:400}，{show: false,type: 'continuous',seriesIndex: 1,//x轴dimension: 0,min: 0,max: dateList.length - 1}
]

7.区域缩放dataZoom

dataZoom:[{type:'inside',start:0,end:10},{start:0,end:10}
]

8.visualMap碎片式样式

visualMap:{show:false,//x轴dimension:0,pieces:[{lte:6,color:'red'},{gt:6,color:'blue'}//小于等于6的颜色为红色，大于6的颜色为蓝色]
}

9.tooltip

tooltip:{//轴线触发trigger:'axis',axisPointer:{//十字type:'cross' //shadow阴影//数据格式化formatter:'{a},{b},{c},{d}'}
}

10.轴线配置

//刻度线
axisTick:{show:true,//和标签对齐alignWithLabel:true
}
//轴线
axisLine:{//是否从0开始,默认从0开始onZero:false,//轴线样式lineStyle:{color:'red'}
}
// tooltip触发axis时配置
axisPointer:{label:{//标签数据格式化formatter:params=>{return '降水量  ' + params.value+ (params.seriesData.length ? '：' + params.seriesData[0].data : '');}}
}

11.阶梯折线图

series:{...type:'line'step:'start/middle/line' ...
}

12.柱状图背景色

series:{...type:'bar',showBackground:true,backgroundStyle:{color:'red'}...
}

13.series标签配置

series:{...label:{show:true,position:'top'....}...
}

14.堆叠

series:{stack:'stack' //stack值相同时堆叠
}

15.富文本rich

//轴线标签配置项
axisLabel:{formatter:function(value){//value为标签的值return '{' + value + '| }\n{value|' + value + '}';},rich:{value:{//富文本样式lineHeight:30，align:'center'},value:{height:40,align:'center',backgroundColor:{image:'/....' //图片地址}    }}
}

16.legend选择器

legend:{left:'center',data:['data1','data2','data3'],selected:{//是否选择，默认为true'data1':false,}
}

17.visualmap颜色映射

visualMap:{//水平方向orient:'horizontal',//水平居中left:'center',//映射数据范围min:0,max:100,//选择数据映射dimension:0,//配置映射颜色inRange:{color:['red','yellow','blue']}
}

dataset与transform数据过滤

dataset

首先dataset是从echarts4之后才有的，之前数据只能生命在各个系列中.

dataset可以单独声明数据

例子

option={...dataset:{source: [//第一行的数据默认为维度名，第二行开始才是数据//如果想让第一行就是数据，那么可以设置dataset.sourceHeader:false//默认第一列映射到category轴['product', '2015', '2016', '2017'],['Matcha Latte', 43.3, 85.8, 93.7],['Milk Tea', 83.1, 73.4, 55.1],['Cheese Cocoa', 86.4, 65.2, 82.5],['Walnut Brownie', 72.4, 53.9, 39.1]]},xAxis:{type:'category'},yXis:{}//source的维度会自动按列映射到series中，也可以设置//seriesLayoutBy：'row' 按行映射series:[{//seriesLayoutBy:'row'type:'bar'//可以直接使用encode指定x轴和y轴的数据encode:{x:'product',y:'2015'}},{type:'bar'}, {type:'bar'},]...
}

encode支持的属性：

// 在任何坐标系和系列中，都支持：
encode: {// 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示tooltip: ['product', 'score']// 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）seriesName: [1, 3],// 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。itemId: 2,// 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。itemName: 3
}// 直角坐标系（grid/cartesian）特有的属性：
encode: {// 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：x: [1, 5, 'score'],// 把“维度0”映射到 Y 轴。y: 0
}// 单轴（singleAxis）特有的属性：
encode: {single: 3
}// 极坐标系（polar）特有的属性：
encode: {radius: 3,angle: 2
}// 地理坐标系（geo）特有的属性：
encode: {lng: 3,lat: 2
}// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
encode: {value: 3
}

transform

dataset.transform是echarts5开始支持的一种数据转换的功能,

抽象地来说，数据转换是这样一种公式：outData = f(inputData)。f 是转换方法，例如：filter、sort、regression、boxplot、cluster、aggregate(todo) 等等。有了数据转换能力后，我们就至少可以做到这些事情：

把数据分成多份用不同的饼图展现。
进行一些数据统计运算，并展示结果。
用某些数据可视化算法处理数据，并展示结果。
数据排序。
去除或直选择数据项。

option={dataset:[//datasetIndex=0{source: [['Product', 'Sales', 'Price', 'Year'],['Cake', 123, 32, 2011],['Cereal', 231, 14, 2011],['Tofu', 235, 5, 2011],['Dumpling', 341, 25, 2011],['Biscuit', 122, 29, 2011],['Cake', 143, 30, 2012],['Cereal', 201, 19, 2012],['Tofu', 255, 7, 2012],['Dumpling', 241, 27, 2012],['Biscuit', 102, 34, 2012],['Cake', 153, 28, 2013],['Cereal', 181, 21, 2013],['Tofu', 395, 4, 2013],['Dumpling', 281, 31, 2013],['Biscuit', 92, 39, 2013],['Cake', 223, 29, 2014],['Cereal', 211, 17, 2014],['Tofu', 345, 3, 2014],['Dumpling', 211, 35, 2014],['Biscuit', 72, 24, 2014],],},{transform:{//过滤操作type:'filter',//config下可以设置多个规则,and/or/notconfig:{//dimension选择维度//维度为Year，值=2011的数据and:[{dimension:'Year','=':2011}//维度为sales，值大于100的数据{dimesion:'sales',gt:100}]//最后取交集},} }],series:[{type:'pie'},{type:'pie'},{type:'pie'},]
}

常见的对象数组格式：

option={...dataset:{// 用 dimensions 指定了维度的顺序。直角坐标系中，// 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。// 如果不指定 dimensions，也可以通过指定 series.encodedimensions: ['product', '2015', '2016', '2017'],source: [{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}]}...
}

动态排序

1.首先开启图表的实时排序

series:{...realTimesort:true...
}
//默认升序
//降序可对具体的坐标轴进行inverse:true 的翻转操作

2.设置图表的动画时长

option={...//初始图表的动画时长animationDuration:0,//更新图表时动画时长animationDurationUpdate:3000// 初始动画的缓效果 animationEasing: 'linear',animationEasingUpdate: 'linear',...
}

3.设置x轴或y轴的动画时长

xAxis/yAxis:{...// 倒序inverse: true,animationDuration: 300,animationDurationUpdate: 300...
}

4.定时更新数据

setInterVal(()=>{update()
},3000)

时间轴更新数据

时间轴使用需要多个option，用来实现切换。

1.首先配置baseOption和options

option={baseOption:{xAxis:{...},yAxis:{...}...series:{...//data可以暂时不写}},options[{series:{data:[...]},{series:{data:[...]},{series:{data:[...]},{series:{data:[...]},]
}

2.在baseOption中配置timeline

baseOption:{...timeline:{axisType: 'category',//是否自动播放autoPlay: true,//播放时间间隔playInterval: 1000,//时间轴数据data: ['time1', 'time2', 'time3', 'time4', 'time5']}...
}

极坐标系

1.首先和直角坐标系不同的是，极坐标系需要配置 angleAxis ,radiusAxis,polar属性而不用xAxis，yAxis。

option={...//上图的valueangleAxis:{axisTick:{show:false},//分割线splitLine:{show:true}},// 上图的categoryradiusAxis:{type: 'category',data: ['周一', '周二', '周三', '周四'],z: 10,axisTick: {show: false}},//定义此坐标系为polarpolar:{}...
}

2.然后需要在series中生命用的是polar极坐标系

series:{...//默认为cartesian2d，也就是直角坐标系，极坐标系需要声明coordinateSystem:'polar'//指定相应的极坐标组件porlarIndex:0...
}

数据可视化echarts学习笔记相关推荐

斯坦福大学数据可视化课程学习笔记：第一节可视化的发展与目标
<斯坦福大学数据可视化课程学习笔记>课程资源来自于斯坦福大学数据可视化课程,是我所在团队实习生提升计划的一部分.本系列是 "秉姝" 同学在学习过程中记录和整理的学习笔记 ...
斯坦福大学数据可视化课程学习笔记：第二节从数据到图像
<斯坦福大学数据可视化课程学习笔记>课程资源来自于斯坦福大学数据可视化课程,是我所在团队实习生提升计划的一部分.本系列是 "秉姝" 同学在学习过程中记录和整理的学习笔记 ...
Python数据可视化——pyecharts学习笔记
导读:Python数据可视化的库有很多,常见的有matplotlib.pyplot.Seaborn.pyecharts等. pyecharts是一款将python与echarts相结合的数据可视化库, ...
数据可视化Echarts学习指南
可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出. 01-使用技术完成该项目 ...
可视化导论 - 第四章数据可视化流程 - 学习笔记
第4章数据可视化流程 4.1 数据可视化流程以数据流向为主线,其主要模块包括数据采集.数据处理和变换.可视化映射和用户感知. 4.2 数据处理和数据变换 4.2.1 数据滤波数据滤波器在信号处理 ...
【用pandas_alive几行代码绘制竞赛动图】全网首发pandas_alive数据可视化中文学习笔记合集，学不会来打我（配置好的venv虚拟环境+拿来即用测试代码+测试数据集+参数api解析）
目录专栏说明一.效果图展示 1.1 水平条形图 1.2 竖直条形图 2. 折线图 3. 散点图 4.饼状图 5. 气泡图 6.1 地理空间点图 6.2 多边形地理空间图 7.多个图表 8.城市人口 ...
数据可视化组队学习：《Task02 - 艺术画笔见乾坤》笔记
文章目录前言 1 概述 1.1 matplotlib的使用逻辑 1.2 matplotlib的三层api 1.3 Artist类的结构 1.4 matplotlib标准用法 2 自定义你的Artis ...
《R数据科学》学习笔记|Note5:使用dplyr进行数据转换(下）
点击蓝字关注我! 写在前面本系列为<R数据科学>(R for Data Science)的学习笔记.相较于其他R语言教程来说,本书一个很大的优势就是直接从实用的R包出发,来熟悉R及数据 ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...

数据可视化echarts学习笔记