最近一直在做数据可视化展示的项目，设计图那叫一个酷炫酷炫酷炫(此处省略一万个字)......
每次去实现一个小小的样式的时候，都要去翻...文...档...
嗯哼~也可能是因为我不熟悉文档的原因，翻看文档->找相关api/去网上搜索/看相关实例里面有没有相近的效果的例子->...这个过程花费了我不少的时间（and耐心），而且我发现网上的相关总结的文章也不太多，不知道你是否也遇到过相同的情况，在最近这个项目即将接近尾声的时候，我觉得应该写篇总结了，方便以后在做项目能快速的找到相关的设置:-D
折线图和柱状图
折线图和柱状图的相关设置基本上很相近，这里就以折线图的一个案例为栗子写相关设置总结了:）
效果如下： （有些样式可能不太完美，可以根据自己的思路做完善。我这里只是简单的提供一个不太完美的样式o(╯□╰)o）
代码块如下：
//数据
var YName = ["周五", "周六", "周日", "周一"]
var XName = ["周五", "周六", "周日", "周一", "周二", "周三", "周四"]
var data1 = [
[400, 300, 600, 400, 300, 400, 800],
[230, 194, 234, 321, 300, 510, 734]
]
var img = [
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
'image://data:image/png;base64,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'
]
var iconimg = [
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABRCAYAAABFTSEIAAAACXBIWXMAAAsSAAALEgHS3X78AAAEp0lEQVR42u3cz4sjRRTA8W9Vd3Vn8mMmjj9WQWSRZQ+CsH+B7MnDIgiCd0E8CYJ/gOAIelo8ehUP/gF6WLw5/gMueFP2sIcF0dHd2Z1kknR11fOQZJJJMtlZd03H7HtQpNOTnpn+8Lrm1etmjIig8e/DKoECKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIqoAJudKTr+osZMNPvBUQBHwHsPF9fB9R0DeHMOQ6T6WOrhEzXBM4swDOL0M6CrArRVoq3t2dGUIb9fTvatg8ZZup1PDBgzPmy98mey6qfzjLz2WaWjEUZKEvGyi9nWyneMOvGIyFQo2Sbg4MUSChpU9IeTTUpJdsEajPZOJeJG5uBZj7rLLduWS5dGm6XNLEELOFUFj54ACJCaychkpDSASK3bwsXL0YgVpWJKwM0iy9Zy8HdGru7jvt3Pbu7w0wES7drTwAbjTHMGCsQcIAnYTC1/wRx0wEnl27JNgZI8HQ6Kc1mQq83RNzaMjPzXqDbjTQaJRFLxIyyMSxAXEkWrhrQzAAmo5HOjCQf7jflILxOkohL+aUPgV4vEGNJo+E5PAy02+UIMEwBxo0CPDP7Dg5SnEtpt1PA0e87XO25FOoh8IYIH2Y5b45RzGAQBiIltZoHxqMcjbksXAVgdc2EQMYzzzdotyeZWKuleULXJtwT4SODfC2QCWR+IF9KnjuX1Xbo99Op7LVE8iXlz0YBTk5SyLEEjo5OLuccEoFUvHfO+reuUPx4zftXAIcx1hdcF+/TvFab4A0Bs0VwqyhpVnkJT89/Q4DDQ0e77YCMwIUsFMeFZD856699URRvX4nxE4A/jbnxXp7v4Zw3ReGNSDHI8wFQjIafuoyn58L/fB6sth/Ybg9fez2TRC6QZcZYvgHsazF+MP7YCyLXcM7gvSXLDGBqYDg+NhwdmSpPoTrAkub0W+f4FSB1fDucIunMHSLpO8WAH0rSy8u+19MBCHB4OHzd2pI+CEUhpigEiN+l6WcdY252jLn5s7Wf472ImPcN8pUl/tEHoV4XWq1Ke4KrLmPsTA3oODpytFoOyJKSyzHyMSIxteWngMW5cSEdDJQUhTdZVgxOz3/+jFJm4+bA2e5JpNU6WZ4Fw99JwnWMKccwpeddP+B7GZTNUPKqybJy0O+Hs1YfMz9swwvpB8fbGDG0GuGkkK7V0hxSmZQpABI8l2z0v3sJf50qpAMJCd2qCulql3LD1lRGQjm7lEsDz0rkxTQOfiPPxUBcuJTbbhss/Y1eyi3NwsmKInmkZsKk5gtPUzNhvp11507CSy/X6XYStpvFudpZw1ZWIOF4Cq6SdtbKbioJyAhRTu3u9yMJXerN+ugvaQQsjcZ8Q3VnZwxlSDhe1lB9GjrSw5b+1avT8+Jw+979nNaOI6U3KpTrWAosxVQmygK4ld8X0ZtK/7eViExD7O1NQPb3T7fsl4/4sBpwYzPwjFbTo95Yl9l9Vd1YN1X/147HebSjary1AHyc5qc+XLQEQx9ve8Kg6xr6hKoCKqACKqCGAiqgAiqghgIqoAIqoIYCKqACKqCGAiqgAiqghgIq4JrHP8fEWV8FMTmOAAAAAElFTkSuQmCC',
'data:image/png;base64,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'
]
// X轴的数据样式
function Getxnum(data, iconnum) {
var xnum = []
xnum = data.map(item => {
return {
value: item,
textStyle: {
color: 'rgba(255, 255, 255, 0.80)'
}
}
})
for (var i = 0; i < (iconnum.length - 1); i++) {
xnum[i].textStyle.color = 'rgba(255, 255, 255, 0.50)'
}
return xnum
}
// 分割线的数据处理
function Getbar(res, nownum) {
var cutoff = []
cutoff = nownum.map(info => {
return {
value: undefined,
label: {
normal: {
show: false
}
}
}
})
cutoff[cutoff.length - 1] = {
value: Math.max(...res),
label: {
normal: {
show: true
}
}
}
return cutoff
}
option = {
backgroundColor: 'rgba(14, 33, 71, 0.90)',
grid: {
left: '10%',
top: '10%',
bottom: '10%',
right: '10%',
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#57617B'
}
},
formatter: function(params) {
if (params.length === 1 && params[0].componentSubType === 'bar') {
return
}
//这里可以用你觉得合适的其它方式实现，样式可以再去完善，我这里只是举个例子，就不详细调整了
return params[0].name + '<br>' + '<img src="' + iconimg[0] + '" alt="icon" style="width: 120px;height: 120px;margin: -45px -40px;"/>' +
params[0].value +
'<br/>' + '<img src="' + iconimg[1] + '" alt="icon" style="width: 120px;height: 120px;margin: -45px -40px;"/>' +
params[1].value
}
},
legend: {
// 设置图标显示的位置
x: '21%',
y: 'top',
itemGap: 25,
data: [{
name: '数据1',
textStyle: {
color: '#FF4141',
fontSize: 18
}
}, {
name: '数据2',
textStyle: {
color: '#4BFC48',
fontSize: 18
}
}],
itemWidth: 150,
itemHeight: 150
},
yAxis: [{
type: 'value',
position: 'left', // 默认 grid 中的第一个 y 轴在 grid 的左侧（'left'），第二个 y 轴视第一个 y 轴的位置放在另一侧。
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(135,140,147,0.8)'
}
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(75, 252, 72, 0.60)'
}
},
axisTick: { // 坐标轴刻度相关设置。
show: false
},
axisLabel: {
fontSize: 18,
margin: 20
}
},
{
type: 'value',
position: 'right',
splitLine: {
lineStyle: {
type: 'dashed',
color: 'rgba(135,140,147,0.8)'
}
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255, 65, 65, 0.60)'
}
},
axisTick: { // 坐标轴刻度相关设置。
show: false
},
axisLabel: {
fontSize: 18,
margin: 20
}
}
],
xAxis: [{
type: 'category',
boundaryGap: false,
data: Getxnum(XName, YName),
axisLine: { // 坐标轴轴线相关设置。
lineStyle: {
color: 'rgba(255, 255, 255, 0.2)'
}
},
axisTick: { // 坐标轴刻度相关设置。
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
},
axisLabel: { // 坐标轴刻度标签的相关设置。
fontSize: 16,
show: true,
// interval: 0, // 强制设置坐标轴分割间隔（设置为0时，可强制X轴按照接口返回的全部数据都展示）。
// rotate: 60, // 文字旋转角度
margin: 10
}
}],
series: [{
name: '数据1',
zlevel: 0,
yAxisIndex: 0, // 使用的 y 轴的 index，默认值为0
type: 'line',
symbol: img[0],
symbolSize: 150,
smooth: true,
color: '#4bFC48',
// symbol: 'circle',
showSymbol: false,
// lineStyle: {
// normal: {
// width: 4
// }
// },
areaStyle: { // 区域填充样式
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 填充的颜色。
offset: 0, // 0% 处的颜色
color: 'rgba(137, 189, 27, 0.3)'
}, {
offset: 1, // 100% 处的颜色
color: 'rgba(137, 189, 27, 0)'
}], false)
// shadowColor: 'rgba(0, 0, 0, 0.1)', // 阴影颜色。支持的格式同color
// shadowBlur: 10 // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
}
},
itemStyle: {
normal: {
borderColor: 'rgba(137,189,2,0.27)',
borderWidth: 6
}
},
lineStyle: {
normal: {
color: 'rgba(75, 252, 72, 0.30)', // 线条颜色
width: 4
}
},
data: data1[0]
},
{
name: '数据2',
zlevel: 1,
yAxisIndex: 1,
type: 'line',
symbol: img[1],
symbolSize: 150,
smooth: true,
stack: '总量',
color: '#FF4141',
showSymbol: false,
areaStyle: { // 区域填充样式
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 填充的颜色。
offset: 0, // 0% 处的颜色
color: 'rgba(219, 50, 51, 0.3)'
}, {
offset: 1, // 100% 处的颜色
color: 'rgba(219, 50, 51, 0)'
}], false)
// shadowColor: 'rgba(0, 0, 0, 0.1)', // 阴影颜色。支持的格式同color
// shadowBlur: 10 // 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
}
},
itemStyle: { // 折线拐点标志的样式
normal: {
borderColor: 'rgba(219,50,51,0.2)', // 图形的描边颜色。支持的格式同 color
borderWidth: 6 // 描边线宽。为 0 时无描边。[ default: 0 ]
}
},
lineStyle: {
normal: {
color: '#FF4141', // 线条颜色
width: 4
}
},
// symbol: 'circle',
axisTick: {
show: true // 是否显示坐标轴刻度
},
label: {
normal: {
position: 'top'
}
},
data: data1[1]
},
{
type: 'bar',
zlevel: 2, // 用于 Canvas 分层
barWidth: 1,
data: Getbar(data1[0], YName),
label: {
normal: {
show: true,
position: 'insideBottomRight',
formatter: '日\n期\n分\n割\n线',
distance: 0,
offset: [8.5, -450],
fontSize: 8,
color: 'rgba(255, 255, 255, 0.70)',
textAlign: 'center',
lineHeight: 10,
borderRadius: 10,
padding: [5, 5, 5, 5],
backgroundColor: 'rgba(0, 0, 0, 0.70)'
}
},
itemStyle: {
normal: {
color: 'rgba(0, 0, 0, 0.50)'
}
}
}
]
}大部分的需求已经满足了，感觉好像哪里少了点东西，是哪里呢？思考ing......
啊！对！还有一个比较常见的需求就是点击折线图的一个时间点，然后做相关的数据联动，补充一下代码，如下：
myChart = echarts.init(document.getElementById(xxx))
let option = { ....此处代码同上option... }
// 点击
myChart.on('click', function (params) {
.......一系列操作.......
}
pieChart.setOption(option)
ok，到这里就基本上算是完整了，如果发现里面有什么写的不对的地方，还望指正，抱拳~
如果你看了之后对你有些许帮助，请帮忙动动小手指，帮俺点个赞~\(≧▽≦)/~万分感谢！
最后的（一万朵）花花，送给看到最后的ni~~~
❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀❀......
