关于echarts的项目中遇到的一些问题以及解决办法.

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, 自定义组件