<div id="line-chart" style="width: 520px; height: 250px"></div>
init () {
const LineChart = this.$echarts.init(document.getElementById('line-chart'), null, { renderer: 'svg' })
let option = {
grid: {
bottom: 35,
left: 40,
right: 0,
top: 40
},
legend: {
align: 'left',
top: '0',
left: 'left',
icon: 'rect',
itemWidth: 8,
itemHeight: 2,
textStyle: {
color: '#8C8C8C',
fontSize: 12
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
show: true,
interval: 0,
alignWithLabel: true
},
axisLabel: {
show: true,
interval: 0,
color: 'rgba(0,0,0,0.45)',
fontSize: 12
}
},
yAxis: {
type: 'value',
splitNumber: 7,
axisLabel: {
color: 'rgba(0,0,0,0.45)',
fontSize: 12
},
axisLine: {
show: true
},
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
label: {},
tooltip: {},
series: [
{
name: `LOL`,
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
symbol: 'circle',
color: ['#0088FF'],
symbolSize: 6,
label: {
show: true,
color: '#666',
fontSize: 12,
position: [5,-10]
},
},
{
name: `CF`,
data: [220, 182, 191, 234, 290, 330, 310],
type: 'line',
symbol: 'circle',
color: ['#F5A72A'],
symbolSize: 6,
label: {
show: true,
color: '#666',
fontSize: 12,
position: [5,-30]
},
},
]
}
LineChart.clear();
setTimeout(() => {
LineChart.setOption(option)
}, 100)
}