echarts加标签和在小区域绘制top图

1.top10图

效果如下：

       // 基于准备好的dom，初始化echarts实例
var toptargetchart = echarts.init(document.getElementById('toptarget'));

// app.title = '坐标轴刻度与标签对齐';

    var weatherIcons = {
        first: "../../../static/img/first.png",
        second: "../../../static/img/second.png",
        third: ".../../../static/img/third.png"
    };
        targetoption = {
            title: {},
            tooltip: {
                trigger: "axis"
            },
            legend: {
                data: []
            },
            grid: {
                x: 50, //左留白
                y: 0, //上留白
                x2: 35, //右留白
                y2: 0, //下留白
            },
            calculable: true,
            dataset: {
                dimensions: ["goods_name", "num"],
                source: [
                    { goods_name: "192.168.3.12", num: 8 },
                    { goods_name: "192.168.3.10", num: 8 },
                    { goods_name: "192.167.3.12", num: 7 },
                    { goods_name: "192.198.3.12", num: 6 },
                    { goods_name: "192.168.2.12", num: 6 },
                    { goods_name: "192.168.3.11", num: 6 },
                    { goods_name: "192.168.3.15", num: 6 },
                    { goods_name: "192.168.3.19", num: 6 },
                    { goods_name: "192.168.3.13", num: 6 },
                    { goods_name: "192.168.3.14", num: 6 },
                ]
            },
            xAxis: [
                {
                    splitLine: {
                        show: false
                    },
                    type: "value",
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.3)",
                            width: 1
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        margin: 100,
                        textStyle: {
                            align: "left",
                            color: "#00FFFF", //更改坐标轴文字颜色
                            fontSize: 10 //更改坐标轴文字大小
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: "category",
                    min:-1,
                    max:10,
                    inverse: true,
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.2)",
                            width: 1
                        }
                    },

                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: function(value, index) {
                                return index <= 3 ? "#FDAD00" : "#fff";
                            },
                            //更改坐标轴文字颜色
                            fontSize: 5 //更改坐标轴文字大小
                        },
                        formatter: function(value, index) {
                            if (index == 1) {
                                return "{first|}" + "  1 " + value;
                            } else if (index == 2) {
                                return "{second|}" + "  2 " + value;
                            } else if (index == 3) {
                                return "{third|}" + "  3 " + value;
                            } else {
                                return "      " + (index ) + " " + value;
                            }
                        },
                        rich: {
                            value: {
                                color: "#fff",
                                fontSize: 12
                            },
                            first: {
                                color: "FDAD00",
                                backgroundColor: {
                                    image: weatherIcons.first
                                }
                            },
                            second: {
                                color: "FDAD00",
                                backgroundColor: {
                                    image: weatherIcons.second
                                }
                            },
                            third: {
                                color: "FDAD00",
                                backgroundColor: {
                                    image: weatherIcons.third
                                }
                            }
                        }
                    }
                }
            ],
            series: [
                {
                    // name:'2011年',
                    type: "bar",
                    //barWidth : 5,
                    // data: [200, 210, 220, 230, 240, 250],
                    itemStyle: {
                        normal: {
                            //每根柱子颜色设置
                            color: function(params) {
                                var _this = this;
                                let colorList = [
                                    ["#E56E6E", "#EFA4A4"],
                                    ["#FEB763", "#F9CF9E"],
                                    ["#00C0DD", "#00C0DD"],
                                    ["#23C83E", "#9BF194"],
                                    ["#D4FC78", "#99E5A2"],
                                    ["#1AA291", "#1AA291"],
                                    ["#C1E3FF", "#ABC7FF"],
                                    ["#4186EC", "#3AB3FB"],
                                    ["#FDEB82", "#F78FAD"],
                                    ["#A16BFE", "#BC3D2F"],
                                ];
                                var index = params.dataIndex;
                                return {
                                    colorStops: [
                                        {
                                            offset: 0.8, //颜色的开始位置
                                            color: colorList[index][0] // 0% 处的颜色
                                        },
                                        {
                                            offset: 0, //颜色的结束位置
                                            color: colorList[index][1] // 100% 处的颜色
                                        }
                                    ]
                                };
                            }
                        }
                    }, //柱状图上显示数据
                    label: {
                        show: "true",
                        position: [180, "20%"],
                        color: "#FFF",
                        fontSize: "12"
                    }
                }
            ]
        };



        // 使用刚指定的配置项和数据显示图表。
toptargetchart.setOption(targetoption);

说明：1.barwidth可以调节柱体宽度，如果不加则自动调节，如果加了过后就按照值显示
2.开始绘制的时候，左边1到10不能完全显示，加了min:-1, max:10,就可以全部显示了。
2.圆形加标签（标签包含后面名字对应的数字）

说明：通常的legend只包含名字，没有名字对应的数字。

legend: {
            orient: 'vertical',
            x: '0',
            y: '0',
            // 设置图例形状
            icon: 'circle',
            itemWidth: 10,  // 设置宽度
            itemHeight: 10, // 设置高度
            textStyle: {
                color: "#fff",
                fontSize: 10,
            },
            formatter: function (params) {
                var legendIndex = 0;
                data.forEach(function (v, i) {
                    if (v.name == params) {
                        legendIndex = i;
                    }
                });
                return params + " " + data[legendIndex].value;
            }
        },

注意⚠️：data一定要在最前面调用，在legend之前，不然没有用。

其中如果后端传过来的数据小数点后面有很多很多位数，只需要保留2位，可以修改为parseFloat(data[legendIndex].value).toFixed(2)