Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities

This paper has participated in theProject Digg”To win a creative gift package and challenge for creative incentive money.

The line chart

The line chart is needed in the project. It is the first time to contact echarts knowledge, so I will summarize what I used in the project for myself and others to see.

Note the following points:

The default value of show is true, which we can either write or omit. If we don’t want to display the hover effect, we can change it to false. Trigger is set. Effect can see a vertical dotted line, when not added will not show, backgroundColor is the corresponding backgroundColor of the popover to show data, can be set according to their own color needs, extraCssText can set the shadow effect of popover display.

2. The number of data data in xAxis should be consistent with that in series. If there are only 10 data data in xAxis and 20 data data in series, then the line chart in our graph can only show the corresponding points of 10 data. Type in xAxis can be set to category without setting or value without setting, while type in yAxis can be set to value without setting but cannot be set to category. The two are mixed up.

The default value is true. If false is written, then the dots corresponding to the line graph will not be displayed. The default value of symbol is hollow. SymbolSize shows the dot size. Type must be set and cannot be omitted, otherwise the line chart will not be displayed. LineStyle is the parameter to set the polyline, width is the width of the polyline, and color is the color of the polyline.

4. DataZoom is used for scaling effects. This is mentioned in the spectrum chart, please refer to that explanation. Finally, the parameter “backgroundColor” in options is to set the backgroundColor of the line chart. You can change the color you need.

options: {
    title: {},// Hover prompt
    tooltip: {
        show: true.trigger: 'axis'.backgroundColor: '#fff'.textStyle: { color: '#4B9BFB' },
        extraCssText: 'box-shadow: 0px 2px 5px 0px rgba(50,107,174,0.19); '
    },
    xAxis: {
      // name: '1/50mm/s',
      type: 'category'.data: [0.1.2.3.4.5.6.7.8.9.10.11.12.13].itemStyle: {
        show: false}},yAxis: {
    type: 'value'.name: 'Unit: mm/s'.axisLine: {
      show:true,},// Add units to the Y-axis
    // axisLabel:{formatter:'{value}mm/s'}
    },
    series: [{
      // name: 'data ',
      showSymbol: true.// Whether to display dots by default
      symbol: 'circle'.// Set to a solid point
      data: [0, -245, -496, -519, -543, -479.794, -237, -568, -514, -372, -115, -664, -745, -468, -683, -732, -208, -506, -564, -376, -537, -198, -583, -65, -465, -677, -483, -546, -422.0, -669, -193, -657, -910, -705, -627, -630, -553.273, -468, -807, -642, -345, -51, -609, -705, -111, -423, -462, -498, -486, -563, -332, -565, -499, -339, -428, -498, -239, -319, -409, -546, -474, -481].color: "#4786FF".symbolSize: 6.type: 'line'.lineStyle: {
        width: 1.color: '#4786FF',}}],dataZoom: [{show: true.realtime: true.start: 0.end: 100.height: 8.// Component height
          left: 30.// The left distance
          right: 30.// Distance to the right
          bottom: 0.// Distance to the right
          handleColor: '#D3DCFD'.//h slide icon color
          handleStyle: {
            borderColor: '#D3DCFD'.borderWidth: '1'.shadowBlur: 2.background: '#D3DCFD'.shadowColor: '#D3DCFD',},backgroundColor: '#f4f7f9'.// The color of the unselected slider area on both sides
          showDataShadow: false.// Whether to display data shadow Default auto
          showDetail: false.The default value is true
          // xAxisIndex: [0]
        },
        {
            type: 'inside'.realtime: true.start: 0.end: 5],},backgroundColor: '#fff'
}
Copy the code

If you want to see the image, you can copy the code directly to the left of the echarts case, and then change the following option: to =. :