柱状图叠加ECharts Gallery

20:11:45图表已生成
代码
option = {
    name: "salemanData",
    backgroundColor: '#000',
    animation: true,
    tooltip: {
      show: false
    },
    grid: {
      left: '24',
      right: '0',
      top: '20',
      bottom: '0',
      x: 0,
      y: 0,
      containLabel: false,
      show: true, // 查看边界
      width: '335px'
    },
    xAxis: {
      show: false,
      type: 'value'
    },
    dataset: {
      dimensions: [
        'name', 'productArea', 'customerArea', 'productValues', 'customerAmount', 'text', 'percent', 'calText'
      ],
      source: [{
        "customerName": "东山13号(C3C)/B瓦",
        "productArea": "6,194m²",
        "unit": "(m²)",
        "name": "5 东山13号(C3C)/B瓦",
        "customerArea": "6194",
        "productValues": "2v",
        "customerAmount": '￥5200',
        "text": 123,
        "calText": 90,
        "percent": 90
      }, {
        "customerName": "东力4号(双面玖龙双面玖龙双面玖龙双面玖龙双面玖龙双面玖龙双面玖龙)",
        "productArea": "6,296m²",
        "unit": "(m²)",
        "name": "4 东力4号(双面玖龙)",
        "customerArea": "6296",
        "productValues": "15",
        "customerAmount": '￥15200',
        "text": 72,
        "calText": 60,
        "percent": 90
      }, {
        "customerName": "东青2号(A5A)/B瓦",
        "productArea": "7,297m²",
        "unit": "(m²)",
        "name": "3 东青2号(A5A)/B瓦",
        "customerArea": "7297",
        "productValues": "b9",
        "customerAmount": '￥25200',
        "text": 67,
        "calText": 54,
        "percent": 90
      }, {
        "customerName": "东青2号(A5A)/E瓦",
        "productArea": "7,440m²",
        "unit": "(m²)",
        "name": "2 东青2号(A5A)/E瓦",
        "customerArea": "7440",
        "productValues": "i5",
        "customerAmount": '￥35200',
        "text": 55,
        "calText": 55,
        "percent": 90
      }, {
        "customerName": "东经2号(A737T)",
        "productArea": "9,002m²",
        "unit": "(m²)",
        "name": "1 东经2号(A737T)",
        "customerArea": "9002",
        "productValues": "mq",
        "customerAmount": '￥65200',
        "text": 44,
        "calText": 44,
        "percent": 90 // 该值的大小会影响进度条的长度，若是100或者100 的倍数则进度条会到底
      }]
    },
    yAxis: [{
      type: "category",
      axisTick: "none",
      axisLine: "none",
      num: 0,
      axisLabel: {
        verticalAlign: "bottom",
        align: "left",
        padding: [-6, 8, 15, 10],
        textStyle: {
          color: "#fff",
          fontSize: 15,
        }
      },
    }, {
      type: "category",
      axisTick: "none",
      axisLine: "none",
      num: 1,
      axisLabel: {
        show: true,
        verticalAlign: "bottom",
        align: "left",
        padding: [0, 8, 15, 0],
        textStyle: {
          color: "#fff",
          fontSize: "16",
          align: 'left'
        },
        formatter: '{x|{value}}',
        rich: {
          x: {
            "width": 60,
            "align": "right",
            "fontSize": 14,
            "color": "#C8F8FD"
          }
        },
      },
    }, {
      num: 2,
      type: "category",
      axisTick: "none",
      axisLine: "none",
      axisLabel: {
        show: true,
        verticalAlign: "top",
        align: "left",
        padding: [-8, 8, 15, 0],
        formatter: '{x|{value}}',
        rich: {
          "x": {
            "width": 60,
            "align": "right",
            "fontSize": 14,
            "color": "#909399"
          }
        },
      },
    }],
    series: [{
      num: 0,
      name: "值",
      type: "bar",
      encode: {
        x: "calText",
        y: "name"
      },
      barWidth: 6,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
            offset: 0,
            color: '#2A84CF'
          }, {
            offset: 1,
            color: '#03FECD'
          }]),
          barBorderRadius: 5
        }
      },
      "z": 3
    }, {
      num: 1,
      name: "外框1",
      type: "bar",
      barGap: "-100%",
      encode: {
        x: "percent",
        y: "calText"
      },
      barWidth: 6,
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: "rgba(255, 255, 255, .2)",
          barBorderRadius: 5
        }
      },
      label: {
        width: 100,
        show: true,
        position: "insideTopRight",
        align: "right",
        padding: [-30, 0, 0, 0],
        fontSize: 16,
        formatter: function (val) {
          // console.log(val)
          let percent = val.data.text + '%';
          return `{a| ${percent}}`;
        },
        rich: {
          a: {
            "color": '#C8F8FD'
          }
        }
      },
      "z": 2
    }, {
      num: 2,
      name: "外框",
      type: "bar",
      barGap: "-100%",
      encode: {
        x: "percent",
        y: "productArea"
      },
      barWidth: 6,
      yAxisIndex: 2,
      itemStyle: {
        normal: {
          color: "rgba(255, 255, 255, .2)",
          opacity: 1,
          barBorderRadius: 5
        }
      },
      "z": 1
    }]
  }
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
