<div id="echarts" style="width: 600px;height: 400px;margin-top: 100px;margin-left: 100px"></div>
js function:
this.EchartsData = this.$echarts.init(document.getElementById('echarts'));
let option1 = {
title: {
text: 'I was a line graph', // title subtext: 'I come from Fujian', // subtitle
x: 'left', // title may be set position, there is left, center, right three
textStyle: {
color: 'red', // set the color of the title fontSize: '18 '// set title font size
}
},
tooltip : {
trigger: 'axis', // default Item, when the mouse is moved to display information of the current node to the chart, if the axis is a display of information for all nodes have been within the range of the abscissa
formatter: "{a} <br/>{b}: {c} ({d}%)"
Axis pointer: {
type: 'cross', // set the mouse to move to the dotted line have the current node identifier of abscissa and ordinate of this node, there is a Shadow, all nodes within the information currently displayed range of the abscissa
label: {
backgroundColor: 'red' // set the background color of the abscissa and ordinate of the current node, the current node sitting projection
}
}
},
grid: {// set the distance from the icons around
x:50,
and 80,
x2: 60,
y2: 70,
containLabel: true
},
legend: {
data: [ 'a polyline', 'two folding lines', 'three folding lines', 'four folding lines', 'polyline five'],
// The inside of each of the information are bound to understand from the corresponding series name, this is can be used for switching whether to display this information
x: 'center', // to set the position of the legend, there is left, center, right
textStyle: { //
color: 'red', // set the color legend
fontSize: '18 '// set the legend font size
}
},
dataZoom: [// may be implemented under a plurality of scroll bar can then slide around
{
show: true, // whether to display a scroll bar
realtime: true,
start: 0, // scroll bar to the starting position
end: 80, // scroll bar end position
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,
0.3-8.8,4.4- 8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,
8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,
24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z ', // modify the default slider style
handleSize: '50% ', // modified fast hanging radius
handleStyle: {
color: '#fff', // change the color of the slider
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2, // x-axis shifted to the right shadow
shadowOffsetY: 2 // y axis offset shadow
},
bottom:'0%',
height: '40'
}
],
toolbox: {
left: 'right', // to set the operation icon location icon
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: [
{
type : 'category',
boundaryGap: false, // icon on the left if blank, false is not blank, true blank
data: [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
axisLine: {
symbol: [ 'none', 'arrow'], // set x or y axis arrow
lineStyle: {
color: '#B5B5B5',
width: 2, // here to add the highlighted}
} // scale inwardly or outwardly
axisTick:{ inside:true, length:1, },
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: '# FCFCFC', // Grid color
}
},
axisLabel: {// x-axis adjustment lable //
interval: 0, // scale according to the number of x-axis length of the display, for example: original scale display 20, since x 10 shows only shaft,
rotate: 0, // achieve x-axis scale effect rotation identification,
textStyle:{
fontSize: 10, // make the font larger
color:"#B5B5B5"
}
},
nameTextStyle: {
color: "#B5B5B5",
verticalAlign: "bottom",
fontSize:'10',
padding: [35,50,10, -2] // set the position of the x-axis title
},
boundaryGap : false,
}
}
],
yAxis: [
{
type : 'value',
name: 'Height (ml)', // set the upper left corner of the unit indicator
axisLabel: {
formatter: '{value} ml' // y-axis coordinates of the unit is provided
},
},
axisLine: {
symbol: [ 'none', 'arrow'], // set x or y axis arrow
lineStyle: {
color: '#B5B5B5',
width: 2, // here to add the highlighted
}
} // scale inwardly or outwardly
axisTick:{
inside:true,
length:1,
},
splitLine: {
show: true,
lineStyle:{
type: 'solid',
color: '# FCFCFC', // Grid color
}
},
axisLabel: {// x-axis adjustment lable
interval: 0, // scale according to the number of x-axis length of the display, for example: original scale display 20, since x 10 shows only shaft,
rotate: 0, // achieve x-axis scale effect rotation identification,
textStyle:{
fontSize: 10, // make the font larger
color:"#B5B5B5"
}
},
nameTextStyle: {
color: "#B5B5B5",
verticalAlign: "bottom",
fontSize:'10',
padding: [35,50,10, -2] // set the position of the x-axis title
},
boundaryGap : false,
}
], // label 2 on the outside of the property may be placed in a series of options which are set corresponding to the inside
label: {// modify data corresponding to each column
normal:{
show: true, // whether to display the data set
position: 'inside', // set the display at the location, inside, outside, top, bottom,
textStyle: {
fontSize: 15 // // set the font size
color: 'red' // set the color data column above
}
}
},
Series: [
{
name: 'a polyline',
type: 'Line',
Stack: 'total',
AreaStyle: {
Normal: {
Color: 'Red' // Set the fill color
}
},
label: {
Normal: {
Show : to true,
position: 'top', the inner or outer // set the display
textStyle: {
the fontSize: 15, // set the font size
color: 'red' // column disposed above the color data
}
}
},
ItemStyle: {/ / set the color polyline
Normal: {
the lineStyle: {
color: 'Red'
}
}
},
Data: [120, 132, 101, 134, 90, 230, 210]},