修改轴线颜色及更改实线
yAxis: [
splitLine: {
lineStyle: {
type: 'soild',
color: '#799ec4',
}
}
]
2. 是否显示刻度
yAxis: [
axisTick: {
show: false
},
]
3. 饼形图去掉指示线及文字
原图
![](https://i-blog.csdnimg.cn/blog_migrate/7ebc1d0c6b4e10a95c5b17c975719839.png)
series: [{
name: "Line 1",
type: "pie",
clockWise: true,
radius: ["40%", "60%"],
center: ["30%", "50%"],
itemStyle: dataStyle,
startAngle: 90,
roundCap: 1,
//指示线
labelLine: {
normal: {
show: false
}
},
//指示文字
label: {
normal: {
show: false
}
},
z: 9,
data: seriesData,
},],
效果
![](https://i-blog.csdnimg.cn/blog_migrate/d681f09f284bd6a26243cbce4b661cd2.png)
4. 饼形图主标题与副标题的样式与位置
let option = {
title: [
{
text: "122",
left: "22%",
top: "40%",
textStyle: {
textAlign: "center",
color: "#fff",
fontSize: fontSize(32),
fontWeight: 400,
},
},
{
subtext: '总数',
left: "25%",
top: "50%",
subtextStyle: {
fontSize: fontSize(12),
fontWeight: 400,
color: "#fff",
},
}
],
}
5. y轴name的位置
yAxis: [{
name: "(mm)",
nameGap: 10,
}]
6. 柱状图柱形上面的文字
![](https://i-blog.csdnimg.cn/blog_migrate/71a773bda4beafcc3decd6411270251d.png)
series: [{
type: "bar",
data: [95, 85, 78, 75, 73, 70, 65, 50, 43],
barWidth: "14",
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#fff",
fontSize: fontSize(10),
},
},
},
},],
7. x轴时间数值格式化 按指定间隔排序
axisLabel: {
formatter: function(value) {
return value + ':' + '00'
},
},
interval:4
8. 设置y轴的最大值
yAxis: {
type: "value",
name: "(A)",
max: function(value) {
return value.max + 50;
},
}
9. y轴文字显示整数
yAxis : {minInterval:1},
10. echarts x轴显示第一个和最后一个中间按间隔显示
option = {
xAxis: {
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisLabel: {
interval: 2, // 每隔2个标签显示一个
showMinLabel: true, // 显示第一个标签
showMaxLabel: true // 显示最后一个标签
}
},
// 其他配置项
series: [{
// 其他配置项
}]
};
11. 修改柱形图同一系列的两根柱子jiange
barGap 控制的是同一系列中两个相邻柱形之间的距离,默认值为 '30%',表示柱形宽度的 30%
series: [
{
name: '柱形一',
type: 'bar',
barGap: '50%', // 两个柱形之间距离为柱形宽度的 50%
data: [10, 20, 30, 40, 50]
},
{
name: '柱形二',
type: 'bar',
barGap: 30, // 两个柱形之间距离为 30 像素
data: [20, 30, 40, 50, 60]
}
]
barCategoryGap 控制的是不同系列之间两个相邻柱形之间的距离,默认值为 '20%',
表示柱形宽度的 20%。如果需要更大的间距,可以设置为一个大于 0 小于 1 的小数,或者是一个像素值
series: [
{
name: '柱形一',
type: 'bar',
barCategoryGap: '50%', // 不同系列之间距离为柱形宽度的 50%
data: [10, 20, 30, 40, 50]
},
{
name: '柱形二',
type: 'bar',
barCategoryGap: 30, // 不同系列之间距离为 30 像素
data: [20, 30, 40, 50, 60]
}
]
12. x轴文字超出变成...
axisLabel: {
margin: 10,
interval: 0,
textStyle: {
color: '#fff',
fontSize: fontSize(12)
},
formatter: function (params) {
var val = "";
var show = 3;
if (params.length > show) {
val = params.substr(0, show) + '...';
return val;
} else {
return params;
}
}
},
13. 折线图的tooltip 显示其他数组中的内容
formatter: function(params) {
let tooltipStr = ''
params.forEach(item => {
if (item.seriesName === 'A基点') {
tooltipStr += `${state.licengweiyi.A.A[item.dataIndex]} : ${item.value} mm<br>`
} else if (item.seriesName === 'B基点') {
tooltipStr += `${state.licengweiyi.B.A[item.dataIndex]} : ${item.value} mm<br>`
}
})
return tooltipStr
}
14. 图表数据区域缩放组件
![](https://i-blog.csdnimg.cn/blog_migrate/0e40ec338333be31cfc352eba317e1af.png)
dataZoom 是一个数组,其中包含两个对象,分别用于定义数据区域的缩放方式。
第一个对象中,type 属性为 'inside',表示内部数据区域缩放;start 和 end 属性分别定义了数据缩放的开始和结束位置,这里的值为 0 和 100000。
第二个对象中,未指定 type 属性,表示该对象用于外部数据区域缩放;start 和 end 属性同样定义了数据缩放的开始和结束位置,这里的值为 0 和 10。
dataZoom: [
{
type: 'inside',
start: 0,
end: 100000
},
{
start: 0,
end: 10
}
],
//与xaixs 同级
15.柱状图添加阴影背景色
// 为柱条添加背景色
// 用 showBackground 开启,并且可以通过 backgroundStyle 配置。
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 1)'
},