What is ECharts?

A pure JavaScript charting library. ECharts, abbreviated from Enterprise Charts, commercial-grade data charts, a pure Javascript chart library, can run smoothly on PC and mobile devices, compatible with most current browsers (IE6/7/8/9/10/11, Chrome, firefox, Safari, etc.), the bottom layer relies on the lightweight Canvas library ZRender, which provides intuitive, vivid, interactive, and highly personalized data visualization charts. Innovative features such as drag-and-drop recalculation, data view, and range roaming greatly enhance the user experience and give users the ability to mine and integrate data.

ECharts download address: https://echarts.apache.org/zh/download.html

Get ECharts

npm install echarts --save

Introduce ECharts

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

Draw a simple chart

Before drawing, you need to prepare a DOM container with height and width for ECharts

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

Then initialize an echarts instance through the echarts.init method and generate a simple bar chart through the setOption method. Below is the complete code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

In this way, the first chart is born~

ECharts asynchronous data loading and updating?

In many cases, data needs to be loaded asynchronously and then filled in.

method one:

After the chart is initialized, at any time, just use jQuery and other tools to obtain the data asynchronously and then fill in the data and configuration items through setOption.

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function(data){
    myChart.setOption({
        titile: {
            text:'异步数据加载实例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data:dta.categeries
        }
        yAxis:{
           
        },
        series:[{
            name: '销量',
            type: 'bar',
            data: data.data
        }]
    })
})

Way two:

After setting up other styles, first an empty rectangular empty axis, and then fill in the data after obtaining the data.

var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({ 
    titile: {
        text:'异步数据加载实例'
    },
    tooltip: {},
    legend: {
         data:['销量']
    },
    xAxis: {
         data:[]
    }，
    yAxis:{},
    series:[{
         name: '销量',
         type: 'bar',
         data: data.data
    }]
})

// 异步加载数据
$.get('data.json').done(function(data){
    // 填入数据
    myChart.setOption({
        xAxis: {
            data:dta.categeries
        }
        series:[{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    })
})

Plug-in//What is ECharts? Asynchronous data loading and updating?