Echart相关属性值
function InitLine() {
return {
backgroundColor: 'rgba(128, 128, 128, 0)', //1.设置背景色,rgba设置透明度0.1
//backgroundColor: '#080b30',
title: {
text: '折线图',//2.图标题
textStyle: { //3.标题文字的相关属性
align: 'center',
color: '#fff',
fontSize: 18
},
//标题上下左右位置
top: '2%',
left: 'left',
},
//4.坐标点鼠标悬浮提示
tooltip: {
show: true,
formatter: '{c}个'//自定义显示格式
// formatter: '{a} <br/>{b} : {c} (%)' a:标题 b:线名 c:y值 ,不加{}的原样输出
},
//5.设置上下左右位置
grid: {
top: '15%',
left: '10%',
right: '5%',
bottom: '15%',
// containLabel: true
},
//设置线提示信息
legend: {
data: ['文科'],
right: "3%",
top: "4%",
textStyle: {
color: "#A1D5FF",
fontSize: 12
},
itemWidth: 12, // 设置宽度
itemHeight: 16, // 设置高度
itemGap: 12 // 设置间距
},
xAxis: [{
type: 'category',
axisLine: {
show: true
},
splitArea: {
// show: true,
color: '#f00',
lineStyle: {
color: '#f00'
},
},
//6.设置x轴坐标间隔和文字颜色
axisLabel: {
color: '#fff',
interval: 0
},
//7.是否显示分割线
splitLine: {
show: false
},
boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
}],
yAxis: [{
type: 'value',
min: 0,
max: 100,
splitNumber: 10,
//8.设置y轴的分割线和颜色
splitLine: { //x轴水平线
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
},
axisLine: {
show: false,
},
//
axisLabel: {
show: true,//显示Y轴坐标值
margin: 8,
textStyle: {
color: '#d1e6eb',
},
},
axisTick: {
show: false,
},
}],
series: [{
name: '',//线所代表名称
type: 'line',//线的类型
// smooth: true, //是否平滑
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbol: 'circle',//点的形状
symbolSize: 8,//形状大小
lineStyle: {//线条设置属性
normal: {
color: "#6c50f3",
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 5,
shadowOffsetX: 5,
},
},
//9.坐标点上显示的文字信息
label: {
show: true,
position: 'top',
textStyle: {
color: '#ffffff', //点上的字体颜色
}
},
//10.线条颜色设置
itemStyle: {
color: "#6c50f3", //点的颜色
// borderColor: "#fff", //点的边框颜色
borderWidth: 3,
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
//11.Y轴填充面积区域
//areaStyle: {
// normal: {
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
// offset: 0,
// color: 'rgba(108,80,243,0.3)'
// },
// {
// offset: 1,
// color: 'rgba(108,80,243,0)'
// }
// ], false),
// shadowColor: 'rgba(108,80,243, 0.9)',
// shadowBlur: 20
// }
//},
data: [12, 23, 22, 20, 25, 14, 20, 17, 18, 19, 22, 25],
}
]
};
}
本文来自博客园,作者:码农阿亮,转载请注明原文链接:https://www.cnblogs.com/wml-it/p/16599742.html
技术的发展日新月异,随着时间推移,无法保证本博客所有内容的正确性。如有误导,请大家见谅,欢迎评论区指正!
开源库地址,欢迎点亮:
GitHub:https://github.com/ITMingliang
Gitee: https://gitee.com/mingliang_it
GitLab: https://gitlab.com/ITMingliang
建群声明: 本着技术在于分享,方便大家交流学习的初心,特此建立【编程内功修炼交流群】,为大家答疑解惑。热烈欢迎各位爱交流学习的程序员进群,也希望进群的大佬能不吝分享自己遇到的技术问题和学习心得!进群方式:扫码关注公众号,后台回复【进群】。
