echarts柱状图每根柱子顶部自定义图标，看代码

最新推荐文章于 2024-07-09 13:56:40 发布

handsome_man__

最新推荐文章于 2024-07-09 13:56:40 发布

阅读量2k

点赞数 1

文章标签： echarts javascript 前端 vue.js 开发语言

本文链接：https://blog.csdn.net/handsome_man__/article/details/126158730

版权

找了好多文章资源才弄出来，大家不要嫌弃，随便点个攒就好。
在这里插入图片描述

series: [
          {
            name: "百分比",
            type: "bar",
            barWidth: 26,
            data: [10, 10, 10, 10, 10, 10, 10, 100],
            itemStyle: {
              normal: {
                barBorderRadius: 13,
                //柱体的颜色
                //右，下，左，上（1，0，0，0）表示从正右开始向左渐变
                color: function (params) {
                  var colorList = [
                    ["#c18efe", "#914ee4"],
                    ["#04d4f6", "#5ee9ff"],
                    ["#598bfb", "#5fb2fc"],
                    ["#c18efe", "#914ee4"],
                    ["#04d4f6", "#5ee9ff"],
                    ["#598bfb", "#5fb2fc"],
                    ["#c18efe", "#914ee4"],
                    ["#04d4f6", "#5ee9ff"],
                    ["#598bfb", "#5fb2fc"],
                  ];

                  var colorItem = colorList[params.dataIndex];
                  return new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: colorItem[0],
                      },
                      {
                        offset: 1,
                        color: colorItem[1],
                      },
                    ],
                    false
                  );
                },
              },
            },
            markPoint: {
                // symbol:'circle',
                symbol:"image://"+require('@/assets/symbolImg@2x.png'),
                itemStyle:{
                  normal:{
                    label:{
                      show:true,
                      position: [18,24],
                      fontSize:10,
                      color:'#454E60',
                      formatter: function (param) {
                        // if(param.data.coord[1]>20){
                         return param.data.coord[1]+'%'
                        // }else if (param.data.coord[1]>10){
                        //   return '良好'
                        // } else {
                        //   return '不达标'
                        // }
                        // return param.name
                      }
                    },
                    // color:'#454E60'
                  }
                },
                symbolSize:60,
                symbolOffset:[0,-25],
                data:[
                  {name:'',coord:[0,10]},
                  {name:'',coord:[1,10]},
                  {name:'',coord:[2,10]},
                  {name:'',coord:[3,10]},
                  {name:'',coord:[4,10]},
                  {name:'',coord:[5,10]},
                  {name:'',coord:[6,10]},
                  {name:'',coord:[7,100]},
                ],
              },
          },
        ],