echarts开发 | 数据可视化 -- 第一篇 echart配置项学习

EChart使用五步曲

在开始之前，需要创建一个 EChart的组件，使用五步法。
步骤1：下载并引入 echarts.js 文件
步骤2：准备一个具备大小的DOM容器
步骤3：初始化 echars 实例对象 对象放入上一步的容器
步骤4：指定配置项和数据(option)
步骤5：将配置项设置给 echarts 实例对象

配置项与图的位置关系

一、title 标题配置

// 设置图表的标题
title: {text:`折线图堆叠`, // 标题subtext: `副标题`,left: '70',top: 'top',borderWidth: 2,borderColor: 'red'
}

效果：

color 配置

color 设置线条的颜色，注意后面是个数组
设置之后，出现的线条会按照数组的顺序，依次循环使用颜色

color: ['pink', 'red', 'green', 'skyblue']

如果只设置一个颜色，所有线条都是同一个颜色
如设置为color:['pink']

设置为color:['pink','green']

设置为color:['pink','green','blue','black','yellow'],

二、轴相关配置–① grid xAxis yAxis

grid 网格配置

// left right bottom top 控制图表大小，与DOM容器的距离
// containLabel 是否显示刻度  true/false
grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true
}

xAxis,yAxis x,y轴配置

type的可选值

• category 类目
• value 值

option = {xAxis:{type:'category',// boundaryGap 是否让线条与坐标轴有缝隙boundaryGap: falsedata:['mon', 'tue', 'web', 'thu']},yAxis:{type:'value'},series:[{data:[150,230,224,218],type:'line'}]
}

系列图表配置 它决定着显示那种类型的图表

• stack 数据堆叠，同个类目上系列配置相同的 stack值后 后一个系列的值会在前一个系列的值上相加 一般是不需要的

series:[{name: '邮件营销',type: 'line',stack: '总量',data: [120,132,101]},{name: '联盟广告',type: 'line',stack: '总量',data: [220,137,201]}
]

三、提示框/弹窗组件–②tooltip

当鼠标悬浮于图表之上，可以展示该数据点的具体细节。使用 tooltip 属性进行配置。

tooltip: {// 触发类型  axis / itemtrigger: 'axis',// 坐标轴指示器配置项axisPointer:{type:'cross',label: {backgroundColor: '#6a7985',}}
}

• trigger 默认情况下 tooltip.trigger 设置为 item, 此时只有将鼠标悬停于图表的数据点上，才会触发显示该数据点对应的提示框信息。
  

• 将 trigger 设置为 axis, 当鼠标悬停，会寻找最近的轴，此时与悬停点对应的所有数据点信息都会在同一提示框内同时显示。
  

四、图例–③

// 图例组件
legend: {// 如果 Series 里面有了 name 值，则legend 里面的 data可以删掉data :['mon', 'tue', 'web', 'thu']
}

五、缩放–④

六、⑤

七、工具箱组件–⑥toolbox

使用工具箱组件，在option 对象添加一个名为 toolbox的配置项。包含两个属性：feature 和 show。

feature 选项

saveAsImage、dataView、restore

• saveAsImage
  允许将图表保存为一张图片。
• dataView
  提供数据视图，即将图表数据以表格形式显示。
• restore
  开启还原功能

toolbox: {show: true,  // 默认为truefeature: {saveAsImage:{},  // 保存图片dataView:{},  // 数据视图restore:{},  // 开启还原功能}
}

dataZoom

• dataZoom
  数据区域缩放, 允许对图表特定区域进行放大或缩小，以便更细致的查看数据

// 工具箱组件 可以另存为图片等功能
toolbox: {show: true,  // 默认为truefeature: {saveAsImage:{},  // 保存图片dataView:{},  // 数据视图restore:{},  // 开启还原功能dataZoom: {}, // 数据区域缩放}
}

步骤①：点击缩放按钮， 步骤②：选择需要放大的区域

步骤③： 松开鼠标后得到放大的区域

步骤④：还原缩放

动态演示

magicType

• magicType

toolbox: {show: true,  // 默认为truefeature: {magicType:{type: ['line', 'bar', 'stack']  // 支持这三个值 折线图 柱状图 堆叠}}
}

点击按钮可以进行视图切换

八、图表跟随屏幕缩放适配

windows.addEventListener("resize", function(){myChart.resize();
});