一直想写这一篇来着，用于记录工作中遇到的一些比较有意思的图表， 会不定时更新这篇文章
温度计
主要代码就是两个x轴， 温度计外壳bar, 温度计温度值， 小红点， mark 等
option = {
xAxis: [
{
...
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月"],
},
{
name: '单位',
data: []
}
],
series: [
{
name: '销号目标',
type: 'bar',
data: [0, 0, 0, 0, 0, 0],
barWidth: 0,
markLine: {
symbol: 'none',
silent: true,
lineStyle: {},
label: { position: 'start' },
data: [
{
yAxis: 1000, //70,
lineStyle: {
width: 1.656,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: '#0e2c57'
},
{
offset: 1,
color: '#3092f4'
}
])
},
label: { show: false }
},
[
{ name: '', x: '12%', y: '93%' }, //标线1起点
{ name: '', x: '93%', y: '43%' } //标线1终点
]
]
},
markPoint: {
silent: true,
label: { fontSize: 10 },
data: [
{
yAxis: 1000, //70,
x: '95%',
symbolSize: 0.1,
label: {
textStyle: { color: '#fff' },
padding: [5, 8.28],
fontSize: 10,
borderRadius: [13.248, 0, 0, 13.248],
backgroundColor: '#3092f4',
position: 'left',
formatter: '目标'
}
}
]
}
},
{
name: '外框',
type: 'bar',
xAxisIndex: 0,
barGap: '-100%',
tooltip: none,
data: [1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500, 1500],
barWidth: 10,
itemStyle: {
borderColor: '#33a0e5',
borderWidth: 1,
color: '#01274b',
barBorderRadius: 45,
backgroundColor: '#01274b'
},
z: 0
},
{
//细柱
name: '年度销号完成量',
type: 'bar',
xAxisIndex: 0,
barGap: '-60%',
data: [200, 300, 400, 500, 600, 700, 800, 850, 900, 800, 1200],
barWidth: 2,
itemStyle: {
color: function(params) {
return '#3196fa'
}
},
z: 2
},
{
name: '年度销号完成量',
type: 'scatter',
hoverAnimation: false,
symbol: 'roundRect',
data: [200, 300, 400, 500, 600, 700, 800, 850, 900, 800, 1200],
symbolSize: [5, 15],
symbolOffset: [9, 1],
itemStyle: {
color: function(params) {
if (params.data > 1000) {
return '#3196fa'
} else {
return '#fa4e2e'
}
},
opacity: 1
},
z: 2
}
]
}
堆叠柱状图
这种图表主要精髓就在series的 stack
series = [
//第一节
{
name: '李白',
type: 'bar',
//渐变色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(112, 247, 254, 1)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(112, 247, 254, 0.6)' // 50% 处的颜色
},
{
offset: 1,
color: 'rgba(112, 247, 254, 0.1)' // 100% 处的颜色
}
]
},
barWidth: 28,
data: [90, 45, 120, 80, 90, 40]
},
{
name: '杜甫',
type: 'bar',
//渐变色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(35, 144, 255, 0.6)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(35, 144, 255, 0.6)' // 50% 处的颜色
},
{
offset: 1,
color: 'rgba(35, 144, 255, 0.6)' // 100% 处的颜色
}
]
},
barWidth: 28,
data: [40, 40, 40, 40, 40, 40],
},
{
name: '白居易',
type: 'bar',
//渐变色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(108, 252, 94,0.6)' // 0% 处的颜色
},
{
offset: 0.5,
color: 'rgba(108, 252, 94,0.6)' // 50% 处的颜色
},
{
offset: 1,
color: 'rgba(108, 252, 94,0.6)' // 100% 处的颜色
}
]
},
barWidth: 28,
barCategoryGap: '40%', //柱间距， 最后一个bar 设置才生效
data: [70, 70, 70, 70, 70, 70],
}
]
小帽子
series = [
{
type: 'bar',
barWidth: '35%',
showBackground: true,
backgroundStyle: {
color: '#xxx' //柱子背景色
},
itemStyle: {
color: '#xxx' //柱子中间进度颜色
},
data: dt
},
{
type: 'pictorialBar', // 象形柱图
symbol: 'rect',
symbolSize: ['50%', 3],
symbolOffset: [0, -3],
symbolPosition: 'end',
itemStyle: {
color: '#xxx' //上方帽子颜色
},
data: dt //与上面那个值相同
}
]
伪3D柱状效果
原理跟上面帽子类似， 需要改变帽子形状， 并且新增一列侧边数据
series = [
{
type: 'bar',
barWidth: 25,
itemStyle: {},
data: [...],
barGap: 0, //不同系列柱子距离
},
// 帽子
{
type: 'pictorialBar',
itemStyle: {},
symbol: 'path://M 0,0 l 120,0 l -30,60 l -120,0 z',
symbolSize: ['37', '12'],
symbolOffset: ['-1', '-8'],
symbolPosition: 'end',
data: data,
z: 3
},
//侧边列
{
type: 'bar',
barWidth: 12,
itemStyle: {},
barGap: 0,
data: data.mao( item => item+=3)
}
]
电池效果
series = [
//里面的小长方形-进度值
{
type: 'pictorialBar',
symbol: 'fixed',
symbolSize: [7, 10], //小长方形长宽
symbolMargin: 2,
symbolRepeat: 'repeat',
barWidth: 6,
z: 2,
itemStyle: {
color: {...},
},
data: [...]
},
//底层背景半透明的小长方形
{
barWidth: 6,
type: 'pictorialBar',
symbol: 'fixed',
symbolSize: [7, 10],
symbolMargin: 2,
symbolRepeat: 'repeat',
barGap: '-100%',
itemStyle: {
color: '#eaeaea',
},
data: [total, total, total, total, total],
z: 1,
}
]
特殊圆环
其中阴影内圈，可以通过变量定位上去
series = [
//主环
{
type: 'pie',
hoverAnimation: false,
color: [...],
center: ['25%', '50%'],
radius: ['43%', '70%'],
avoidLabelOverlap: false,
label: null,
emphasis: null,
labelLine: null,
itemStyle: {
borderWidth: 5, // 间距的宽度
borderColor: 'rgba(0, 0, 0, 0.6)' //背景色
},
data: this.series
},
//外围狐线
{
type: 'pie',
silent: true,
z: 1,
startAngle: 110,
label: null,
clockWise: false, //顺时加载
hoverAnimation: false, //鼠标移入变大
radius: ['74%', '78%'], //决定狐线宽度
center: ['25%', '50%'], //与上面圆环中心要同一个点
data: [
{
value: 20,
itemStyle: {
color: '#33ffbb'
}
},
{
value: 90, //决定弧线长度
itemStyle: {
color: 'rgba(0,0,0, 0)' //除了这个狐线， 剩下的圆弧全部设成透明
}
}
]
}
]
雷达
<div ref="radar"></div>
<script>
import * as echarts from 'echarts'
export default {
computed: {
indicatorData() {
return this.list.map(v => {
return {
name: v.name,
min: this.min,
max: this.max,
//color: ''
}
})
},
interval() {
return (this.max - this.min) / this.splitNumber //每个指标间隔数
}
},
data() {
return {
myChart: null,
unit: '战力',
min: 0, //指标线最小值
max: 100, //指标线最大值
splitNumber: 4, //指标线刻度
color: ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff'],
list: [
{name: '破坏神', value: 80},
{name: '布欧', value: 60},
{name: '孙悟空', value: 85},
{name: '贝吉塔', value: 80},
{name: '大神官', value: 90},
],
}
},
methods: {
//雷达图-外侧虚线
setgauge(i) {
return {
type: 'gauge',
detail: false,
splitNumber: 10, //刻度数量
radius: '90%', //图表尺寸
center: ['50%', '50%'],
startAngle: 90 + 72 * i + 18, //开始刻度的角度
endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
axisLine: null,
axisTick: {
show: true,
lineStyle: {
color: '#66ccff',
width: 1
},
length: 6,
splitNumber: 1
},
splitLine: null,
axisLabel: null
}
},
// 雷达图中个性化散点设置
setSpot() {
var scatterData = []
this.list.forEach((o, i) => {
scatterData.push({
value: o.value,
itemStyle: {
color: this.color[i],
borderColor: '#fff',
borderWidth: 1,
shadowColor: this.color[i],
shadowBlur: 8
}
})
})
return scatterData
},
init() {
let option = {
polar: {
center: ['50%', '50%'],
radius: '60%'
},
tooltip: {
trigger: 'item',
textStyle: {
align: 'left',
color: '#fff'
},
backgroundColor: 'rgba(16, 32, 40, 0.88)',
borderRadius: 4,
borderColor: '#20749e',
formatter: params => {
return params.marker + this.list[params.dataIndex].name + ' ' + params.value + this.unit
}
},
radar: {
shape: 'circle',
center: ['50%', '50%'],
radius: '60%',
indicator: this.indicatorData,
axisName: {
color: '#b7e9fd',
fontSize: 12,
padding: -12
},
nameGap: 20,
splitNumber: this.splitNumber,
splitArea: {
// 坐标轴在 grid 区域中的分隔区域，默认不显示。
show: true,
areaStyle: {
// 分隔区域的样式设置。
color: ['rgba(27, 50, 66, 0.4)']
}
},
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0'
}
},
splitLine: {
lineStyle: {
color: 'rgba(99,192,251,0.2)', // 分隔线颜色
width: 2 // 分隔线线宽
}
}
},
angleAxis: {
type: 'category',
data: name,
minInterval: 1,
boundaryGap: false,
clockwise: false,
axisTick: null,
axisLabel: null,
axisLine: null,
splitLine: null
},
radiusAxis: {
min: this.min,
max: this.max,
interval: this.interval,
splitLine: null,
axisTick: null,
axisLine: {
//指向外圈文本的分隔线样式
lineStyle: {
color: '#5aa3d0'
}
},
axisLabel: {
fontSize: 10,
color: '#5aa3d0',
align: 'left',
margin: -5
}
},
series: [
...this.list.map((item, index) => {
return this.setgauge(index)
}),
{
type: 'scatter',
coordinateSystem: 'polar', //用极坐标系
symbolSize: 8,
data: this.setSpot()
}
]
}
this.$nextTick(() => {
this.myChart = echarts.init(this.$refs['radar'])
this.myChart.setOption(option)
})
}
}
}
</script>
