折线图的使用
使用最新的echarts
版本,引入script
文件
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.0/echarts.min.js"></script>
html
中放置一个div
便可
js:
// 1.实例化对象
var myselect = document.getElementById("yearSelectqye"); //获取select对象,括号里为id
let months = ['一月', '二月', '三月', '四月', '五月', '六月', '七月','八月','九月','十月','十一月','十二月']
// 2.指定配置项和数据
var option = {
legend: {
// orient 设置布局方式,默认水平布局,可选值:'horizontal'(水平) ¦ 'vertical'(垂直)
orient: 'horizontal',
// x 设置水平安放位置,默认全图居中,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}(x坐标,单位px)
x: 'left',
// y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单位px)
y: 'top',
data: []
},
// 图表距边框的距离,可选值:'百分比'¦ {number}(单位px)
grid: {
top: '16%', // 等价于 y: '16%'
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
// 提示框
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
confine:true,
axisLine: {
lineStyle: {
// 设置x轴颜色
color: "rgba(255,255,255,0.6)",
width: 2
// color: '#912CEE'
}
},
// 设置X轴数据旋转倾斜
axisLabel: {
rotate: 30, // 旋转角度
interval: 0 //设置X轴数据间隔几个显示一个,为0表示都显示
},
// boundaryGap值为false的时候,折线第一个点在y轴上
boundaryGap: false,
data: months
},
yAxis: {
name: '单位:(万元)',
type: 'value',
// min:0, // 设置y轴刻度的最小值
// max:1800, // 设置y轴刻度的最大值
// splitNumber:9, // 设置y轴刻度间隔个数
axisLine: {
color: "rgba(255,255,255,0.6)",
fontSize: 10
},
axisLine: {
show:true,
lineStyle: {
color: "rgba(255,255,255,0.6)",
width: 2
}
},
// y轴分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)"
}
}
},
series: [
{
data: nums,
type: 'line',
},
],
color: ['#FFD700']
};
myChart.setOption(option);
// 4.让图表随屏幕自适应
window.addEventListener('resize', function () {
myChart.resize();
})