echarts柱状图横向排行榜实战开发

先来一张效果图:
在这里插入图片描述

<template>
  <div class="wrapper">
    <h1>
      市场公益考评综合排名
      <span>Physical Yield Analysis</span>
    </h1>
    <div class="paihangbang3_box">
      <div id="paihangbang3" :style="{width: '100%', height: '150px'}"></div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      var weatherIcons = {
        first: "../../../static/img/first.png",
        second: "../../../static/img/second.png",
        third: ".../../../static/img/third.png"
      };
      var paihangOption = {
        title: {},
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },
        grid: {
          x: 95, //左留白
          y: 10, //上留白
          x2: 35, //右留白
          y2: 30 //下留白
        },
        calculable: true,
        dataset: {
          dimensions: ["goods_name", "trade_num"],
          source: [
            { goods_name: "香菇", trade_num: 8 },
            { goods_name: "鳜鱼", trade_num: 8 },
            { goods_name: "冬瓜", trade_num: 7 },
            { goods_name: "鲜鹌鹑蛋", trade_num: 6 },
            { goods_name: "萝卜", trade_num: 6 },
            { goods_name: "枣", trade_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",
            // data: ["泽兰", "人参", "枸杞", "3.紫苏", "2.香叶", "1.车前草"],
            //boundaryGap: ["1%", "1%"],  类目起始和结束两端空白策略
            inverse: true,
            axisLine: {
              lineStyle: {
                color: "rgba(255, 255, 255, 0.2)",
                width: 1
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: function(value, index) {
                  return index <= 2 ? "#FDAD00" : "#fff";
                },
                //更改坐标轴文字颜色
                fontSize: 12 //更改坐标轴文字大小
              },
              formatter: function(value, index) {
                if (index == 0) {
                  return "{first|}" + "  1 " + value;
                } else if (index == 1) {
                  return "{second|}" + "  2 " + value;
                } else if (index == 2) {
                  return "{third|}" + "  3 " + value;
                } else {
                  return "      " + (index + 1) + " " + 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",
            // 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"],
                    ["#1AA291", "#1AA291"],
                    ["#4186EC", "#3AB3FB"]
                  ];
                  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: [220, "20%"],
              color: "#FFF",
              fontSize: "12"
            }
          }
        ]
      };
      let myChart = this.$echarts.init(document.getElementById("paihangbang3"));
      myChart.setOption(paihangOption);
      //   this.$axios({
      //     method: "get",
      //     url: "/api/detection/detection_info/detectRank?mcode="+this.market_id+'&order_type=1',
      //     // data: param
      //     })
      //     .then(res => {
      //         if (res.data.status == 1) {
      //         var data = res.data.data
      //         if (data.length>0) {
      //         data.forEach((item,index) => {
      //         this.paihangOption.yAxis[0].data.push(item.name)
      //         var obj = {}
      //         obj.value = item.percent
      //         obj.itemStyle = {
      //         normal:{
      //         color:this.paihangOption.color[index]
      //         }
      //         }
      //         this.paihangOption.series[0].data.push(obj)
      //         })
      //         this.showTotal()
      //         }
      //         }
      //     }).catch(error => {

      //     })
    }
  }
};
</script>
<style scoped>
.wrapper {
  height: 195px;
  border: 1px solid red;
}
.wrapper .paihangbang3_box {
  background: url("../../../static/img/transdata_bg.png") no-repeat center/100%
    100%;
  padding-top: 20px;
  transform: translateY(-12px);
}
</style>
  • 2
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
要实现echarts柱状图横向显示,可以通过设置横纵坐标轴的位置和交换数据的方式来实现。首先,隐藏横纵坐标轴和网格线可以使用echarts的配置项进行设置。可以将xAxis和yAxis的show属性设为false来隐藏横纵坐标轴,将splitLine属性设为false来隐藏网格线。 然后,需要将横纵坐标轴的位置进行调整。在横向显示的情况下,需要将横坐标轴显示在图表的左侧,纵坐标轴显示在图表的底部。可以通过设置xAxis的position属性为'top',yAxis的position属性为'left'来实现。 最后,需要交换数据的显示方式,即将原本在纵向柱状图中的数据显示在横向柱状图中。可以通过将series中的type设置为'bar',将xAxis和yAxis的data属性进行互换,来实现柱状图横向显示。 综上所述,要实现echarts柱状图横向显示,可以通过设置横纵坐标轴的位置和交换数据的方式来实现。具体的配置和代码可以参考echarts的文档和示例。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [echarts 折线图 + 柱状图](https://blog.csdn.net/aibujin/article/details/124803493)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值