tootilp:
tooltip: {
show: true,
trigger: 'item',
formatter: function(params) {
// 返回值就是html代码可以使用标签
return `${params.data.product}</br>进场:${params.data.xx1 + '单位' } </br> 出场:${params.data.xx2 + '单位'}`
}
},
折线图:
series: [
{
data: [],
type: 'line',
symbol: 'circle',
symbolSize: 6, // 拐点圆的大小
itemStyle: {
normal: {
color: 'rgba(19, 249, 159, 0.5)', // 改变折线点的颜色
borderColor: 'rgba(19, 249, 159, 1)', // 拐点边框颜色
// 区域
areaStyle: {
// 渐变
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
// 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
{ offset: 0, color: 'rgba(7, 226, 141, 1)' },
{ offset: 1, color: 'rgba(76, 143, 243, 0)' }
])
},
lineStyle: { // 系列级个性化折线样式
width: 2,
type: 'solid',
color: 'rgba(19, 249, 159, 1)'
}
}
}
}
],
// 缩放
dataZoom: [
{
show: false, // 是否显示滑动条
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 7, // 一次性展示8个。
handleSize: 7
},
{
type: 'inside',
start: 0,
end: 3
}
]
柱状图:
series: [
{
type: 'bar',
barWidth: 10, // 柱宽
itemStyle: {
normal: {
// 颜色渐变
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0099FF'
}, {
offset: 1,
color: '#0033FF'
}])
}
}
},
{
type: 'bar',
barWidth: 10, // 柱宽
itemStyle: {
normal: {
// 颜色渐变
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#58FFB9'
}, {
offset: 1,
color: '#00908E'
}])
}
}
}
],
dataZoom: [{
show: false, // 是否显示滑动条
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
startValue: 0, // 从头开始。
endValue: 8, // 一次性展示8个。
handleSize: 8
},
{
type: 'inside',
start: 0,
end: 3
}
]