First ECharts chart

ECharts is a highly customized data visualization chart library developed by Baidu team. Its underlying layer relies on the lightweight Canvas class library ZRender, which is a pure JavaScript icon library, compatible with (IE8/9/10/11, Chrome, Firefox, Safari, etc.) mainstream browsers, and can run on PC and mobile devices.

1.ECharts official website

Click on any chart

It can be seen from the example that there are many chart types available for data display on the official website, which helps us generate most of the data.
Take the line chart as an example.

2.echarts.js file

Download path:

Click the type you want to download and it will be downloaded automatically. As a development, I use the source code.
Put the next good js file into the project

3. Background data return

In the controller layer, I return six lists < string > for data display

4. front end

1. Reference the echart.js file in the html page

2. Prepare a div in the body to receive the line graph

<div id="sell_data" style="height:400px"></div>

3.js file

//Order statistics line chart
$(function() {

    var toPayList;
    var toconfirm;
    var done;
    var payexpired;
    var refunded;
    var datetime;

            //Get background data

    var option = {
        title: {
            text: 'Line chart stacking'
        tooltip: {
            trigger: 'axis'
        legend: {
            data: ['To be paid', 'To be confirmed', 'Completed', 'Expired', 'Refunded']//Line name
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        toolbox: {
            feature: {
                saveAsImage: {}
        xAxis: {
            type: 'category',
            boundaryGap: false,
        yAxis: {
            type: 'value'
        series: [{
                name: 'To be paid',
                type: 'line',
                stack: 'total',
                data: toPayList
                name: 'To be confirmed',
                type: 'line',
                stack: 'total',
                data: toconfirm
                name: 'Completed',
                type: 'line',
                stack: 'total',
                data: done
                name: 'Expired',
                type: 'line',
                stack: 'total',
                data: payexpired
                name: 'Refunded',
                type: 'line',
                stack: 'total',
                data: refunded
    var myChart = echarts.init(document.getElementById('sell_data'));



5. Effect display

6. Error checking

1. Is the echarts.js file referenced successfully in HTML, and is the path written correctly?
2. Is the background data in the form of json or array?

Tags: Javascript Firefox Mobile JSON

Posted on Sun, 05 Jan 2020 20:59:44 -0800 by inosent1