<template>
<div id="myChart" class="notfound"></div>
</template>
<script>
var data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];
Data.Map dateList = var (function (Item) {
return Item [0];
});
var = valueList Data.Map (function (Item) {
return Item [. 1];
});
Export default {
name: 'zheixnatu' ,
Data () {
return {
}
},
Mounted () {
this.drawLine ();
},
Methods: {
the drawLine () {
// based ready dom, initialization echarts examples
. let myChart = this $ echarts.init ( document.getElementById ( 'myChart'))
// charting
myChart.setOption ({
// the Make Line gradient here Wallpaper
the backgroundColor: [ '# 081 944'], // default background full FIG.
grid: [{
bottom: '60% '
}, {
Top: '60%'
}, {
Show: to true,
borderWidth:. 1,
the borderColor: '# FF0000' border color grid @
}],
// visual mapping assembly for conduct "visual coding"
visualMap: [{
show: false, // whether to show visualMap-piecewise components. If set to false, it will not be displayed, but the data mapping function there.
type: 'continuous', // is defined as a continuous visualMap
seriesIndex: 0, i.e., data which series // which series series.data take specified. The default take all series
min: 0, // the specified minimum visualMapPiecewise component.
max: 400
}, {
Show: to false,
type: 'Continuous'
seriesIndex:. 1,
Dimension: 0,
min: 0,
max: dateList.length -. 1
}],
title: [{
left: 'Center',
text: 'The Gradient Along Axis Y'
}, {
Top: '55% ' ,
left: 'Center',
text: 'The Gradient Along axis x'
}],
// balloon assembly
ToolTip: {
trigger:' Axis' // trigger type. The trigger axis is mainly used in the graph uses the category axis histogram, line chart, etc. / none nothing trigger
},
XAXIS:
Data: dateList,
Show: // whether the x-axis to false
}, {
Data: dateList,
gridIndex: grid index 1 // x-axis where the default is in the first grid.
}],
YAXIS: [{
nameTextStyle: {// axis name text style.
Color: '# 63B8FF',
fontWeight: 'Bold', // axis name text font thickness of
the fontSize: 15
},
name: 'number of times the heart rate',
SplitLine: {
Show: to true, // X-axis, y-axis shows the network ruled lines, coordinate axes grid region dividers
the lineStyle: {
// interval using shades of color - the color of the dividing line, may be provided in a single color. Array of colors may be provided, the dividing line will be in the order of the color array are sequentially set the color cycle.
Color: [ '# FF0000', '# BCEE68']
}
}
}, {
SplitLine: Show {:} to false,
gridIndex:. 1
}],
// series list. Each series decided by its own type of chart types
Series: [{
type: 'Line', // line
showSymbol: false, // whether to display the symbol symbol, if false only when displayed in the tooltip hover.
Data: valueList
}, {
type: 'Line',
showSymbol: to false,
Data: valueList,
xAxisIndex:. 1,
yAxisIndex:. 1
}]
});
}
}
}
</ Script>
<style scoped>
.notfound {
width: 800px;
height: 800px;
}
</style>
