使用echarts创建动态数据图表/How to use echarts to make Dynamic Chart

Summary:

echarts is a very good pure Javascript open source chart library that runs smoothly on PC and mobile devices and is compatible with most current browsers including IE8 / 9/10/11, Chrome, Firefox, Safari and others.

echarts是一款非常优秀的纯 Javascript 的开源图表库，可以在 PC 和移动设备上运行的很流畅，兼容目前大部分浏览器包括IE8/9/10/11，Chrome，Firefox，Safari等。

您将从这个教程中学到什么

• 如何定义标题及样式
• 如何定义提示框
• 如何定义X轴
• 如何定义Y轴
• 如何定义数据显示
• 如何生成动态数据

学习此教程的必备条件

• 你需要一个代码编辑器，比如Eclipse，EditPlus，EmEditor等等
• 你需要下载echarts.js，并在文件中调用

教程难度

• 中等

教程内容

演示效果

1. 知识点A - 如何定义标题及样式

    title: {
        text: 'Demo By @hui.zhao',
        left: 55
    },

• text：定义图表标题文字
• left：定义图表标题文字举例网格左侧的举例

---

2. 知识点B - 如何定义提示框

tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#333'
            }
        }
    },

• trigger：定义为axis时显示该列下所有坐标轴所对应的数据
• axisPointer：定义坐标轴指示器，坐标轴触发有效。
• backgroundColor：定义提示框背景色
• type：定义为cross时，则此时坐标系会自动选择显示哪个轴的 axisPointer，也可以使用 tooltip.axisPointer.axis 改变这种选择。

---

3. 知识点C - 定义X轴

 xAxis: [
        {
            type: 'category',
            boundaryGap: true,
            data: (function (){
                var now = new Date();
                var testa = [];
                var testb = 10;
                while (testb--) {
                    testa.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                    now = new Date(now - 2000);
                }
                return testa;
            })()
        },
        {
            type: 'category',
            boundaryGap: true,
            data: (function (){
                var testa = [];
                var testb = 10;
                while (testb--) {
                    testa.push(testb + 1);
                }
                return testa;
            })()
        }
    ],

• type：定义为category时，表示类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
• boundaryGap：坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
• toLocaleTimeString：获取当前时间

---

4. 知识点D - 定义Y轴

yAxis: [
        {
            type: 'value',
            scale: true,
            max: 25,
            min: 0,
            boundaryGap: [0.5, 0.5]
        },
        {
            type: 'value',
            scale: true,
            max: 1500,
            min: 0,
            boundaryGap: [0.5, 0.5]
        }
    ],

• type：定义为value时，表示数值轴，适用于连续数据。
• scale：定义是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
• max：定义Y轴坐标轴刻度最大值。
• boundaryGap：非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。

---

5. 知识点E - 如何定义数据显示

    series: [
        {
            name:'Line',
            type:'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:(function (){
                var testa = [];
                var testb = 10;
                while (testb--) {
                    testa.push(Math.round(Math.random() * 1000));
                }
                return testa;
            })()
        },
        {
            name:'Bar',
            type:'line',
            data:(function (){
                var testa = [];
                var testb = 0;
                while (testb < 10) {
                    testa.push((Math.random()*10 + 5).toFixed(1) - 0);
                    testb++;
                }
                return testa;
            })()
        }
    ]
};

• name：定义图表标题文字，需要与图例名称相同
• type：定义图表显示，bar为柱状图，line为折线图

---

6. 知识点F - 如何生成动态数据

app.count = 0;
setInterval(function (){
    xData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
    var data0 = option.series[0].data;
    var data1 = option.series[1].data;
    data0.shift();
    data0.push(Math.round(Math.random() * 1500));
    data1.shift();
    data1.push((Math.random() * 20 + 5).toFixed(1) - 0);
    option.xAxis[0].data.shift();
    option.xAxis[0].data.push(xData);
    option.xAxis[1].data.shift();
    option.xAxis[1].data.push(app.count++);
    myChart.setOption(option);
}, 2000);

• app.count：计数开始数字
• setInterval：可按照指定的周期（以毫秒计）来调用函数或计算表达式。
• toLocaleTimeString：获取当前时间
• shift：用于把数组的第一个元素从其中删除，并返回第一个元素的值。
• push：向数组的末尾添加一个或多个元素，并返回新的长度。

---

以上代码内容，是实现这个图表的关键代码，有兴趣的可以尝试自己动手试一试，也欢迎与我交流，互相学习，一起进步。

完整代码

option = {
    title: {
        text: 'Demo By @hui.zhao',
        left: 55
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#333'
            }
        }
    },
    legend: {
        data:['Bar', 'Line'],
        right: 40
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: true,
            data: (function (){
                var now = new Date();
                var testa = [];
                var testb = 10;
                while (testb--) {
                    testa.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                    now = new Date(now - 2000);
                }
                return testa;
            })()
        },
        {
            type: 'category',
            boundaryGap: true,
            data: (function (){
                var testa = [];
                var testb = 10;
                while (testb--) {
                    testa.push(testb + 1);
                }
                return testa;
            })()
        }
    ],
    yAxis: [
        {
            type: 'value',
            scale: true,
            max: 25,
            min: 0,
            boundaryGap: [0.5, 0.5]
        },
        {
            type: 'value',
            scale: true,
            max: 1500,
            min: 0,
            boundaryGap: [0.5, 0.5]
        }
    ],
    series: [
        {
            name:'Line',
            type:'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data:(function (){
                var testa = [];
                var testb = 10;
                while (testb--) {
                    testa.push(Math.round(Math.random() * 1500));
                }
                return testa;
            })()
        },
        {
            name:'Bar',
            type:'line',
            data:(function (){
                var testa = [];
                var testb = 0;
                while (testb < 10) {
                    testa.push((Math.random()*15 + 5).toFixed(1) - 0);
                    testb++;
                }
                return testa;
            })()
        }
    ]
};
app.count = 0;
setInterval(function (){
    xData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');
    var data0 = option.series[0].data;
    var data1 = option.series[1].data;
    data0.shift();
    data0.push(Math.round(Math.random() * 1500));
    data1.shift();
    data1.push((Math.random() * 20 + 5).toFixed(1) - 0);
    option.xAxis[0].data.shift();
    option.xAxis[0].data.push(xData);
    option.xAxis[1].data.shift();
    option.xAxis[1].data.push(app.count++);
    myChart.setOption(option);
}, 2000);

最终效果

系列课程 （您可以使用zqz-tutorial标签快速查看我发布的所有教程”）

• 使用echarts创建气泡图
• 使用echarts创建StepLine报表
• 使用echarts创建Punch Card报表
• 使用echarts创建可拖拽节点的图表
• 使用echarts创建自定义饼状图表
• 使用echarts创建点击增加节点的图表
• 使用echarts创建气温折线图
• 使用echarts创建折线图堆叠图表
• 使用echarts创建地图标注图表
• 使用echarts创建渐变色折线图
• 使用echarts创建X轴正负柱状图
• 使用echarts创建嵌套环形图
• 使用echarts创建富媒体饼图
• 使用echarts创建阶梯柱状图
• 使用echarts创建堆叠柱状图
• 使用echarts创建极坐标系下的堆叠柱状图
• 使用echarts创建动态数据图表

---

Posted on Utopian.io - Rewarding Open Source Contributors

---