Share an example of a company project

UI little sister gave the picture is like this:

Final effect:

Here’s all the code

Source: gitee.com/DieHunter/m…

First introduce Echarts, either CDN or NPM

HTML:

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .myChartBox {
            margin: 100px auto;
            width: 450px;
            height: 240px;
            background: # 000;
        }
    </style>
    <script src="./data.js"></script>
    <script src="./echarts.js"></script>
    <script src="./myChart.js"></script>
</head>

<body>
    <div id="myChartBox" class="myChartBox"></div>
    <script>
        let _myChart, _option, timer = 1.5,
            timeTickId, colorList, chartConfig; // Initialize variables, respectively, ecHART object after initialization, EcHART configuration information, chart refresh frequency, delay recursive function ID, chart gradient color list, list linkage configuration
        let {
            category,
            lineData
        } = filterData(bookList) // Filter the backend data into X-axis array and Y-axis array formats
        let init = () = > {
            _myChart = echarts.init(myChartBox); // Initialize chart
            colorList = {
                first: ["#F179C4"."#26AEFB"."#CDAD92"."#ED65BA"."#989FBB"."#E86A6A"."#6718CF"].second: ["#E33AA3"."#056FAB"."#FFAA62"."#E33AA3"."#28B1FF"."#FFAA62"."#F47384"]
            }
            chartConfig = { // The first index and the last index in chart specify the length of the list
                first: 0.second: 7.max: 20
            }
            createChart()
        };
        (() = > {
            init()
        })()
    </script>
</body>

</html>
Copy the code

Data.js (temporary data)

const bookList = [{
    "typeName": "Comprehensive book"."bnum": 28264
}, {
    "typeName": "Literature"."bnum": 14591
}, {
    "typeName": "Children's Literature"."bnum": 10186
}, {
    "typeName": "Culture and Education"."bnum": 20477
}, {
    "typeName": "Language"."bnum": 17344
}, {
    "typeName": "Philosophy"."bnum": 16238
}, {
    "typeName": "Historical geography"."bnum": 15457
}, {
    "typeName": "Political thought."."bnum": 5793
}, {
    "typeName": "Biological science"."bnum": 4966
}, {
    "typeName": "Picture books"."bnum": 4521
}, {
    "typeName": "Art"."bnum": 4157
}, {
    "typeName": "Earth Astronomy"."bnum": 2545
}, {
    "typeName": "Military"."bnum": 2368
}, {
    "typeName": "Natural science"."bnum": 2358
}, {
    "typeName": "Industrial technology"."bnum": 1830
}, {
    "typeName": "Social science"."bnum": 1689
}, {
    "typeName": "Math, chemistry"."bnum": 1394
}, {
    "typeName": "Political law"."bnum": 1303
}, {
    "typeName": "Teen Encyclopedia"."bnum": 1201
}, {
    "typeName": "The economy"."bnum": 923
}, {
    "typeName": "Fairy Tales"."bnum": 840
}, {
    "typeName": "Environmental Safety"."bnum": 615
}, {
    "typeName": "Medicine and Health"."bnum": 518
}, {
    "typeName": "Aerospace"."bnum": 457
}, {
    "typeName": "Agricultural sciences"."bnum": 347
}, {
    "typeName": "Home education"."bnum": 211
}, {
    "typeName": "Transportation"."bnum": 188
}]
Copy the code

myChart.js

let createChart = () = > {
    _option = {
        grid: [{ // Set the margin
            left: 55.bottom: 53.top: 20.right: 10}].yAxis: { / / Y configuration
            show: true.axisLine: {
                show: false.lineStyle: { // Hide the Y-axis
                    opacity: 0}},axisTick: { // Hide the scale
                show: false,},splitLine: { // Hide the scale
                show: false,},axisLabel: { / / Y
                color: '#fff'.fontSize: 12}},xAxis: { / / X configuration
            data: category, / / X data
            show: true.axisLabel: { // X-axis text style
                color: '#a9aabc'.fontSize: 12.interval: 0.padding: [10.0.0.0]},axisLine: {
                show: false
            },
            axisTick: {
                show: false,}},series: [{
            name: ' '.type: 'pictorialBar'.// Set type to pictograph
            symbol: 'roundRect'.// Shape type, rectangle with rounded corners
            barWidth: '11%'.// Histogram width
            barMaxWidth: '20%'.// Maximum width
            symbolMargin: '3'.// Graphics are spaced vertically
            animationDelay: (dataIndex, params) = > { // The duration of each graphic animation
                return params.index * 50;
            },
            itemStyle: {
                normal: {
                    color: params= > { // Shape gradient color method, four numbers representing right, down, left, and up, offset representing 0% to 100%
                        return new echarts.graphic.LinearGradient(
                            1.1.0.0[{offset: 0.color: colorList.first[params.dataIndex]
                                },
                                {
                                    offset: 1.color: colorList.second[params.dataIndex]
                                }
                            ])
                    }
                }
            },
            z: 1.symbolRepeat: true.// Whether the graph repeats
            symbolSize: [25.6].// The size of the graphic element
            data: lineData, / / Y data
            animationEasing: 'elasticOut' // Animation effect
        }]
    }
    timeTick()
}
let disposeChart = () = > { / / destruction of chart
    _myChart.dispose()
    _myChart = null
}
let setOption = () = > { // Reset data
    _option.xAxis.data = category.slice(chartConfig.first, chartConfig.second)
    _option.series[0].data = lineData.slice(chartConfig.first, chartConfig.second)
    _myChart.setOption(_option, true)}let timeTick = () = > { // Timer, it is better to use delay and recursion, if using setInterval, easy to cause congestion
    if (timeTickId) {
        clearTimeout(timeTickId)
        timeTickId = 0
    }
    autoChangeData()
    timeTickId = setTimeout(timeTick, 1000 * timer || 5000)}let autoChangeData = () = > { // Offset the array to switch data
    if(! chartConfig.max) {return
    }
    if (chartConfig.second >= chartConfig.max) {
        chartConfig.second = chartConfig.second - chartConfig.first
        chartConfig.first = 0
    } else {
        chartConfig.first++
        chartConfig.second++
    }
    setOption()
}
let filterData = (data, category = [], lineData = []) = > { // Filter the back-end data into X - and Y-axis arrays respectively
    data.forEach(item= > {
        item.typeName = item.typeName.length > 2 ? item.typeName.substring(0.2) : item.typeName
        category.push(item.typeName || ' ')
        lineData.push(item.bnum || 0)})return {
        category,
        lineData
    }
}
Copy the code