Echart 随便写的

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 88 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/genestart/p/11177239.html

文章标签：

#javascript #ViewUI

博客主要展示了使用JavaScript实现散点图和折线图的代码示例。包含散点图的数据设置、折线图的时间与值维度展示，还介绍了图表的一些属性设置，如平滑效果、标题、背景色、图例等，以及坐标轴的相关设置。

test001

startFloor
stopFloor

currentLoad

散点图
legentd 是2个
范围图
图可双击事件

-------------------------------------------------------------------
散点图

option = {
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter'
}]
};

时间，值，两个维度

点线，折线图
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};

保持平滑
smooth: true

title 和背景色

backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#f7f8fa'
}, {
offset: 1,
color: '#cdd0d5'
}]),
title: {
text: '1990 与 2015 年各国家人均寿命与 GDP'
},

用于起点和终点
legend: {
right: 10,
data: ['1990', '2015']
},

==》 series 下面的，如果点上去会显示具体详情

label: {
emphasis: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: 'top'
}
},

legend和 name必须相同才可以

yAxis
scale: true 设置是否从0开始

xAxis 设置x轴是否有边界
boundaryGap: false,

y轴的指数表示方式
yAxis: {
type: 'log',
name: 'y'
},