echarts的一些配置和使用
1、共有方法2、饼图显示注释,配置legend3、弧形折线图，配置smooth4、折线图阴影，配置areaStyle5、自定义Y轴，配置axisLabel6、柱状图根据不同的值显示不同颜色，配置itemStyle
1、共有方法
showColumCategory
: (that
, el
, xAxis
, data
, section
) => {
const myChart
= echarts
.init(document
.getElementById(el
));
let option
= {}
option
= {
legend
: {
show
: true,
},
xAxis
: {
type
: 'category',
data
: xAxis
},
yAxis
: {
type
: "value",
max
: section
&& section
[3].scoreTo
,
min
: 0,
splitNumber
: 5,
boundaryGap
: [0, "100%"],
axisLabel
: {
formatter
: function (value
) {
var texts
= [];
let arr
= section
|| []
arr
.find(item
=> {
if (value
> item
.scoreFrom
&& value
< item
.scoreTo
) {
texts
.push(item
.levelName
);
}
})
if (value
== 0) {
texts
.push('无');
}
return texts
;
}
},
},
tooltip
: {
trigger
: "axis",
axisPointer
: {
width
: '200px',
type
: "shadow",
animation
: false
},
},
series
: [{
data
: data
,
type
: "bar",
itemStyle
: {
normal
: {
color
: function (params
) {
let value
= params
.value
let colorArr
= ["#73DEB3FF", "#1980FFCC", "#FEC402CC", "#FF635BCC"]
let length
= section
&& section
.length
|| 0
for (let i
= 0; i
< length
; i
++) {
if (value
> section
[i
].scoreFrom
&& value
< section
[i
].scoreTo
) {
return colorArr
[i
]
}
}
},
label
: {
show
: false
},
}
},
}],
grid
: {
left
: 70,
top
: 45,
right
: 20,
bottom
: 60,
}
};
myChart
.setOption(option
);
that
.charts
.push(myChart
);
window
.addEventListener('resize', () => {
myChart
.resize();
})
},
2、饼图显示注释,配置legend
option
={
legend
: {
data
: this.legend
,
bottom
:0,
left
:'center',
textStyle
:{
color
:'#ffffff',
}
},
}
3、弧形折线图，配置smooth
option
={
series
: [{
data
: data
,
type
: "line",
smooth
: true,
itemStyle
: {
normal
: {
color
: color
,
label
: {
show
: true
}
}
},
}],
}
4、折线图阴影，配置areaStyle
option
={
areaStyle
: {
color
: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset
: 0,
color
: "#8cc3fbc9"
},
{
offset
: 1,
color
: "red"
}
])
}
}
5、自定义Y轴，配置axisLabel
section为传进来的对象数组
option
={
yAxis
: {
type
: "value",
max
: section
&& section
[3].scoreTo
,
min
: 0,
splitNumber
: 5,
boundaryGap
: [0, "100%"],
axisLabel
: {
formatter
: function (value
) {
var texts
= [];
let arr
= section
|| []
arr
.find(item
=> {
if (value
> item
.scoreFrom
&& value
< item
.scoreTo
) {
texts
.push(item
.levelName
);
}
})
if (value
== 0) {
texts
.push('无');
}
return texts
;
}
},
},
}
6、柱状图根据不同的值显示不同颜色，配置itemStyle
section为传进来的对象数组
option
={
series
: [{
data
: data
,
type
: "bar",
itemStyle
: {
normal
: {
color
: function (params
) {
let value
= params
.value
let colorArr
= ["#73DEB3FF", "#1980FFCC", "#FEC402CC", "#FF635BCC"]
let length
= section
&& section
.length
|| 0
for (let i
= 0; i
< length
; i
++) {
if (value
> section
[i
].scoreFrom
&& value
< section
[i
].scoreTo
) {
return colorArr
[i
]
}
}
},
label
: {
show
: false
},
}
},
}],
}
