目录
一、 柱状图
1.背景线设置为虚线，lineStyleL里面的type属性为dashed，默认是实线。
2.鼠标放在柱子上的阴影效果，如果用shadow无法设置宽度
3.鼠标放上的tip自定义
4.x轴和y轴顶端的名字，分别在x和y设置nane即可
5.单个柱子设置颜色
6.柱子的宽度和颜色分别是barWidth和itemStyle下的normal下的color
7.效果图
二、折线图
1.折线的颜色和小圆点的颜色，分别是lineStyle下的color和itemStyle下normal下的color，也可以像第二种那样设置，showSymbol: false 为鼠标没放上去时不显示小圆点。如果要平滑的话设置smooth: true。
2.设置两个不同的y坐标，最小值min，最大值max。
3.让整个echarts图铺满div容器
4.效果，有些属性也跟柱状图相通的
三、仪表盘
1.进度条的颜色大小
2.仪表盘的刻度
3.背景环的大小
4.指针
5.刻度的颜色大小和长度
6.数值的颜色大小，距离刻度的距离
7.标题的颜色和位置
8.具体值和单位的颜色大小
9.数值和标题
10.效果
一、 柱状图
1.背景线设置为虚线，lineStyleL里面的type属性为dashed，默认是实线。
yAxis: {
type: 'value',
name: "数量(K)",
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},2.鼠标放在柱子上的阴影效果，如果用shadow无法设置宽度
'line'直线指示器'shadow'阴影指示器'none'无指示器'cross'十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line',
lineStyle: {
color: {
type: 'line',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(238, 238, 238, 0.3 )' // 100% 处的颜色
}, {
offset: 1, color: 'rgba(238, 238, 238, 0.1)' // 0% 处的颜色 #000613','#00334f', '#77f0ff'
}],
},
type: 'solid',
width: 20
},
},
}3.鼠标放上的tip自定义
tooltip: {
trigger: 'axis',
formatter: (val) => {
return `<div style="padding:5px;">
<div style="margin-bottom:10px;">使用次数</div>
<div style="width:6px;height:6px;background:#007DFF;border-radius:50%;display:inline-block;"></div>
<span style="color:#949494;margin:0 5px">资源种类</span>
<span style="color:#000">${val[0].value}</span>
</div>`
}
},4.x轴和y轴顶端的名字，分别在x和y设置nane即可
xAxis: [
{
type: 'category',
name: "月",
data: ['01', '02', '03', '04', '05', '07', '07', '08', '09', '10', '11', '12']
},
],
yAxis: {
type: 'value',
name: "数量(K)",
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},5.单个柱子设置颜色
series: [
{
data: [
120,
{
value: 200,
itemStyle: {
color: '#a90000'
}
},
150,
80,
70,
110,
130
],
type: 'bar'
}
]或者
series: [
{
data: [],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(111, 162, 135, 0.2)'
},
itemStyle: {
normal: {
//这里是颜色
color: function(params) {
//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
var colorList = ['#00A3E0','#FFA100', '#ffc0cb', '#CCCCCC', '#BBFFAA','#749f83', '#ca8622'];
return colorList[params.dataIndex]
}
}
}
}
]6.柱子的宽度和颜色分别是barWidth和itemStyle下的normal下的color
series: [
{
name: "资源种类",
barWidth: 12,
data: [20, 34, 30, 22, 45, 67, 44, 65, 78, 65, 66, 99],
itemStyle: {
normal: {
color: "#025CEA"
}
},
type: 'bar'
},
]7.效果图
二、折线图
1.折线的颜色和小圆点的颜色，分别是lineStyle下的color和itemStyle下normal下的color，也可以像第二种那样设置，showSymbol: false 为鼠标没放上去时不显示小圆点。如果要平滑的话设置smooth: true。
series: [
{
data: [20, 34, 30, 22, 45, 67, 44, 65, 78, 65, 66, 99],
type: 'line',
name: "使用率",
lineStyle: {
color: "#025CEA"
},
itemStyle: {
normal: {
color: "#025CEA",
}
},
showSymbol: false
},
{
data: [19, 45, 23, 56, 76, 87, 37, 55, 79, 32, 45, 54],
type: 'line',
name: "爽约率",
smooth: true,
itemStyle: {
normal: {
color: "#28AA91",
lineStyle: {
color: "#28AA91"
},
}
},
showSymbol: false
},
]2.设置两个不同的y坐标，最小值min，最大值max。
注意：如果想要第二个数据以右边刻度为准，需要在第二个里面加上yAxisIndex: 1,
yAxis: [
{
type: 'value',
name: "人数",
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
},
{
type: 'value',
name: "百分比",
yAxisIndex: 1, //-------------------------->(添加这个属性即可!!!!)
min: 0,
max: 100,
splitLine: {
show: true,
lineStyle: {
type: 'dashed'
}
}
}
],3.让整个echarts图铺满div容器
注意：如果想要横纵坐标都显示要加 containLabel: true
const option = {
// backgroundColor: '#2c343c',
grid: {
top: "10px",
left: "0px",
right: "0px",
bottom: "50px",
containLabel: true
},
}4.效果，有些属性也跟柱状图相通的
5.折线图阴影
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(235, 139, 24, 0.31)",
},
{
offset: 1,
color: "rgba(255, 255, 255, 0)",
},
],
globalCoord: false
},
}
},
三、仪表盘
完整代码，后面的位置可以在这里对比
series: [
{
min: 0,
max: 100,
splitNumber: 4, //仪表盘分割段数
type: 'gauge',
progress: {
show: true,
width: 12,
itemStyle: {
color: "#025CEA"
}
},
axisLine: {
lineStyle: {
width: 12,
}
},
axisTick: {
show: false
},
pointer: {
show: false
},
splitLine: {
// show:false,
length: 10,
lineStyle: {
width: 2,
color: '#949494'
}
},
axisLabel: {
distance: 25,
color: '#949494',
fontSize: 16
},
title: {
offsetCenter: [0, '20%'],
color: "#949494"
},
detail: {
valueAnimation: true,
formatter: (value) => {
return '{value|' + value.toFixed(0) + '}{unit|%}';
},
offsetCenter: [0, '0%'],
rich: {
value: {
fontSize: 50,
fontWeight: 'bolder',
color: '#000'
},
unit: {
fontSize: 20,
color: '#949494',
padding: [0, 0, -20, 10]
}
}
},
data: [
{
value: 80,
name: '出勤率'
}
]
}
]1.进度条的颜色大小
progress: {
show: true,
width: 12,
itemStyle: {
color: "#025CEA"
}
},2.仪表盘的刻度
min: 0,
max: 100,
splitNumber: 4, //仪表盘分割段数3.背景环的大小
axisLine: {
lineStyle: {
width: 12,
}
}4.指针
pointer: {
show: false
},5.刻度的颜色大小和长度
splitLine: {
// show:false,
length: 10,
lineStyle: {
width: 2,
color: '#949494'
}
},6.数值的颜色大小，距离刻度的距离
axisLabel: {
distance: 25,
color: '#949494',
fontSize: 16
},7.标题的颜色和位置
title: {
offsetCenter: [0, '20%'],
color: "#949494"
},8.具体值和单位的颜色大小
detail: {
valueAnimation: true,
formatter: (value) => {
return '{value|' + value.toFixed(0) + '}{unit|%}';
},
offsetCenter: [0, '0%'],
rich: {
value: {
fontSize: 50,
fontWeight: 'bolder',
color: '#000'
},
unit: {
fontSize: 20,
color: '#949494',
padding: [0, 0, -20, 10]
}
}
},9.数值和标题
data: [
{
value: 80,
name: '出勤率'
}
]10.效果
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
