步骤一:布局设置宽高
<div id="orderline" style="width:400px;height:400px"></div>
步骤二:获取DOM
mounted(){
this.getOrderLine()
}
methods:{
getOrderLine() {
let myChart = this.$echarts.init(document.getElementById('orderline'))
myChart.setOption(
{
xAxis: {
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
boundaryGap: false,
nameTextStyle: {
color: '#fff',
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: '#66FFFF',
type: "solid",//设置坐标轴为实线
},
},
axisLabel: {
interval: 0,
textStyle: {
color: '#ccc',
fontSize: '12',
},
},
},
yAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed',//设置刻度线条为虚线
width: 1,
color: 'rgba(255,255,255,0.1)'
},
show: true,
},
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontSize: '12',
},
},
},
lineStyle: {
color: {
//设置线条渐变
colorStops: [
{
offset: 0,
color: '#0E5FFF',
},
{
offset: 0.5,
color: '#00F2EF',
},
{
offset: 1,
color: '#0E5FFF',
},
],
},
},
series: [
{
symbol: 'none',
data: [
202, 250, 100, 300, 280, 600, 300, 250, 180, 500, 400, 260,
],
type: 'line',
smooth: true,
},
],
},
true
)
},
}
示例: