uniapp使用qiun-data-charts实现折线图

【实例简介】

uniapp使用qiun-data-charts实现折线图

【实例截图】

【核心代码】

echartOpts: {
title: [{
// show: false,
text: '温度',
top: '14',
left: 0,
textStyle: { //标题样式
fontSize: '14',
color: '#333333',
}
}, {
// show: false,
text: '(℃)',
top: '14',
left: 0,
textStyle: { //标题样式
fontSize: '14',
color: '#999999',
}
}],
tooltip: {
trigger: 'axis',
// axisPointer: {
// type: 'cross',
// animation: true,
// label: {
// backgroundColor: '#505765',
// fontSize: 12
// }
// },
},
legend: {
"show": false,
},
grid: [{
left: '3%',
right: '5%',
bottom: '5%',
containLabel: true, //这个可以实现将数据包裹在内部，不会有竖轴的值被遮盖
}],
xAxis: {
type: 'category',
// boundaryGap: true,
axisLine: {
show: false
},
axisTick: {
show: false, //是否显示网状线 默认为true
alignWithLabel: false
},
axisLabel: {
color: "#999999", //坐标轴的文本颜色
fontSize: '12',
},
textStyle: {
color: '#A2A2A2',
fontSize: 12,
padding: [30, 100, 10, 0]
},
},
yAxis: {
type: 'value',
// interval: 0.0200,
boundaryGap: false,
axisTick: {
show: false, //是否显示网状线 默认为true
alignWithLabel: true
},
axisLine: {
show: false
},
splitNumber: 6,
//网格样式
splitLine: {
show: true,
lineStyle: {
color: ['#EAEAEA'],
width: 1,
type: 'dashed'
}
},
axisLabel: {
color: "#999999", //坐标轴的文本颜色
fontSize: '12'
}
},
seriesTemplate: {
color: ['#2371FF'], //折线条的颜色
showSymbol: false, //是否默认展示圆点
symbol: 'emptyCircle', //设定为实心点
symbolSize: 2, //设定实心点的大小
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: "#2371FF", //改变折线点的颜色
borderColor: '#2371FF',
borderWidth: 1,
lineStyle: {
color: "#2371FF", //改变折线颜色
},
},
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(35, 113, 255, 0.20)'
}, {
offset: 1,
color: 'rgba(35, 112, 255, 0)'
}])
}
}
}