Echarts图表-学习

Posted sylvia-camellia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Echarts图表-学习相关的知识,希望对你有一定的参考价值。

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);
}



 

 

未完待续...

 

以上是关于Echarts图表-学习的主要内容,如果未能解决你的问题,请参考以下文章

ECharts学习--简单图表的绘制

Echarts图表学习

Echarts图表-学习

echarts学习总结:图表溢出窗口,图表数据窗口显示不全

ECharts学习—实现我的第一个图表

假期学习首都之窗百姓信件JavaWweb+Echarts图表展示