image.png
设置单位到左上方:
title: {
// title为标题部分，有一级标题text，二级标题subtext。这里我们使用二级标题，再修改一下这个二级标题的位置即可出现我们想要的效果了，当然样式也可以通过title.subtextStyle去配置
subtext: unit || "(%)",
left: 0, // 距离左边位置
top: 0, // 距离上面位置
subtextStyle:{ // 设置二级标题的样式
color:"#fff",
fontSize:"7px"
}
},
image.png
设置折线图中不一样的折线拐点.
serise:[{
type: 'line',
symbol: (value, param) => {
// param 内返回了 折线图的一些数据信息,我的是设置最后一个点不一样,所以需要做一个判断
if(param.dataIndex == xData.length-1){
return `image://${BlueCircle}` // react 通过import引入的本地图片
}else{
return 'circle'
}
},
symbolSize: (value, param) => {
if(param.dataIndex == xData.length-1){
return 12
}else{
return 4
}
},
}]
image.png
设置图表中的标注
series:[{
type: 'line',
// 图标上的标注
markPoint: {
data: [{
name: "",
value: averageData[xData.length - 1],
xAxis: xData.length - 1,
yAxis: averageData[xData.length - 1],
symbol:'roundRect',
symbolSize: [30, 19], // 宽,高值
symbolOffset:[25, 0], // x,y 方向上的偏移量
label:{
backgroundColor:'',
borderRadius: 10,
formatter: (obj) =>{
let data = [
`{a|${parseInt(obj.data.value)}}`,
'{b|%}'
].join('')
return data;
},
rich:{
a:{
fontFamily:'play_bold',
color:"#000",
fontSize: 14,
fontWeight:'bold',
},
b:{
fontFamily:'play_bold',
fontWeight:'bold',
fontSize:10,
color:"#000",
padding: [0, 0, 3, 0],
}
}
}
}]
},
}]
image.png
导入图例的个性图标
legend: {
data: [{
name:'平均',
icon:`image://${BlueCircle}`
}, {
name:'予測結果',
icon:`image://${YellowCircle}`
}],
left: 0,
bottom: 0,
x:'left',
y:'bottom',
textStyle:{
color:'#fff',
fontSize: '10px'
},
itemWidth: 15,
itemHeight: 15,
},
image.png
一个柱状图的左右两端都写字儿,用一个透明的 柱子铺到另一个柱子的上面,透明的在右边写字儿,不透明的写左边
series: [
{
type: "bar",
stack: 'sum',
barWidth: 18,
name: "已完成",
data: [100],
label: {
normal: {
show: true,
position: "insideLeft", // 不透明的柱子字写在左边
formatter: "リスク低",
textStyle: {
color: "#000",
fontSize: "10",
fontWeight: 550,
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: '#D5B12C'
}, {
offset: 1,
color: '#5c5331'
}]),
barBorderRadius: [0, 3, 3, 0],
}
}
},
{
type: "bar",
stack: 'a2',
barWidth: 18,
barGap: '-100%',
name: "2",
data: [100],
label: {
normal: {
show: true,
position: "insideRight", // 透明的柱子字写在右边
formatter: "リスク高",
textStyle: {
color: "#000",
fontSize:10,
fontWeight:550
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: 'rgba(1,1,1,0)'
}, {
offset: 1,
color: 'rgba(1,1,1, 0)'
}]),
barBorderRadius: [0, 3, 3, 0],
}
}
}],
