I. 给饼图不同的类型添加不同的图标.如下图:
解决方式: 可以通过给series加入两条数据,其中一条就是常规的数据显示,另外一条设置如下;
let randomString = ["a","b","c"];
let symbols = ["symbol1","symbol2","symbol3"]
let rich = {};
symbols.forEach((item, index) => {
rich[randomString[index]] = {
backgroundColor: {
image: item
}
};
});
series: [
{},
{
name: "示例图标",
silent: true,
label: {
position: "inside",
formatter: params => {
return "{" + randomString[params.dataIndex] + "|}";
},
rich
},
}
II. 柱状图分散X轴的两个方向,如下图:
解决方案:可以通过给series中的每一条设置stack属性,第二个中的data设置为负数;
III. 柱状图根据不同的类型或者属性设置不同的颜色,如下图:
解决方案: 这个相对来说比较容易,只需要根据不同的类型或者属性,设置series中data中的每个对象的color就可以了
let differentColors = [];
data.forEach((itemData, itemIndex) => {
itemData.itemStyle = {
color: differentColors[itemIndex]
};
});
IV. 柱状图的极坐标绘制进度图,以及title属性的数组使用,如下图:
解决方案: 实现如图的圆环进度使用的柱状图的极坐标,而不是饼图,我们知道可以给title设置为数组,我们就可以将我们需要的内容写进title实现自己想要的效果,其中圆环上面的白色的点是通过给series另外添加一个pie设置好对应的位置即可; title中的小圆环是通过rich的方式css画出来的;hr也是如此;
//rich中hr和circle
{
left: "center",
top: 165,
text: "{hr|}\n{circle|} 左侧通过rich实现",
textStyle: {
color: "#333",
fontWeight: "normal",
fontSize: 12,
lineHeight: 20,
rich: {
hr: {
borderColor: "#E9E9E9",
width: 148,
borderWidth: 1,
height: 0,
},
circle: {
borderColor: new echarts.graphic.LinearGradient(0,0, 0, 1,[
{
offset: 0,
color: "#6BD0FF",
},
{
offset: 1,
color: "#2B83FF",
},
],false),
width: 10,
height: 10,
borderWidth: 2,
borderRadius: 5,
},
},
},
}
相关: Vue,echarts,bar, pie, 自定义组件