var option = {
// backgroundColor:'#fff',
// color: colors, //下面这种直接配置演示也行
color: ['#00b0ff', '#029768', '#29CEFF', '#F9993A'], //依次选择颜色，默认为第一个颜色，多根柱子多个颜色
xAxis: {
boundaryGap: true,
data: ['12月1日', '12月2日', '12月3日', '12月4日', '12月5日', '12月6日', '12月7日', '12月8日', '12月9日', '12月10日', '12月11日', '12月12日', '12月13日', '12月14日', '12月15日', '12月16日', '12月17日', '12月18日', '12月19日', '12月20日', '12月21日', '12月22日', '12月23日', '12月24日', '12月25日', '12月26日', '12月27日', '12月28日', '12月29日', '12月30日', '12月31日',],
splitLine: {
show: false,
lineStyle: {
color: "#EFF0F1"
}
},
axisLine: {
show: true,
lineStyle: {
color: "#155dae"
}
},
axisTick: {
show: false
},
axisLabel: {
show: true,
margin: 20,
textStyle: {
color: '#87acfa',
fontSize: "24",
}
},
},
legend: {
itemWidth: 24,
itemHeight: 21,
bottom: 15,
itemGap: 100,
data: [{
name: '货量',
textStyle: {
color: '#e9f0ff',
fontSize: 22,
padding: [0, 0, 0, 5]
},
itemStyle: {
color: '#ffa800',
borderColor: '#ffa800'
},
}, {
name: '货量趋势',
textStyle: {
color: '#e9f0ff',
fontSize: 22
},
itemStyle: {
borderColor: '#ffa800'
},
lineStyle: {
color: '#ffa800'
}
},],
},
tooltip: {
trigger: 'axis',
type: 'line',
backgroundColor: 'transparent',
formatter: function (params) {
// console.log(params)
return `
<div style="width: 195px;height:156px;padding:16px 0 0 16px;background-color: #020304;border-radius: 10px;border: solid 1px #00b0ff;">
<div style="display:flex;align-items: center;margin-bottom:12px;">
<div style="width: 11px;height: 11px;margin-right:5px;background:#87acfa;border-radius:50%"></div>
<div style="font-size: 18px;margin-right:42px;margin-left:8px;">日期</div>
<div class="f-DC" style="font-size: 16px;color: #87acfa;text-align:right;width:43px">2022.12.1</div>
</div>
<div style="display:flex;align-items:center;margin-bottom:12px;">
<div style="width: 11px;margin-right:5px;height: 11px;background:#009eff;border-radius:50%"></div>
<div style="font-size: 18px;margin-right:32px;margin-left:8px;">高峰</div>
<div class="f-DC" style="font-size: 20px;color: rgba(1, 138, 92, 1);text-align:right;width:44px;color:#009eff">${params[0].data[1]}</div>
<div style="font-size: 14px;margin-left:10px;">吨</div>
</div>
<div style="display:flex;align-items:center;margin-bottom:12px;">
<div style="width: 11px;margin-right:5px;height: 11px;background:#009eff;border-radius:50%"></div>
<div style="font-size: 18px;margin-right:32px;margin-left:8px;">低谷</div>
<div class="f-DC" style="font-size: 20px;color: rgba(1, 54, 143, 1);text-align:right;width:44px;color:#009eff">${params[0].data[2]}</div>
<div style="font-size: 14px;margin-left:10px;">吨</div>
</div>
<div style="display:flex;align-items:center;margin-bottom:0px;">
<div style="width: 11px;margin-right:5px;height: 11px;background:#ffa800;border-radius:50%"></div>
<div style="font-size: 18px;margin-right:15px;margin-left:8px;">平均值</div>
<div class="f-DC" style="font-size: 20px;color: rgba(214, 175, 38, 1);text-align:right;width:44px;color:#ffa800">${params[1].value}</div>
<div style="font-size: 14px;margin-left:10px;">吨</div>
</div>
</div>
`
}
},
grid: {
top: '20%',
left: '2%',
right: '2%',
bottom: '14%', //网格图（柱状图、折线图、气泡图等）离底部的距离，也可以用像素比如10px
containLabel: true //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false
},
yAxis: {
name: '吨',
nameTextStyle: {
color: '#c3d5f8',
fontSize: 22,
padding: [0, 70, 0, 0]
},
nameGap: 20,
axisTick: {
show: true
},
axisLabel: {
show: true,
textStyle: {
color: '#c3d5f8',
fontSize: 22
},
margin: 20,
},
// data: ['1000', '2000', '3000', '4000', '5000'],
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#0b3059"
}
},
axisLine: {
show: true,
lineStyle: {
color: "#155dae"
}
},
},
series: [{
name: '货量',
type: 'candlestick',
barWidth: '20px',
itemStyle: {
color: '#1fa0e4',
color0: '#1fa0e4',
borderColor: '#207ae2',
borderColor0: '#207ae2',
},
data: [
[3738, 2320, 3738, 2320],
[3618, 2180, 3618, 2180],
[3718, 2220, 3718, 2220],
[3538, 2080, 3538, 2080],
[3638, 2120, 3638, 2120],
[3558, 2090, 3558, 2090],
[3598, 2110, 3598, 2110],
[3438, 2220, 3438, 2220],
[3738, 2120, 3738, 2120],
[3638, 2120, 3638, 2120],
[3638, 2120, 3638, 2120],
[3638, 2120, 3638, 2120],
[3738, 2320, 3738, 2320],
[3618, 2180, 3618, 2180],
[3718, 2220, 3718, 2220],
[3538, 2080, 3538, 2080],
[3638, 2120, 3638, 2120],
[3558, 2090, 3558, 2090],
[3598, 2110, 3598, 2110],
[3438, 2220, 3438, 2220],
[3738, 2120, 3738, 2120],
[3738, 2320, 3738, 2320],
[3618, 2180, 3618, 2180],
[3718, 2220, 3718, 2220],
[3538, 2080, 3538, 2080],
[3638, 2120, 3638, 2120],
[3558, 2090, 3558, 2090],
[3598, 2110, 3598, 2110],
[3438, 2220, 3438, 2220],
[3738, 2120, 3738, 2120],
[3638, 2120, 3638, 2120],
]
}, {
name: '货量趋势',
type: 'line',
data: [
3029,
2899,
2969,
2809,
2879,
2824,
2854,
2829,
2929,
2879,
2879,
2879,
3029,
2899,
2969,
2809,
2879,
2824,
2854,
2829,
2929,
3029,
2899,
2969,
2809,
2879,
2824,
2854,
2829,
2929,
2879,
],
symbol: 'circle',
symbolSize: 10,
lineStyle: {
color: '#ffa800',
width: 2,
},
itemStyle: {
normal: {
color: '#ffa800',//拐点颜色
borderColor: '#ffa800',//拐点边框颜色
borderWidth: 2//拐点边框大小
},
emphasis: { //突出效果配置(鼠标置于拐点上时)
borderColor: '#ffa800', // 拐点边框颜色
borderWidth: 2, // 拐点边框宽度
shadowColor: '#ffa800', // 阴影颜色
shadowBlur: 2, // 阴影渐变范围控制
color: '#000'//hover拐点颜色定义
},
},
smooth: false,
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#ffa800',
// color: 'rgba(137,32,200, 0.4)',
},
{
offset: 0.5,
color: 'rgba(0,0,0,0)',
// color: 'rgba(137,32,200, 0.4)',
},
{
offset: 1,
// color: 'rgba(137,32,200, 0)',
color: 'rgba(0,0,0,0)',
},
]),
},
z: 10
},
]
}