echarts usage skills (record it)

　　If you have the energy and time for these things, you can read through the echarts document, which has a detailed description of the configuration. This blog just records the problems encountered by using echarts, it is not complete, it deepens the impression, and it is just a guide. For complete learning, please move to the official documentation

1. Legend settings radio

legend: {
    data:['db block gets', 'consistent gets'],
    selectedMode: 'single',
},

2. Add zoom and scroll

　　Plus dataZoom configuration

dataZoom: [
    {
        show: true,
        realtime: true,
        start: 65,
        end: 85
    },
    {
        type: 'inside',
        realtime: true,
        start: 45,
        end: 85
    }
],

　　Need to cooperate with the grid configuration to leave the bottom position for dataZoom

grid: {
    top: 30,
    bottom: 60
},

3. Add multiple lines to the view: continue to add objects in the series array

series: [
    {
        name:'db block gets',
        type:'line',
        xAxisIndex: 1 , //Adding this dataZoom does not work for the object, you need to remove this property 
        smooth: true , // represents a smooth curve, if you need a polyline, just remove it 
        data: [ 2.6 , 5.9 , 9.0 , 26.4 , 28.7 , 70.7 , 175.6 , 182.2 , 48.7 , 18.8 , 6.0 , 2.3 ]
    },
    {
        name:'consistent gets',
        type:'line',
        smooth: true,
        data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
    }
]