echarts瀑布图

# 效果

# 动态markLine

Alt text

# 配置项

const option = {
  grid: {
    top: 60,
    right: 50,
    left: 5,
    bottom: 0,
    containLabel: true,
  },
  legend: { show: false },
  xAxis: {
    type: "category",
    axisTick: { show: false },
    // boundaryGap: false,
    axisLine: {
      color: "rgba(216, 216, 216, .4)",
      width: 4,
    },
    data: ['碳排放基线', '新能源', '能效提升', '绿证', '碳信用', '其他', '当前碳排量'],
    axisLabel: {
      fontSize: 36,
      color: "rgba(197, 197, 209, 1)",
      fontWeight: 400,
      fontFamily: "BarlowMedium",
      margin: 73,
      interval: 0,
    },
  },
  yAxis: {
    type: "value",
    name: "tCO2e",
    nameTextStyle: {
      color: "rgba(197, 197, 209, 1)",
      fontSize: 32,
      padding: [0, 0, 0, 0],
      fontFamily: "BarlowRegular",
      align: "right",
    },
    nameGap: 23,
    splitNumber: 6,
    axisTick: { show: false },
    axisLine: { show: false },
    splitLine: {
      lineStyle: {
        type: "dashed",
        width: 4,
        color: "rgba(73, 73, 82, .6)",
      },
    },
    axisLabel: {
      fontSize: 36,
      color: "rgba(197, 197, 209, 1)",
      fontWeight: 400,
      fontFamily: "BarlowMedium",
      formatter: (val) => {
        let value = val
        if (value >= 10000) {
          value = (value / 10000).toFixed(1) + '万'
        }
        return value
      }
    },
  },
  series: [
    {
      type: "bar",
      stack: 'Total',
      silent: true,
      itemStyle: {
        opacity: 0
      },
      barWidth: 83,
      data: [],
    },
    {
      type: "bar",
      stack: 'Total',
      itemStyle: {
        borderRadius: [3, 3, 0, 0],
      },
      barWidth: 83,
      data: [],
      markLine: {
        silent: true,
        symbolSize: 0,
        // animation: false,
        lineStyle: {
          width: 3,
          color: 'rgba(117, 118, 133, 1)',
          type: 3,
          dashOffset: 1
        },
      },
    },
  ],
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

# 渲染

import { renderEcharts } from "@/utils/echarts.js";
// 单柱子自定义颜色
const chartColors = [
  { type: "linear", x: 0,y: 1,x2: 0,y2: 0, global: false, colorStops: [
    { offset: 0, color: "rgba(24, 167, 253, 1)" },
    { offset: 0.87, color: "rgba(9, 111, 226, 1)" },
    { offset: 1, color: "rgba(4, 92, 218, 1)" },
  ]},
  { type: "linear", x: 0,y: 1,x2: 0,y2: 0, global: false, colorStops: [
    { offset: 0, color: "rgba(10, 132, 255, 1)" },
    { offset: 1, color: "rgba(0, 219, 255, 1)" },
  ]},
  { type: "linear", x: 0,y: 1,x2: 0,y2: 0, global: false, colorStops: [
    { offset: 0, color: "rgba(17, 137, 146, 1)" },
    { offset: 1, color: "rgba(4, 232, 234, 1)" },
  ]},
  { type: "linear", x: 0,y: 1,x2: 0,y2: 0, global: false, colorStops: [
    { offset: 0, color: "rgba(0, 168, 100, 1)" },
    { offset: 1, color: "rgba(2, 241, 227, 1)" },
  ]},
  { type: "linear", x: 0,y: 1,x2: 0,y2: 0, global: false, colorStops: [
    { offset: 0, color: "rgba(255, 137, 0, 1)" },
    { offset: 1, color: "rgba(255, 199, 92, 1)" },
  ]},
  { type: "linear", x: 0,y: 1,x2: 0,y2: 0, global: false, colorStops: [
    { offset: 0, color: "rgba(57, 40, 250, 1)" },
    { offset: 1, color: "rgba(142, 133, 255, 1)" },
  ]},
  { type: "linear", x: 0,y: 1,x2: 0,y2: 0, global: false, colorStops: [
    { offset: 0, color: "rgba(255, 156, 3, 1)" },
    { offset: 1, color: "rgba(215, 69, 0, 1)" },
  ]},
]
const renderBarChart = () => {
  const data = [
    { label: '碳排放基线', value: 35000 },
    { label: '新能源', value: 5000 },
    { label: '能效提升', value: 7000 },
    { label: '绿证', value: 10000 },
    { label: '碳信用', value: 5000 },
    { label: '其他', value: 5000 },
    { label: '当前碳排量', value: 3000 },
  ]
  option.xAxis.data = data.map(item => item.label)
  // 计算占位柱子的值
  data.map((item, i) => {
    item.placeholderValue = data[0].value - item.value
    for (let j = 1; j < i; j++) {
      item.placeholderValue -= data[j].value
    }
  })
  option.series[0].data = data.map(item => item.placeholderValue)
  // 设置柱子value与color
  option.series[1].data = data.map((item, i) => {
    return {
      value: item.value,
      itemStyle: {
        color: chartColors[i]
      }
    }
  })
  // 动态指示线
  option.series[1].markLine.data = data.map((item, i) => {
    let yAxis = item.placeholderValue
    if (i == 0) {
      yAxis = item.value
    }
    return [
      { yAxis, xAxis: item.label },
      { yAxis, xAxis: data[i+1]?.label }
    ]
  })
  renderEcharts('barChart', option)
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

# 辅助函数

import * as echarts from 'echarts'
/**
 * @description: 渲染图表
 * @param {string} elementId 图表ID
 * @param {object} options 配置项
 * @param {*} custom 返回图表实例用于绑定事件
 * @param {*} update 已创建dom 再次触发数据更新
 * @return {*}
 */
export const renderEcharts = (elementId, options = {}, custom = false, update = false) => {
  let myChart = echarts.getInstanceByDom(document.getElementById(elementId))
  if (update && myChart) {
    myChart.setOption(options);
    return
  } else {
    myChart = echarts.init(document.getElementById(elementId))
  }
  myChart.setOption(options);
  window.addEventListener("resize", () => myChart && myChart.resize());
  if (custom) {
    return myChart 
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

上次更新: 2024/06/19, 16:15:44

← 播放amr格式音频 vue中使用vueuse进行文件导出→