Echarts图表-学习

Posted 2021-02-14 sylvia-camellia

Echarts可用来实现多种图表的实现。

注意事项：

一、series

data通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。

series: [{
data: [
// 维度X 维度Y 其他维度 ...
[ 3.4, 4.5, 15, 43],
[ 4.2, 2.3, 20, 91],
[ 10.8, 9.5, 30, 18],
[ 7.2, 8.8, 18, 57]
]
}]
在 直角坐标系 (grid) 中『维度X』和『维度Y』会默认对应于 xAxis 和 yAxis。
在 极坐标系 (polar) 中『维度X』和『维度Y』会默认对应于 radiusAxis 和 angleAxis。
后面的其他维度是可选的，可以在别处被使用，例如：
在 visualMap 中可以将一个或多个维度映射到颜色，大小等多个图形属性上。
在 series.symbolSize 中可以使用回调函数，基于某个维度得到 symbolSize 值。
使用 tooltip.formatter 或 series.label.formatter 可以把其他维度的值展示出来。
特别地，当只有一个轴为类目轴（axis.type 为 ‘category‘）的时候，数据可以简化用一个一维数组表示。例如：

xAxis: {
data: [‘a‘, ‘b‘, ‘m‘, ‘n‘]
},
series: [{
// 与 xAxis.data 一一对应。
data: [23, 44, 55, 19]
// 它其实是下面这种形式的简化：
// data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]

 

当某维度对应于类目轴（axis.type 为 ‘category‘）的时候：

其值须为类目的『序数』（从 0 开始）或者类目的『字符串值』。例如：

xAxis: {
type: ‘category‘,
data: [‘星期一‘, ‘星期二‘, ‘星期三‘, ‘星期四‘]
},
yAxis: {
type: ‘category‘,
data: [‘a‘, ‘b‘, ‘m‘, ‘n‘, ‘p‘, ‘q‘]
},
series: [{
data: [
// xAxis yAxis
[ 0, 0, 2 ], // 意思是此点位于 xAxis: ‘星期一‘, yAxis: ‘a‘。
[ ‘星期四‘, 2, 1 ], // 意思是此点位于 xAxis: ‘星期四‘, yAxis: ‘m‘。
[ 2, ‘p‘, 2 ], // 意思是此点位于 xAxis: ‘星期三‘, yAxis: ‘p‘。
[ 3, 3, 5 ]
]
}]

 

 

二、time’ 时间轴，

适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
当某维度对应于时间轴（type 为 ‘time‘）的时候，值可以为：

一个时间戳，如 1484141700832，表示 UTC 时间。
或者字符串形式的时间描述：
ISO 8601 的子集，只包含这些形式（这几种格式，除非指明时区，否则均表示本地时间，与 moment 一致）：
部分年月日时间: ‘2012-03‘, ‘2012-03-01‘, ‘2012-03-01 05‘, ‘2012-03-01 05:06‘.
使用 ‘T‘ 或空格分割: ‘2012-03-01T12:22:33.123‘, ‘2012-03-01 12:22:33.123‘.
时区设定: ‘2012-03-01T12:22:33Z‘, ‘2012-03-01T12:22:33+8000‘, ‘2012-03-01T12:22:33-05:00‘.
其他的时间字符串，包括（均表示本地时间）: ‘2012‘, ‘2012-3-1‘, ‘2012/3/1‘, ‘2012/03/01‘, ‘2009/6/12 2:00‘, ‘2009/6/12 2:05:08‘, ‘2009/6/12 2:05:08.123‘
或者用户自行初始化的 Date 实例：
注意，用户自行初始化 Date 实例的时候，浏览器的行为有差异，不同字符串的表示也不同。
例如：在 chrome 中，new Date(‘2012-01-01‘) 表示 UTC 时间的 2012 年 1 月 1 日，而 new Date(‘2012-1-1‘) 和 new Date(‘2012/01/01‘) 表示本地时间的 2012 年 1 月 1 日。在 safari 中，不支持 new Date(‘2012-1-1‘) 这种表示方法。
所以，使用 new Date(dataString) 时，可使用第三方库解析（如 moment），或者使用 echarts.number.parseDate，或者参见 这里。

 

 

三、tooltip.formatter

提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

1, 字符串模板

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 ‘axis‘ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

• 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

• 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

• 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

• 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。

示例：

formatter: ‘{b0}: {c0}<br />{b1}: {c1}‘

2, 回调函数

回调函数格式：

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

第一个参数 params 是 formatter 需要的数据集。格式如下：

{
    componentType: ‘series‘,
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值
    value: number|Array,
    // 数据图形的颜色
    color: string,

    // 饼图的百分比
    percent: number,

}

在 trigger 为 ‘axis‘ 的时候，或者 tooltip 被 axisPointer 触发的时候，params 是多个系列的数据数组。其中每项内容格式同上，并且，

{
    componentType: ‘series‘,
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值
    value: number|Array,
    // 数据图形的颜色
    color: string,

}

 

四、每秒变动的x轴

示例代码：

点击出现的弹框部分：

<div class="hov-wrap disnone" onclick="initChart(‘ +data[i].devid+ ‘)" ><span class="mt-mid">查看统计</span></div>

核心部分：

//实时监控图表
var actual_chart = echarts.init(document.getElementById(‘actual_line‘));

// 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) { // author: meizz
    var o = {
        "M+": this.getMonth() + 1, // 月份
        "d+": this.getDate(), // 日
        "h+": this.getHours(), // 小时
        "m+": this.getMinutes(), // 分
        "s+": this.getSeconds(), // 秒
        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
        "S": this.getMilliseconds() // 毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

sysTim = getTimeArr(); //x轴的动态系统时间，按每秒显示，共显示12条

function getTimeArr() {
    var now = new Date();
    var begin = new Date(now.getTime() - 12 * 1000);
    var arr = [];

    for (var i = 12; i > 0; i--) {
        arr.push(new Date(now.getTime() - i * 1000).Format("hh:mm:ss"));
    }

    return arr;
}

//暂时用计时器来模拟每秒的操作
actual_chart_timer = null;

//y轴数据
function getEmptyArray() {
    return [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
}
function randomData() {
    value = value + Math.random() * 21 - 10;
    return {
        value:
            Math.round(value)
    }
}
fvalArr01 = getEmptyArray();
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
    fvalArr01.push(randomData());
}

/实时监控线
drawSmoothCurve(fvalArr01,unitName,devname);

function drawSmoothCurve(fvalArr01,unitName,devname) {
    var chart_data = fvalArr01;
    //画图
    //2019.3.19 实时监控-采用每秒钟展示数据
    var option = {
        xAxis: {
            boundaryGap: false,
            type: ‘category‘,
            data: sysTim,
            axisLabel : {
                color : ‘#3B53A2‘,
                fontSize : ‘11‘,
                interval : 0,
                textAlign: "left"
            },
            axisLine : {
                lineStyle : {
                    color : ‘#3B53A2‘
                }
            },
            splitLine : {
                show : false,
                lineStyle : {
                    color : ‘#3B53A2‘
                }
            }
        },
        yAxis: {
            type: ‘value‘,
            axisLabel : {
                color : ‘#3B53A2‘,
                fontSize : ‘11‘,
                interval : 0,
                formatter : ‘{value}‘ + unitName
            },
            axisLine : {
                lineStyle : {
                    color : ‘#3B53A2‘
                }
            },
            splitLine : {
                show : true,
                lineStyle : {
                    color : ‘#CDD9F0‘
                }
            }
            //axisLabel:{formatter:‘{value}‘ + unit}
        },
        legend : {
            data : devname,
            textStyle : {
                color : ‘#3B53A2‘
            },
            inactiveColor : ‘#CDD9F0‘,
            top : 2
        },
        grid: {
            top:‘10%‘,
            left : ‘2%‘,
            right : ‘3%‘,
            bottom : ‘3%‘,
            containLabel: true
        },
        tooltip: {
            trigger: ‘axis‘,
            backgroundColor: ‘#0D1B42‘,  //鼠标移动到图上面时，显示的背景颜色
            padding:15,     //定义内边距
            formatter: function(params) { //自定义函数修改折线图给数据加单位
                // console.log(params);
                var str = ‘‘;//声明一个变量用来存储数据
                str += ‘<div style="width: 12px;height: 12px;border-radius: 50%;float: left;margin-top: 5px;"></div>‘;
                for(var i=0; i<params.length; i++) {  //图显示的数据较多时需要循环数据，这样才可以成功的给多条数据添加单位
                    str += ‘<div style="color:#ffffff;"><span style="margin-left: 10px;">‘+ (params[i].data.value ? params[i].data.value + unitName : ‘暂无‘) +‘&nbsp;&nbsp;&nbsp;</span></div>‘;
                }
                return str;
            }
        },
        series: [{
            name: devname,
            type: ‘line‘,
            label:{
                /* show:true*/
            },
            smooth: true,
            data: chart_data
        }]
    };



    actual_chart_timer = setInterval(function () {
        actual_chart.setOption(option);
            var now = new Date(); console.log(now);

            sysTim.shift();
            sysTim.push(now.Format("hh:mm:ss"));

            chart_data.shift();
            chart_data.push(randomData());


        actual_chart.setOption({
            series: [{
                data: chart_data
            }]
        });
    }, 1000);


}

$(window).resize(function() {
    actual_chart.resize();
});


//弹框关闭操作
function closeChartModal(that) {
    $("#detail_modal").modal("hide");
    window.clearInterval(actual_chart_timer);
}

 

 

未完待续...