echarts解决⼀些⼤屏图形配置⽅案汇总
本⽂主要记录使⽤echarts解决各种⼤屏图形配置⽅案。
1
去年经常使⽤echarts解决⼀些可视化⼤屏项⽬，⼀直想记录下使⽤经验，便于⽇后快速实现。正好最近在整理⽂档，顺道⼀起记录在博客中。
2
Echarts3.0是通过配置实现图形的，根据不同的配置或者组合配置⽣成想要的图形。后⾯主要介绍options中的配置内容。
// dom表⽰对应的dom节点，必须指定宽⾼
var ec = echart.init(dom);
// 根据配置初始化图形，其中options就是配置核⼼
ec.setOption(options)
⽤于显⽰提⽰框
名称效果
trigger触发类型：item表⽰数据项，axis表⽰坐标轴触发（柱状图/折线图⽤的多）
formatter提⽰框浮层内容格式器，⽀持字符串模板和回调函数两种形式。
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类⽬值），{c}（数值）, {d}（⽆）
散点图（⽓泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（⽆）
地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（⽆）
饼图、仪表盘、漏⽃图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分⽐）
⽤于显⽰图例。
legend: {
data: data,
itemGap: 0,
itemWidth: 15,
itemHeight: 10,
bottom: -5,
left: 30,
width: '500px',
textStyle: {
color: "#fff",
fontSize: 14
}
},
⽤于显⽰坐标。
名称效果
type坐标轴类型：'value' 数值轴，适⽤于连续数据。'category' 类⽬轴，适⽤于离散的类⽬数据，为该类型时必须通过 data 设置类⽬数据
boundaryGap坐标轴两边留⽩策略
名称效果
splitNumber坐标轴的分割段数
axisLine坐标轴轴线相关设置
axisTick坐标轴刻度相关设置
axisLabel坐标轴⽂本相关设置
//纵坐标设置相似
xAxis: [{
type: 'category',
boundaryGap: false,
splitNumber: 5,
data: xAxis,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: 14
}
}
}]
更多基础使⽤，详见官⽹配置项⽂档Array
3
饼图是echart的⾃带的图形，这⾥只要把颜⾊设置⼀下就可以了。难点在于在图上再覆盖⼀个半透明的圆环，圆环是不可以有hover效果的。名称效果
name图标名称
type指明图形的类型'pie','line'等
hoverAnimation⿏标hover是否需要动画
radius饼图的半径，数组的第⼀项是内半径，第⼆项是外半径
center饼图的中⼼（圆⼼）坐标，数组的第⼀项是横坐标，第⼆项是纵坐标。
label饼图图形上的⽂本标签，可⽤于说明图形的⼀些数据信息
labelLine标签的视觉引导线样式
data渲染数据
series: [{
name: '主要致贫原因',
type: 'pie',
hoverAnimation: false,
radius: [10, radiusMax],
center: ['50%', '50%'],
label: {
normal: {
formatter: "{b} {d}%",
color: '#fff',
fontSize: 14
}
},
labelLine: {
normal: {
lineStyle: {
color: '#fff',
opacity: 0.5
},
length: 1
}
},
data: data
},
{
type: 'pie',
radius: [10, 18],
hoverAnimation: false,
center: ['50%', '50%'],
cursor: 'text',
tooltip: {
show: false
},
label: {
normal: {
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data: [{
//透明圆
value: 100,
itemStyle: {
normal: {
color: '#000',
opacity: 0.3
}
}
}]
}
]
折线图是echart的⾃带的图形，这⾥的难点在于渐变⾊的设置
名称效果
itemStyle图形样式（3.0内部必须加⼊normal）
areaStyle区域填充样式。
var option = {
//仅列举⼀个，其他2个类似
series: [{
name: type === '访问⽤户数(⼈)',
type: 'line',
itemStyle: {
normal: {
color: "#cefe56",
borderWidth: 2,
areaStyle: {
/
/渐变⾊的设置
color: aphic.LinearGradient(
0, 0, 0, 1, [{
offset: 0,
color: '#cefe56'
}, {
offset: 0.5,
color: '#6d703d'
}, {
offset: 1,
color: '#4d513a'
}]
)
},
lineStyle: {
color: "#cefe56",
width: 2
}
}
},
data: data
}
]
}
图⽰的图形在echarts中是没有原型的，由于是显⽰的刻度，因此可以考虑使⽤type:'gauge'（即仪表盘）来实现，然后隐藏所有只显⽰仪表盘分割线；通过分析可知该图形是由2个刻度圆形组成，蓝⾊刻度表⽰背景，绿⾊刻度表⽰具体的占⽐，总⽐100%。
名称效果
radius仪表盘半径
startAngle仪表盘起始⾓度
endAngle仪表盘结束⾓度
名称效果
clockwise仪表盘刻度是否是顺时针增长
min最⼩的数据值
max最⼤的数据值
axisTick刻度样式
splitNumber仪表盘刻度的分割段数
splitLine仪表盘分割线样式
axisLine仪表盘轴线相关配置
pointer仪表盘指针
detail仪表盘详情
series: [
{
//绿⾊刻度，蓝⾊刻度precent值是1
name: '脱贫⼈数占⽐',
type: 'gauge',
animation: true,
radius: '80%',
startAngle: 359.99 * precent / 100,
endAngle: 0,
clockwise: false,
min: 0,
max: 100,
axisTick: {
show: false
},
axisLabel: {
show: false,
},
splitNumber: 30 * precent / 100,
splitLine: {
show: true,
length: 7,
lineStyle: {
color: '#30c3a7',
width: 2
},
},
axisLine: {
show: false,
lineStyle: {
width: 0,
opacity: 0
}
},
pointer: {
show: false
},
detail: {
color: '#32cfaf',
formatter: '{value}%',
fontSize: 14,
offsetCenter: ['0%', '-20%']
},
title: {
show: true,
color: "#fff",
fontSize: 14,
offsetCenter: ['0%', '20%']
},
data: [{ value: precent, name: '占⽐' }],
}
]
图⽰的图形在echarts中是没有原型的，其实它提供了另外⼀个类型：象形柱图，这⾥可以通过与柱状图的结合叠加组合成效果图。即使⽤柱状图（type:bar）实现带渐变的柱状图，使⽤象形柱图（type:pictorialBar）实现中间的间隔，间隔的颜⾊与背景⾊相同，造成中间柱状图“缺失”的假象。
名称效果
barWidth柱状图显⽰宽度
itemStyle柱状图样式
symbol图形类型提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'，也可
以⾃定义指定图⽚symbolSize图形的⼤⼩
symbolMargin图形的两边间隔
名称效果
symbolRepeat指定图形元素是否重复
series: [{
name: '贫困户⼈均纯收⼊',
type: 'bar',
barWidth: '15',
itemStyle: {
normal: {
//柱状图渐变
color: aphic.LinearGradient(                0, 0, 0, 1, [
{ offset: 0, color: '#55c8fe' },
{ offset: 0.3, color: '#4dbcf6' },
{ offset: 0.5, color: '#3ca3e6' },
{ offset: 0.7, color: '#3193db' },
{ offset: 1, color: '#2683d0' }
]
),
//刻度显⽰在顶部
label: {
数据可视化大屏设计show: true,
color: '#fff',
position: 'top'
}
},
},
data: data
}, {
type: 'pictorialBar',
symbol: 'rect',
symbolSize: [15, 2],
symbolMargin: 2,
symbolRepeat: true,
itemStyle: {
normal: {
color: '#101634'
}
},
tooltip: {
show: false
},
data: data
}]