基本上手：
- 导入echarts文件js文件
- 创建需要挂在的dom元素
- 初始化echarts对象
- 准备配置项
- 将配置项设置到echarts实例对象上
var myEcharts = echars.init(document.queryselector('div')
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
},
yAxis: {
type: 'value',
},
series:
{
data: [120, 132, 101, 134, 90, 230, 210]
}
};
myEcharts.setOption(option)
基本配置项
例如 xAxis：x轴的基本配置
xAxis: { // xAxis：x轴的基本配置
type: 'category', //轴的属性为类目
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] //类目的数据
},
yAxis: {
type: 'value', // 数值轴
},
series: {
type: 'line', // 图表类型
data: [120, 132, 101, 134, 90, 230, 210] // 数值轴所需要的数据
}
通用配置
标题：title, 提示：tooltip, 工具按钮： toolbox；图例：legend
- 标题： title
- 文字样式 textStyle
基本的对象属性包括有：colorfontStylefontSize等css的基本文本样式 - 边框样式
boderWidth、 borderColor、 borderRaduis 分别对应边框的大小、颜色、圆角 - 位置样式
top、left、right、bottom、 均接受一个数值，表示标题的位置，类似相对定位中的位置设置
-
提示框： tooltip
- 触发类型 trigger
item axis 分别对应每个数据项、坐标轴 - 触发时机 triggerOn
mouseover click - 格式化 formatter
模板变量有{a},{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等在trigger为'axis'的时候，会有多个系列的数据，此时可以通过{a0},{a1},{a2}这种后面加索引的方式表示系列的索引。 不同图表类型下的{a}，{b}，{c}，{d}含义不一样。 其中变量{a},{b},{c},{d}在不同图表类型下代表数据含义为：
— 折线（区域）图、柱状（条形）图、K线图 :
{a}（系列名称），{b}（类目值），{c}（数值）,{d}（无）---- 散点图（气泡）图 :
{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无）---- 地图 :
{a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）---- 饼图、仪表盘、漏斗图:
{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）
---- 接受回调函数：callback(param) - 触发类型 trigger
-
工具栏： toolbox ；类似的具有位置top left等属性
toolbox: { feature: { saveAsImage: {}, // 导出图片 dataView:{}, // 数据视图 restore:{}, // 重置 dataZoom:{}, //区域缩放 magicType:{ // 切换不同的图表类型 type:['bar','line'] } } }, -
图例组件 legend
根据series的name信息生成图例，基本属性有位置top、left等，textStyle用于设置文本信息，
orient设置图例的展示方向，'vertical''horizontal',data也可以显式给出
直角坐标系通用配置
- 网格 grid
show 设置 true 网格显示，borderWidth设置边框宽度，top，left等设置位置 支持百分比，以及高宽等属性，注：位置需要包含标签是需要containLabel设置为true 从而避免标签溢出dom元素 - 坐标轴：
position设置坐标轴的位置，x轴有 ‘top’ ‘bottom’ 对于y轴有 ‘left’ ‘right’ - 区域缩放 dataZoom：
dataZoom: [ { type: 'slider', // 滑块 xAxisIndex:[0], // 设置轴控制 start:0, // 设置起始筛选状态 开始坐标 end:100 }, { type: 'inside', // 鼠标滚轮 yAxisIndex:[0] } ],
常用图表
柱状图
基本实现
代码：
var mycharts = echarts.init(document.querySelector('div'))
var option = {
xAxis:{
type:'category',
data:['张三','李四','王五','闰土','小明','茅台','二妞','大强']
},
yAxis:{
type:'value'
},
series:{
type:'bar',
data:[88,92,63,77,94,80,72,86]
}
}
mycharts.setOption(option)
常见效果
markPoint： 标记关键点，例如最值点位置
markPoint:{
data:[
{
type:'max',
name:'最大值'
},
{
type:'min',
name:'最小值'
}
]
},
markLine: 标记关键线代码类似 类似具有的属性 lineStyle设置标线样式
markLine:{
data:[
{
type:'average',
name:'平均线',
precision:2 // 计算精度
}
]
},
数值显示：
label： 显示数值
label:{
show:true,
rotate:60,
position:'top'
}
barWidth: 柱状图的宽度 ，接受一个数值设置每个柱子的宽度
折线图
基本实现
)]
代码
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line'， // 折线图
data: [150, 230, 224, 218, 135, 147, 260],
}
]
}
常见效果
-
常见标记 : 最大值 最小值 平均值 标注区间 markPoint markLine markArea
markArea:{ data:[ [ { xAxis:'Mon' }, { xAxis:'Thu' } ], ] } -
平滑曲线 smooth ：true 又折线图变为曲线
-
拐点样式 itemStyle : 有clolor, borderWidth, borderColor, opacity等
-
线条样式 lineStyle : 注： 修改
lineStyle中的颜色不会影响图例颜色，如果需要图例颜色和折线图颜色一致，需修改 ，线条颜色默认itemStyle.color也会取该颜色。lineStyle:{ color:'red', type:'dashed' // 默认solid 还有 dotted } -
填充样式 areaStyle : 用于设置曲线与坐标轴直接的填充面积样式，属性有color，opacity，shadowColor，shadowBlur
-
设置留白 boundaryGap ，是的x轴上的元素紧挨y轴，xAxis 的该属性 设为0即可
-
设置y轴放缩 yAxis 属性 scale 设置为
true不以零点作为起始位置 -
堆叠折线图 stack
{ data: [52, 42, 252, 242, 153, 120, 250], type: 'line', stack:'S', // stack属性设置同一个元素即可实现同类堆叠 areaStyle:{} //设置面积阴影效果 }, { data: [150, 230, 224, 218, 135, 147, 260], type: 'line', stack:'S', areaStyle:{} }
散点图
基本实现
代码
option = {
xAxis: {
type:'value'
},
yAxis: {}, // 一般可为空 默认为value
series: [
{
symbolSize: 20, // 点大小
data: [ // 二维数组
[10.0, 8.04],
[8.07, 6.95],
[13.0, 7.58],
[9.05, 8.81],
[11.0, 8.33],
[14.0, 7.66],
[13.4, 6.81],
[10.0, 6.33],
[14.0, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12.0, 6.26],
[12.0, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
type: 'scatter'
}
]
}
```
常见效果
- 散点大小：symbolSize: 直接设置大小 也可传出回调函数 cb(arg){},其中的arg为每一个点的数值信息
- 散点样式 itemStyle 属性包括 color 也可接受回调函数
- 涟漪散点图： 对于特定的点设置 type设置为 effectScatter
showEffectOn接受'render'或者'emphasis'表示一开始就渲染开始鼠标点击时渲染涟漪效果
rippleEffect：设置涟漪的样式 包括color scale number，scale 涟漪大小
饼图
基本实现
代码
option = {
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
}
]
}
常见效果
- 显示数值 label：true 显示每一快的标签 ，formatter 对显示标签进行格式化，模板变量有：
{a}：系列名。{b}：数据名。{c}：数据值。{d}：百分比 对应的可以使用 回调函数处理 - 圆环设置 内外半径 radius 可设置百分比 参照容器宽度较小的一半，接受数组 表示内外圆半径
- 南丁格尔图 roseType ：
'radius'扇区圆心角展现数据的百分比，半径展现数据的大小。'area'所有扇区圆心角相同，仅通过半径展现数据大小 - 选中偏移 selectedMode 将选中的区域偏离原点 ，
'single'每次偏离一个元素'mutiple'可以允许多个块同时偏移 - 选中偏移量selectedOffset 设置偏移距离
矢量地图
基本实现
代码
$.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function (res) {
echarts.registerMap('chinamap', res)// 注册地图
var mycharts = echarts.init(document.querySelector('div'))
var option = {
geo: { //series 也可
type: 'map',
map: 'chinamap',
roam: true, // 鼠标滚轮缩放
}
}
mycharts.setOption(option)
})
常见效果
-
地图拖动缩放 roam
-
默认显示标签 也即是地图标注 label
-
初始化缩放比例 zoom 接受数值为放缩倍数
-
地图中心点 center 接受数组 值为中心点的经纬度坐标
-
视觉映射 visualMap 设置地图数据不同颜色的视觉映射
visualMap: { left: 'right', // 距离左侧的距离 可以接受数值 min: 500000, // 数值最小值 max: 38000000, inRange: { // 颜色映射渐变范围 color: [ '#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026' ] }, text: ['High', 'Low'], // 标签 calculable: true // 数值筛选 }, -
与散点图结合 坐标点使用的坐标系统 coordinateSystem
'polar'表示使用极坐标'geo'表示使用地图坐标，geoIndex: 0 , 确定结合的地图对象 散点图数据为二维 前两维表示坐标，若使用三维最后一维表示值，则需要encode 编码表示 tooltipencode: { tooltip:2 // tooltip 所展示的维度 }
雷达图
基本实现
代码
option = {
radar: {
indicator: dataMax, // 每个维度的最大值 name:'功能',max:100
},
series: [
{
type: 'radar',
data: [
{
name: '华为手机1',
value: [80, 90, 80, 82, 90]
},
{
name: '小米手机1',
value: [70, 82, 75, 70, 78]
}
]
}
]
}
常见效果
- 面积效果 areaStyle 设置每一个曲线围成的阴影面积
- radar中的shape 设置 支持
'polygon'和'circle' - 类似的有 itemStyle lineStyle等点线设置
总结
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
