仅作为自己学习的记录。
效果如图：
代码：
<IEcharts :option="option" :style="style"></IEcharts>// 引入echarts
import IEcharts from 'vue-echarts-v3'
var colors = ['#5bc871', '#3e95e5', '#aaa', '#aecfed'];
export default {
components: {
IEcharts// 声明组件VueCoreImageUpload
}
data () {
return {
option : {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data:['昨天', '今天'] // 头部折线标题
},
grid: { //图表距边框的距离
left: '1%',
right: '1%',
bottom: '1%',
containLabel: true
},
toolbox: { // 右侧小工具
show: true,
feature: {
dataZoom: { // 缩放还原
yAxisIndex: 'none'
},
dataView: {readOnly: false}, // 切换数据视图
magicType: {type: ['line', 'bar']}, // 切换折线图柱状图
restore: {}, // 还原
saveAsImage: {} // 保存为图片
}
},
xAxis: {
type: 'category',
axisLabel:{ // 显示所有X轴数据
interval:0
},
splitLine:{show: false}, // x轴背景表格
axisTick: {
alignWithLabel: true
},
axisLine: {
onZero: false,
lineStyle: {
color: colors[2]
}
},
data: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00','07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00','14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00','21:00', '22:00', '23:00']
},
yAxis: {
default: 'none',
type: 'value',
splitLine:{ // y轴背景表格
show: true,
},
axisTick: {
alignWithLabel: true,
lineStyle: { //y轴刻度线
opacity:0
}
},
axisLine: {
show: false,
onZero: false,
lineStyle: {
color: colors[2]
}
},
},
series: [
{
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
type: 'line',
symbolSize:1, // 折线拐点大小
smooth: true,
name:'今天',
stack: '今天总量' // 名称一致会导致数据不堆叠
},
{
data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7,3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
type: 'line',
symbolSize:1,
smooth: true,
name:'昨天',
stack: '昨天总量',
}
]
}
},
style: 'width:100%;height:400px;'
}
}