echart⼊门⼀
⼀. 基本概念
1. 可视化⼯具
在数据分析时代，不能仅仅依靠类似excel表格展现出数据的规律，所以需要另⼀种能将数据的特点更直观地体现出来的⼯具，甚⾄可以与⽤户交互。这种⼯具叫可视化⼯具，它能够把数据变成2D模型（折线图，柱状图...）或者3D 模型，这样这些看似杂乱⽆序数据就都变成清晰明了的统计结果了。
所以利⽤可视化⼯具能做些什么：
(1) 例如制作监控型报表，反应业务的实际情况，并且根据数据进⾏预测分析。
（2）例如展⽰动态数据的更新，⽐如时间序列数据，动态路径数据等。
2.当前的可视化⼯具
百度的echart、蚂蚁⾦服G2（anv）、D3
⼆. echart的基本概念
这⾥只介绍2D的简单配置，掌握了基本思路，其他配置也⼤同⼩异。
echart 中的内容可以看作是⼀个个组件拼装起来，通过option这个字段将拼装的内容塞⼊echart的api渲染就⾏。
⽐如折线图，折线图需要 'grid'坐标系，'yAxis'y轴，'xAxis'x轴，'series'系列（这⾥先看作⼀条线），
假如要控制这条线的显⽰隐藏，我们需要额外的图例组件'legend' ，
假如想要得到更详细的信息，在⿏标移到这条线的时候，希望有个⽓泡框能体现该接触点的信息，就是'tooltip'提⽰框组件。
假如'xAxis'x轴数据量太⼤，我们希望看局部内容，可以⽤'dataZoom'数据区缩放组件。
有时候还需要调整组件的位置，left,right,height,bottom都是相对于dom容器，
数值： left:130表⽰偏离dom容器左边130px;
百分⽐：right: '30%表⽰偏离dom容器右边 ，宽度是dom容器宽度百分之40，height:'40%'是垂直⽅向的，所以是相对于容器⾼度
2.基本配置
下⾯讲⼀下常⽤的直⾓坐标系图，⽐如折线图和柱状图相关的配置,⾸先将下⾯代码复制到下⽅链接的编辑框⾥⾯，这样进⾏参数的调配
具体组件内容：两个直⾓坐标系，⼀个x轴，多个y轴，⼀个title, 有多少个series搭配多少个legend,⼀个dataZoom控制折线图和柱状图
option = {
title: {
text: '{name|主标题} {val|演⽰}', // ⽂本内容
left: 50, // 标题组件的位置
textStyle: {
rich: {
// 富⽂本的样式，可以配置对局样式
name: {
// ⾃定义字段
fontSize: 12,
color: 'black',
},
val: {
// ⾃定义字段
fontSize: 16,
},
},
},
},
grid: [
{
// 第⼀个坐标系
height: 150,
},
{
// 第⼆个坐标系，通过top和bottom⾃动计算出height
top: 250,
bottom: 50,
},
],
xAxis: [
{
gridIndex: 0, // 处于第⼀个坐标系
// type: 'value' ，可以⽤min,max定义
// type:'category',type的默认值，数据匹配顺序当前的data > series.data/ dataset.source,
data: ['a', 'b', 'c'], // 有data，默认type⼀定是category。类⽬数据，在类⽬轴（type: 'category'）中有效。不指明data会从series.data中获取        },
{
gridIndex: 1, // 处于第2个坐标系
data: ['a', 'b', 'c'], // 有data，默认type⼀定是category
},
],
yAxis: [
{
// type默认为value
gridIndex: 0, // 处于第⼀个坐标系
name: 'y1',
},
{
/
/ type默认为value
gridIndex: 1, // 处于第⼆个坐标系
name: 'y2',
},
],
series: [
{
name: '柱状图1', // 系列名称，⽤于tooltip的显⽰，legend 的图例筛选，在 setOption 更新数据和配置项时⽤于指定对应的系列。
data: [
150,
20,
224,
], // 作为y轴的数据
type: 'bar',
// itemStyle: {
//  color: 'red' // ⼀般系列的样式会默认选取主题⾥⾯color的配置，
//                如果这⾥定义了会影响到相关系列的颜⾊，⽐如legend的颜⾊
//              然后legend⾥⾯有个itemStyle也可以重置这⾥设置的颜⾊，最后是legend的data字段⾥⾯的itemStye
//    所以legend的颜⾊取⾊data的itemStyle > legend的itemStyle > series的itemStyle > 默认颜⾊
// },
xAxisIndex: 0,
yAxisIndex: 0,
},
{
name: '折线2',
data: [150, 230, 224],
type: 'line',
xAxisIndex: 1,
yAxisIndex: 1,
},
],
tooltip: {
trigger: 'axis',
},
axisPointer: {
//联系所有的x轴
link: { xAxisIndex: 'all' },
},
legend: {
padding: [0, 50], // 设置左右两边的边距为50，上下为0
type: 'scroll', // 超出容器会使⽤隐藏，变成滚动状态
// itemStyle: { // 针对所有legend样式设置
//  color: 'blue'
// },
data: [
// 如果需要⾃定义legend样式才⽤
{
name: '柱状图1', // 匹配series中name为'柱状图'的系列
icon: 'rect',
// itemStyle: {} // 单个legend样式设置
},
{
name: '折线2', // 匹配series中name为'柱状图'的系列
},
],
formatter: (name) => {
// 可以结合富⽂本
return `{a|${name}}{b|随意}`; // es6模板字符串写法，即 'a{|'+name+'}'
},
textStyle: {
rich: {
a: {
fontSize: 12,
},
b: {
fontSize: 20,
},
},
},
},
dataZoom: [
// 放置多个dataZoom组件setoption
{
xAxisIndex: [0, 1], // 控制第⼀和第⼆条x轴
type: 'inside', // 表现形式为内置
start: 0, // ⼀开始的数据范围起点百分⽐
end: 100, // ⼀开始的数据范围起点百分⽐
/
/  startValue:100/"xx"  绝对数值定义窗⼝范围，如果x轴的type为category，使⽤100会对应数组的index,"xx"也会⾃动转成数组index            //  endValue:
// 限制收缩的窗⼝的⼤⼩的最⼩和最⼤值
minSpan: 0,
maxSpan: 100,
// 是否锁定选择区域（或叫做数据窗⼝）的⼤⼩。true只能平移
// zoomLock: true
},
{
xAxisIndex: 1, // 控制第三条x轴
type: 'slider',
// 这个属性根据不同的场景(数据量⼩的时候让它false)进⾏切换
show: true,
// zoomLock: true
},
],
};
总结⼀下常见的series.data和xAxis.data的对应
// xAxis为value轴的时候
xAxis: {
type:"value",
min: 1,
max: 10
}
yAxis: {
name:'y1'
},
series: [
{
type:"line",
data: [[0,10],[1,20],[2,30]] // data:[[x维度，y维度]...]，每⼀个[x维度，y维度]都是⼀个点的数据，[0,10]代表x轴为0，y轴为10的点
}
]
// xAxis为category轴的时候
xAxis: {
type:"category",
data:["a","b","c"]
}
yAxis: {
name:'y1'
},
series: [
{
type:"line",
/**
等同于data: [[0,10],[1,20],[2,30]] ，此时会与xAxis.data对应
跟上⾯pe=value的时候也是data: [ [x维度，y维度]...]形式，每⼀个[x维度，y维度]代表⼀个点的数据
但是这⾥的 x维度意义不⼀样，
xAxis为category轴时候，如果是数值，就匹配xAxis.data数组的索引，字符串会匹配xAxis.data数组的值。
xAxis为value轴的时候，x维度是代表x轴某个值
所以 data: [10,20,30]可以写成data: [[0,10],[1,20],[2,30]]或者data: [['a',10],['b',20],['c',30]]
*/
data: [10,20,30]
}
]
3.1 echart中的事件的类型
（1）⼀种是⽤户的⿏标⾏为，点击click，双击dblclick，⿏标悬停mouseover等，具体事件看（2）⼀种是与组件交互的⾏为，⽐如缩放dataZoom，会触发dataZoom事件，⽽代码中调⽤dispatchAction({ type: 'dataZoom' ,start:0,end: 1})也会触发dataZoom事件
3.2 如何监听
<(eventName, query, (params) => {});
1. chart: echart实例
2. eventName: click,dataZoom等
3. query：只对指定的组件的图形元素的触发回调
query可以为string或者object
<('click', 'series.line', function () {...});
<('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
// series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时，此⽅法被回调。
});
4. params:
{
// 当前点击的图形元素所属的组件名称，
// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
componentType: string,
// 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
seriesType: string,
// 系列在传⼊的 option.series 中的 index。当 componentType 为 'series' 时有意义。
seriesIndex: number,
// 系列名称。当 componentType 为 'series' 时有意义。
seriesName: string,
// 数据名，类⽬名
name: string,
// 数据在传⼊的 data 数组中的 index
dataIndex: number,
value: number|Array
...
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。