echarts
// 绘制渠道折线图
drawChannelLine (channelLine, channelData, legendData, seriesData) {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(channelLine)
// 绘制图表
myChart.setOption({
color: ['#03d4c2', '#ffbb30', '#33ca40', '#0478fb', '#f45184', '#6753e2', '#e764ff', '#01d9fc', '#ee342e', '#9e98ff'],
xAxis: {
type: 'category',
boundaryGap: false,
data: channelData,
// data: this.channelLineTime,
axisLabel: {
textStyle: {
color: '#a5c0df', // 更改坐标轴文字颜色
fontSize: 12 // 更改坐标轴文字大小
}
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: '#072a76' // 更改坐标轴颜色
}
}
},
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#a5c0df', // 更改坐标轴文字颜色
fontSize: 12 // 更改坐标轴文字大小
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
// 网格线
splitLine: {
show: true,
lineStyle: {
color: ['#072a76'],
width: 1,
type: 'solid'
}
}
},
tooltip: { // 提示框自定义
trigger: 'axis',
formatter: function (params, ticket, callback) {
let str = `<div style="text-align:left;"><p>${params[0].axisValue}</p>`
params.forEach(item => {
str += `<p>${item.seriesName}签发量：${item.value}</p>`
})
str += `</div>`
// let str = `<p>今日实时签发：${params[0].value}张</p><p>今日累计签发：9000张</p>`
return str
}
},
legend: {
icon: 'rectangle',
itemWidth: 10,
itemHeight: 10,
itemGap: 18,
data: legendData,
right: '4%',
top: 5,
selectedMode: false,
textStyle: {
color: '#a5c0df'
}
},
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 50
},
{
type: 'inside',
realtime: true,
start: 0,
end: 50
}
],
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top: '18%',
// borderColor: '#ff0000',
// borderWidth: 10
containLabel: true
},
series: seriesData
})
},
