vue H5如何使用AntV F2 分组柱状图及动态设置每条柱体的颜色

const Sk

已于 2024-08-02 17:20:33 修改

阅读量258

点赞数 5

文章标签： javascript 前端 html5 css3 echarts scss sass

于 2024-08-02 16:40:52 首次发布

本文链接：https://blog.csdn.net/sk991123/article/details/140871427

版权

首先看结果

AntV-F2 官网: Antv-F2官网

1.创建容器

<canvas id="myChartForSSZB"
                v-if="myChartForSSZB"
                class="myChart"></canvas>

2.准备数据

//分组柱状图需将两条柱体数据放入一个数组内，根据name解析

 let data = [
//此为第一条柱体数据
{
    "name": "租金收缴率",
    "label": "xx公司",
    "valuex": 99
},
{
    "name": "租金收缴率",
    "label": "xxx公司",
    "valuex": 70
},
//此为第二条柱体数据
{
    "name": "累计欠款占全年租金比列",
    "label": "xx公司",
    "valuex": 99
},
{
    "name": "累计欠款占全年租金比列 ",
    "label": "xxx公司",
    "valuex": 70
},
]

3.antV f2 柱状图的绘制与动态柱体颜色的设置

 const chart = new this.$F2.Chart({
        id: 'rentCollection',
        pixelRatio: window.devicePixelRatio, // 指定分辨率

      })
      // Step 2: 载入数据源
      chart.source(data)
      chart.legend(false)
      // Tooltip 配置
      chart.tooltip({
        // alwaysShow: true,
        showTitle: true, // 展示  tooltip 的标题
        layout: 'vertical',
        offsetY: 20,
        background: {
          radius: 2,
          fill: '#656464',
          opacity: 0.1,
          padding: [6, 10]
        },
        onShow: function onShow (ev) {
//长按柱体的展示
          let items = ev.items
          items[0].name = '当年租金收缴率'
          items[0].value = items[0].value + '%'
          items[1].name = '累计欠款占全年租金占比'
          items[1].value = items[1].value + '%'

        },
        titleStyle: {
          fill: '#656464'
        }, // tooltip 标题的文本样式配置，showTitle 为 false 时不生效
        nameStyle: {
          fill: '#656464'
        }, // tooltip name 项的文本样式配置
        valueStyle: {
          fill: '#656464'
        } // tooltip value 项的文本样式配置
      })
// label文字倾斜显示
      chart.axis('label', {
        label: {
          rotate: -Math.PI / 3,
          textAlign: 'end',
          textBaseline: 'middle'
        }
      })
      chart
        .interval()
        .position('label*valuex')
        .color('valuex*name', (valuex, name) => {
   // 根据value值的不同设置对应颜色，此处业务需求为 仅租金收缴率柱设置动态颜色，其余不做动态设置
          if (name === '租金收缴率') {
            if (valuex >= 90) {
              return '#95f204'
            } else if (valuex >= 75) {
              return '#f59a23'
            } else if (valuex < 75) {
              return '#d9001b'
            }
          } else {
            return '#aaaaaa'
          }

        })
        .adjust({
          type: 'dodge',
          marginRatio: 0.05 // 设置分组间柱子的间距
        });
      chart.render()