Echarts 条形图

最新推荐文章于 2024-07-31 18:24:23 发布

qq_38055742

最新推荐文章于 2024-07-31 18:24:23 发布

阅读量820

点赞数

分类专栏：项目问题可视化文章标签：可视化

本文链接：https://blog.csdn.net/qq_38055742/article/details/103618076

版权

项目问题同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

可视化

2 篇文章 0 订阅

订阅专栏

Echarts 条形图

在这里插入图片描述

var source = [
  ['score', 'amount', 'product'],
  [89.3, 58212, 'Matcha Latte'],
  [57.1, 78254, 'Milk Tea'],
  [74.4, 41032, 'Cheese Cocoa'],
  [50.1, 12755, 'Cheese Brownie'],
  [89.7, 20145, 'Matcha Cocoa'],
  [68.1, 79146, 'Tea'],
  [19.6, 91852, 'Orange Juice'],
  [10.6, 101852, 'Lemon Juice'],
  [32.7, 20112, 'Walnut Brownie'],
].sort((a, b) => {
  return a[1] - b[1];
});

var option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    },
    textStyle: {
      color: '#3c3c3c',
    },
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    extraCssText: 'box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.20); padding: 10px 14px;border-radius: 4px;',
  },
  dataset: {
    source: source,
  },
  grid: {
    containLabel: true,
    left: '1%',
    right: '8%',
    bottom: '2%',
    top: '2%',
  },
  xAxis: {
    name: '',
    show: false,
  },
  yAxis: {
    type: 'category',
    axisLabel: {
      interval: 0,
      color: '#5c5c5c',
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      inside: true,
      show: false,
    },
  },
  visualMap: {
    orient: 'horizontal',
    left: 'center',
    min: 12755,
    max: 101852,
    text: ['高分', '低分'],
    dimension: 1,
    inRange: {
      color: ['#D7DA8B', '#E15457'],
    },
  },
  series: [
    {
      type: 'bar',
      label: {
        show: true,
        position: 'right',
        formatter(val) {
          return '    $' + val.data[1];
        },
        /* rich: {
          text: {
            align: 'left',
            height: 20,
            fontSize: 14,
            verticalAlign: 'middle',
          },
        }, */
      },
      encode: {
        // Map the "amount" column to X axis.
        x: 'amount',
        // Map the "product" column to Y axis
        y: 'product',
      },
      itemStyle: {
        barBorderRadius: 50,
        color: function({ dataIndex }) {
          const colorList = [
            '#3C7EF2',
            '#3E82F3',
            '#4288F4',
            '#448CF4',
            '#4791F4',
            '#4791F4',
            '#4D9CF6',
            '#50A0F6',
            '#53A6F7',
            '#56ABF8',
            '#5AB0F9',
            '#5CB5F9',
            '#60BBFA',
            '#62BFFB',
            '#65C4FB',
            '#67C8FB',
            '#6BCEFC',
            '#6ED3FD',
            '#71D9FD',
            '#75E0FE',
          ];
          return colorList.reverse()[dataIndex > colorList.length - 1 ? colorList.length - 1 : dataIndex];
        },
      },
      barWidth: 10,
    },
  ],
};