Talking about Echarts using configuration __highcharts

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
            }
        }
    }
}]