{
value
:
200
,
symbolSize
:
28
}
,
{
value
:
500
,
symbolSize
:
20
}
,
{
value
:
100
,
symbolSize
:
86
}
,
{
value
:
250
,
symbolSize
:
45
}
,
{
value
:
600
,
symbolSize
:
88
}
,
{
value
:
550
,
symbolSize
:
45
}
,
{
value
:
5
,
symbolSize
:
66
}
name
:
'G7易流运价'
,
data
:
[
{
value
:
300
,
symbolSize
:
10
}
,
{
value
:
200
,
symbolSize
:
20
}
,
{
value
:
180
,
symbolSize
:
35
}
,
{
value
:
350
,
symbolSize
:
15
}
,
{
value
:
125
,
symbolSize
:
35
}
,
{
value
:
350
,
symbolSize
:
85
}
,
{
value
:
55
,
symbolSize
:
62
}
const
color
=
[
'RGB(101,148,249)'
,
'RGB(99,218,171)'
]
const
seriesList
=
[
]
var
i
=
{
}
list
.
forEach
(
(
item
,
index
)
=>
{
i
=
{
name
:
item
.
name
,
type
:
'line'
,
symbol
:
'circle'
,
animation
:
true
,
lineStyle
:
{
normal
:
{
width
:
'2'
itemStyle
:
{
normal
:
{
color
:
color
[
index
]
,
data
:
item
.
data
seriesList
.
push
(
i
)
}
)
,
option
=
{
title
:
{
legend
:
{
data
:
list
.
map
(
function
(
item
)
{
return
item
.
name
;
tooltip
:
{
trigger
:
'axis'
,
axisPointer
:
{
type
:
'cross'
,
label
:
{
backgroundColor
:
'#6a7985'
formatter
(
params
)
{
var
content
=
''
params
.
forEach
(
(
item
)
=>
{
content
+=
item
.
marker
+
item
.
seriesName
+
'￥'
+
item
.
data
.
value
+
' | '
+
item
.
data
.
symbolSize
+
'单'
+
'<br>'
return
'<div style="border-bottom: 1px dotted rgba(237, 72, 69, 0.3); font-size: 16px;padding-bottom: 7px;margin-bottom: 7px">'
+
params
[
0
]
.
name
+
'</div>'
+
content
toolbox
:
{
feature
:
{
grid
:
{
left
:
'3%'
,
right
:
'4%'
,
bottom
:
'3%'
,
containLabel
:
true
xAxis
:
[
type
:
'category'
,
name
:
'日期'
,
boundaryGap
:
false
,
data
:
[
'05-10'
,
'05-11'
,
'05-12'
,
'05-13'
,
'05-14'
,
'05-15'
,
'05-16'
]
yAxis
:
[
type
:
'value'
,
name
:
'运价(元)'
,
series
:
seriesList
最近需要实现一个, 在
折线图
中
要对数据进行一个闪烁显示的功能. 用到的是ecahrts的effectScatter.
在ecahrts
中
, 关于涟漪图-effectScatter的文档在此链接可以进行查阅
let opt = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
// splitLine :{ //网格线
var myChart =
echarts
.init(document.getElementById('main'));
//数据加载完之前先显示一段简单的loading动画
//myChart.showLoading();
var names = []; //横坐标数组（实际用来盛放X轴坐标值）
var values = []; //纵坐标数组（实际用来盛放Y坐标值）
var effectValues = []; //闪烁效果
$.ajax({
type : "post
在
echarts
中
，可以通过设置series
中
的itemStyle来改变
折线图
节点
的颜色。具体来说，可以设置normal属性下的color属性来改变
节点
的填充颜色，borderColor属性来改变
节点
的边框颜色，borderWidth属性来改变
节点
的边框宽度。例如，在引用
中
的示例代码
中
，可以通过修改itemStyle的normal属性来改变折线点的颜色，如下所示：
itemStyle: {
normal: {
color: '#2fc49a', //折线点的颜色
borderColor: '#ffffff', //拐点边框颜色
borderWidth: 2, //拐点边框
大小
除了
节点
颜色，还可以通过设置lineStyle来改变折线的颜色，如下所示：
lineStyle: {
color: '#2fc49a', //折线的颜色
// 用于日期选择器当月时间在右侧显示
timeDefaultShow() {
return new Date().setMonth(new Date().getMonth() - 1);
放在这里会更优雅
ElementUI el-date-picker日期选择器当月时间在右侧显示,并且今天之后的日期无法选择
時間不會說謊:
ElementUI中table表格根据需求自定义计算
