目录
折线点样式
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
// 折线
lineStyle:{
color: 'blue'
},
// 折线点
itemStyle:{
color: 'red',
},
symbol:'circle',
symbolSize:[10,10]
}]
};折线点为图片
折线点图片，通过base64图片在线转换工具转成base64图片
效果不太对，还没有找到正确方式。
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
// 折线点为图片
symbol:'data:image/png;base64,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',
symbolSize: 20
}
]
};解决方法就使用线上路径
var img = 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png';
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
// 折线点为图片
symbol:'image://'+img,
symbolSize: 20
}
]
};
折线样式
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
// 折线样式
lineStyle:{
color:'red',
},
// 折线平滑
smooth: true
}]
};折线下方区域渐变色
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0,0,0,1, [
{
offset: 0,
color: "#0EF0F0"
},
{
offset: 1,
color: "transparent"
}
])
}
}]
};
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#638FFF'
},
{
offset: 1,
color: 'rgba(248,65,126,0.90)'
}],
globalCoord: false
}
}
}
}]
};折线渐变区域渐变
默认状态和悬浮状态
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
//线条样式
itemStyle: {
color: '#6A5ACD',
normal: {
lineStyle: {
width: 2,
type: 'solid',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#0000FF'
}, {
offset: 1,
color: '#CD5C5C'
}]),
}
},
emphasis: {
color: '#6A5ACD',
lineStyle: {
width: 2,
type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#1E90FF'
}, {
offset: 1,
color: '#0000FF'
}])
}
}
},
//区域颜色渐变
areaStyle:{
normal:{
//颜色渐数 四个参数表示四个位置左、下、右、上
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(80,141,255,0.39)'
}, {
offset: .34,
color: 'rgba(56,155,255,0.25)'
},{
offset: 1,
color: 'rgba(38,197,254,0.00)'
}])
}
},
}
]
};参考链接：折线图线条渐变色
平均值
markline会自动计算data里边所有数值和的平均值，你只需要简单地配置就能生成一条美丽的平均线，
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
markLine: {
data: [{
type: 'average',
name: '平均值'
}],
lineStyle: {
type: 'solid'
}
},
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};显示十条数据，其余数据滚动显示
// 数据
var data = [150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260]
// 获取数据的个数
var dataLen = data.length;
// 控制条长度
function computedPosition(len,dataLen) {
if(dataLen>=10){
return len <= 10 ? 35 : (100 - Math.floor(35 / len * 100));
}else{
return 100;//小于十条数据显示全部
}
}
// 配置dataZoom
var option = {
dataZoom: [
{
type: 'slider',
show: true,
handleSize: 2,
height: '15px',
start:0 ,
end: computedPosition(1,dataLen)//dataLen是x轴返回的数据的个数
},
{
type: 'inside',
start: 40, // start和end来设置滚动条的长度来控制数据的条数
end: 100
},
{
type: 'slider',
show: false,
yAxisIndex: 0,
filterMode: 'empty',
width: 3,
height: '70%',
handleSize: 2,
showDataShadow: false,
left: '93%'
}
],
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: data,
type: 'line'
}
]
}
y轴值与实际值不符
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
]
};问题就出在stack: 'Total'，只要删除就好。
option = {
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
]
};参考：echarts折线图 y轴刻度数值与获取的值不符显示错误问题
折线不同线段不同颜色
var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
visualMap: {
top: 10,
right: 10,
pieces: [
{
gt: 600,
lte: 900,
color: '#096'
}, {
gt: 900,
lte: 1200,
color: '#ffde33'
},
{
gt: 1200,
lte: 1500,
color: '#ff0000'
}
]
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
}
var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
visualMap: {
top: 10,
right: 10,
pieces: [
{min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
{min: 10, max: 200, label: '10 到 200（自定义label）'},
{value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。
{max: 5} // 不指定 min，表示 min 为无限大（-Infinity）。
]
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
}
382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
