antv g2 vue 条形图多个

мо仙堡杠把子灬

已于 2023-03-29 09:18:15 修改

阅读量472

点赞数 1

分类专栏： echarts 文章标签： antv g2 做一个有知识的流氓

于 2020-07-21 15:27:31 首次发布

本文链接：https://blog.csdn.net/weixin_43553701/article/details/107489960

版权

echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

乏味的生活,工地里搬砖的我

在这里插入图片描述

chartData: [
        { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
        { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
        { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
        { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
        { name: 'London', 月份: 'May', 月均降雨量: 47 },
        { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
        { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
        { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
        { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
        { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
        { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
        { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
        { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
        { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
        { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
        { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
      ],
drawChart() {
      const _this = this;
      const chart = new Chart({
        container: _this.id,
        autoFit: true,
        height: _this.height,
        width: _this.chartWidth
      });
      chart.data(_this.chartData);

      chart.scale('月均降雨量', {
        nice: true,
      });
      chart.tooltip({
        showCrosshairs: true, // 展示 Tooltip 辅助线
        showMarkers: false,
        shared: true,
      });

      
      chart.legend({
        position: 'top',
        items: [
          { name: '曝光量', value: '曝光量', marker: { symbol: 'square', style: { fill: '#1890FF', r: 10 } } },
          { name: '点击量', value: '点击量', marker: { symbol: 'square', style: { fill: '#8c8c8c', r: 5 } } },
        ],
      });

      chart.coordinate('rect').transpose();
      
      chart
        .interval()
        .position('月份*月均降雨量')
        .color('name')
        .adjust([
          {
            type: 'dodge',
            marginRatio: 0,
          },
        ])
        .label('月均降雨量', {
          style: {
            fill: '#8d8d8d',
          },
          offset: 10,
        });

      chart.interaction('active-region');
      chart.render();
    }