echarts top5监控图

本文介绍如何利用Echarts将柱状图转化为Top5监控图表,重点在于数据排序和展示样式的设计。
摘要由CSDN通过智能技术生成

用echarts 中的 bar 柱状图改的top5监控

代码:(数据是我自己排序传入data的,这块代码只是像展示样式 )

    const names = ["name1","name2", "name3","name4","name5"]
    const values = [98, 76.77, 55.5, 44, 33, 22]
    const myColor = ['#1089E7', '#FF8E4D', '#56D0E3', '#1089E7', '#F57474']
      const option = {
        // 图标位置
        grid: {
          top: '10%',
          left: '25%',
          right: '15%',
          bottom: '1%'
        },
        tooltip: {
          show: true,
          backgroundColor: '#fff',
          textStyle: {
            fontSize: 12,
            color: '#152934',
            lineHeight: 24
          },
          formatter: function (params) {
            return 
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值