echarts相关属性设置参考一折线图

60 阅读 0 评论 40 点赞

我是靠谱客的博主糟糕早晨，最近开发中收集的这篇文章主要介绍echarts相关属性设置参考一折线图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

option =

{
tooltip: {
trigger: 'axis',
// axisPointer: {
//
type: 'cross',
//
label: {
//
backgroundColor: '#6a7985',
//
},
// },
position(pos: any, params: any, dom: any, rect: any, size: any) { // 鼠标移入时显示的框子的定位
// 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
return {
top: -10,
[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]]: 10,
};
},
},
dataZoom: [　　//x轴是否可以滑动
{
type: 'inside',
start: 50, //从50%开始显示
end: 100,　//到100%的位置　
filterMode: 'empty',
},
],
color: ['#d77b09', '#54f0fd', '#296f04'],　　//想要设置折线图的文字颜色（还是图小图标一起改动？），必须要在这里写
legend: {
data: ['名称1', '名城2', {　　//这里可以单独设置图例的配置
name: '名城3',
textStyle: {
fontSize: 8,
fontWeight: 'bolder',
color: '#296f04',
},
}],
itemWidth: 6, //图例小图标的宽度，宽度和高度都为0时，小图标不显示
itemHeight: 6, //图例小图标的高度
textStyle: {
fontSize: 8, // 设置图例中文字大小
color: ['#d77b09', '#54f0fd', '#296f04'],　　//设置图例文字的颜色，如果是有折线图，必须再在外面写个color，如果这里和外面写了都没效果，就单独设置图标中的data设置
},
itemGap: 0,
top: -6,
},
// toolbox: {
//
feature: {
//
saveAsImage: {},
//
},
// },
grid: {　　//这个是用来设置echarts图标的位置和其他设置
left: '-5%',
// right: '4%',
bottom: '11%',
width: '110%',
top: '20%',
containLabel: true,　//一般都带上这个，否则x,y轴的刻度值会被截取掉
},
xAxis: [　　//x轴的设置
{
type: 'category',
boundaryGap: true, //是否将x轴的刻度显示在中间位置，false表示从0这个位置开始（最边上）
data: data,　　//x轴的数据
axisTick: {　　//是否显示刻度线
show: false,
},
axisLabel: {　　//相关轴上的刻度值的设置，show:false，表示不显示轴上的刻度值
textStyle: { //刻度值的字体样式设置
color: '#e9ecee',
},
fontSize: 8,
margin: 2,　　//刻度值离轴线多远的距离
},
},
],
yAxis: [
{
type: 'value',
// min: 0,
// max: 300, //设置轴的最大值和最小值，一般不规定，可自适应
show: false,　　//设置Y轴不显示（轴线不显示）
splitNumber: 4, // 控制刻度标签的数量
axisTick: {
//轴线的小刻度线
show: false, // y轴的小刻度线。这里是不显示
},
axisLabel: {
//设置刻度值
show: false, //不显示刻度值，如果不显示，下面的刻度值设置就可以不用写了
textStyle: {
// color: '#e9ecee',
},
fontSize: 8,
margin: 5,
},
axisLine: { //设置轴线的配置
show: false,
lineStyle: { //轴线的线条颜色
color: '#9999ae',
},
},
splitLine: {　　//设置网格线，写在哪个轴就是哪个轴的网格线
show: false,
lineStyle: {
type: 'dotted',
// color: ['#aaa', 'red'],
//设置网格线的颜色，可单独设置
color: '#4c4a74',
},
},
},
],
series: [
{
name: '名称1',
type: 'line',
stack: '总量',
symbol: 'none', //取消折线上的小圆点
smooth: true,
//使线条顺滑
itemStyle: { //折线的样式设置
normal: {
lineStyle: { //折线线条的设置
color: '#d77b09',
},
},
},
areaStyle: { //折线的区域样式设置
normal: {
color: new LinearGradient( //区域颜色设置
0, 0, 0, 1,
[
{ offset: 0, color: '#00c9ff' },
{ offset: 1, color: '#0065ff' },
],
),
},
},
data: data,
},
{
name: '名称2',
type: 'line',
stack: '总量',
smooth: true,
symbol: 'none',
itemStyle: {
normal: {
lineStyle: {
color: '#54f0fd',
},
},
},
areaStyle: {
normal: {
color: new LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#00c9ff' },
{ offset: 1, color: '#0065ff' },
],
),
},
},
data: data,
},
{
name: '名称3',
type: 'line',
stack: '总量',
smooth: true,
itemStyle: {
normal: {
color: '296f04', //折线上的小圆点颜色设置
lineStyle: {
color: '#296f04',
// width: 1,
//折线的线条宽度
},
},
},
areaStyle: {
normal: {
color: new LinearGradient(
0, 0, 0, 1,
[
{ offset: 0, color: '#00c9ff' },
{ offset: 1, color: '#0065ff' },
],
),
},
},
label: { //在折线上显示相对应的数值
normal: {
show: true,
position: 'top', //数值的位置
distance: 0,　　//数值距离折线的距离
fontSize: 8,
//数值的字体大小
color: '#296f04', //数值的颜色
},
},
data: data,
},
],
};