Official documents I. Configuration of the Echarts line chart (1) Remove the border line of the line chart and add shadow effect
LineStyle: {
normal: {
type: ' Solid ',
/*color: "#28a5fc", */
color: "Red",
opacity: "0.5"
}
}
As shown in the following illustration:
(2) Set the position of "up and down" of the Moving Line chart
Code fragment:
grid:{
x:40,
y:20,
x2:20,
y2:60,
show:true, //Express open
bordercolor: "#e4e4e4",// Benquan color of a line chart
shadowblur:50,
containlabel:50,
}
(3) set the x axis, Y axis value area of the line chart
{
type: ' Value ',
max:80,//region maximum, and can also be set [0, ' 100% '], from the maximum fit
interval:20,//per partition
axislabel:{
textstyle:{
color: "#a7aab3"//x axis, number color of Y axis, such as Figure 1
}
},
axisline:{//x axis, dark axis of Y axis, as shown in Figure 2
show:true,
linestyle:{
color: "Red",
},axistick:{//shown in Figure 3
Show:false,}
}
Figure 1:
Figure 2:
Figure 3:
(4) grid border (Y-axis draw border line)
Splitline: {////finally found, the color line of "border" in the built-in table of the background image This is the line show:true of x and Y axis
,
linestyle:{
color: "#e4e4e4",
type: ' Solid '
}
}
As shown in the following illustration:
Grid border (X-axis Draw border line)
(5) x-axis and y-axis colors and their fonts
axislabel:{
show:true,
textstyle:{
fontsize: "8px",
color: "Red",
align: "center"
}, Formatter:function (e) {return
e;
}
}
As shown in the figure:
(6) Color gradient effect of axis body
Normal: {
color:new echarts.graphic.LinearGradient (0, 0, 0, 1, [{
offset:0,
color: ' Rgba (40, 182, 252, 0.) ) '
}, {
offset:1,
color: ' Rgba, 159, 255, 0.2 '
}]
}
Effect Chart:
The final effect code is attached:
option = {tooltip: {trigger: ' axis '}, Title: {x: ' center ', Text: ',}, Legend: {top: ' bottom ', data: [' intention '],},grid:{x:10, y:20, x2:30, y2:20, Show:true, bordercolor: "#e4e4e4",//grid border line Shadowcolo R: "#e4e4e4", BorderWidth: "0.2", Containlabel:true,},toolbox: {show:true, feature: {mark: {show:t Rue}, DataView: {show:true, Readonly:false}, Magictype: {show:true, type: [' line ', ' Bar ', ' stack ', ' tiled ']}, restore: {show:true}, Saveasimage: {show:true}}},xaxis: [{type: ' Category ', S Plitnumber:6, Boundarygap:false, data:date, axislabel:{textstyle:{color: "#a7a Ab3 "}}, axisline:{//x axis border line show:false},axistick:{Show:false,},axislabel:{show:true, text style:{fontsize: "8px", Color: "#a7aab3", Align: "center"},formatter:function (e) {retur
n E; }}, SplitlinE: {////finally found, the color line of the "border" in the built-in table of the background image This is the x-axis vertical show:true, linestyle:{color: "#e4e4e4", type: "Solid"}}],yaxis: [ {type: ' value ', Max:yaxismax, Splitnumber:5, Interval:interval, axislabel:{textstyle:{Colo R: "#a7aab3"}, axisline:{show:true, linestyle:{color: "#e4e4e4"}},axistick:{S How:false,},axislabel:{show:true, textstyle:{fontsize: "8px", Color: "#a7aab3"}},SPL
Itline: {////finally found, the color line of the "border" in the built-in table of the background image This is the y-axis horizontal show:true, linestyle:{color: "#e4e4e4", Type: ' Solid ',}}],datazoom: {type: ' inside ', start:23, en d:100,},linestyle: {normal: {type: ' solid ', Color: ' #28a5fc ', opacity: ' 0.5 '}}, Ba
Ckgroundcolor: "#FFFFFF",//Background color borderwidth:0.1, series: [{name: ' Deal ', type: ' line ', /*smooth:true,//represents a line chartBubble smooth:true, not shown, false displays symbol: ' None ' symbol: ' None ', */stack: ' A ', Show:false,
linestyle:{//polyline Color Normal: {color: ' #1ba0fc ', width:1.5, SHADOWBLUR:80},}, Areastyle: {normal: {col Or:new echarts.graphic.LinearGradient (0, 0, 0, 1, [{offset:0, color: ' RGB A (252, 0.85) '}, {offset:1, color: ' Rgba (28, 1 255, 0.2) '}]}},itemstyle:{normal:{color : "#e4e4e4", Barbordercolor: "#e4e4e4",}}, Data:data}]};
(7) The distance between the copy and the axis
Xaxis: [{
axislabel: {
textStyle: {
color: ' #a7aab3 ',
fontsize: ' @ ',
},
margin:16,// The distance between the tick label and the axis.
}
}],
(8) The distance between the copy and the axis
Markpoint: {
symbolsize:60,//tag size
label:{
normal:{
textstyle:{
fontsize:19,//Text Size
}
}
}
}
ii. configuration of pie charts (9) Pie chart font size modification FontSize
Series: [{
name: ' Scale ',
type: ' Pie ',
radius: ' 55% ',
Center: [' 50% ', ' 60% '],
label: {
Normal: {
formatter: ' {b}:{c}: ({d}%) ',
textStyle: {
fontweight: ' normal ',
fontsize:15
}
}
}
}]