• Echarts柱状图配置代码详解，含常用图例代码

    一、初识柱状图

    从echarts官网引入基础的柱状图后，可以看到他有如下的配置项。我们可以改变各个配置项的属性，将图例调整为我们期望的效果。

    二、常用配置项

    因为引入echarts图例后，改变图例的东西都在option配置项中，所以其他部分如引入,获取盒子,挂载盒子等则不过多赘述

    2.1 柱子顶部数据展示  

    操作series 中 itemstyle 的 lable 属性，在lable中自定义顶部展示数据的css样式和数据格式

    1. const yData = [15, 20, 12, 30, 45, 26];
    2. option = {
    3.   xAxis: {
    4.     type: 'category',
    5.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    6.   },
    7.   yAxis: {
    8.     type: 'value'
    9.   },
    10.   series: [
    11.     {
    12.       data: yData,
    13.       type: 'bar',
    14.       showBackground: true,
    15.       label: {
    16.         show: true, // 开启显示
    17.         position: 'top', // 在上方显示
    18.         distance: 15, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效
    19.         verticalAlign: 'middle',
    20.         textStyle: {
    21.           color: '#424656', // 顶部数据的颜色
    22.           fontSize: 14     // 顶部数据的字体大小
    23.         },
    24.         formatter: function (params) {
    25.           // dataIndex是当前柱状图的索引
    26.           let num = yData[params.dataIndex] / 160;
    27.           num = Math.round(num * 100) / 100; // 保留两位小数,不四舍五入
    28.           return (
    29.             yData[params.dataIndex] + '人' + '(' + num + '%' + ')' // 此处return的字符串可根据自身项目需求自定义
    30.           );
    31.         }
    32.       }
    33.     }
    34.   ]
    35. };

    2.2 柱子的颜色

    操作series 中 itemstyle 的 color 属性，即可改变柱状图的颜色 

    1. option = {
    2.   xAxis: {
    3.     type: 'category',
    4.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    5.   },
    6.   yAxis: {
    7.     type: 'value'
    8.   },
    9.   series: [
    10.     {
    11.       data: [15, 20, 12, 30, 45, 26],
    12.       type: 'bar',
    13.       showBackground: true,
    14.       itemStyle:{ 
    15.         color:'green'  // 将柱子颜色改为绿色
    16.       }
    17.     }
    18.   ]
    19. };

     

    1. option = {
    2.   xAxis: {
    3.     type: 'category',
    4.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    5.   },
    6.   yAxis: {
    7.     type: 'value'
    8.   },
    9.   series: [
    10.     {
    11.       data: [15, 20, 12, 30, 45, 26],
    12.       type: 'bar',
    13.       showBackground: true,
    14.       itemStyle: {
    15.         color: {
    16.           type: 'linear',
    17.           x: 0, // 若将此值设为1，表示从右到左渐变
    18.           y: 1, // 若将此值设为1，表示从上到下渐变
    19.           x2: 0, // 左
    20.           y2: 0, // 上
    21.           colorStops: [
    22.             {
    23.               offset: 0,
    24.               color: '#192060' // 0% 处的颜色
    25.             },
    26.             {
    27.               offset: 0.9,
    28.               color: '#00C0FF' // 90% 处的颜色
    29.             }
    30.           ]
    31.         }
    32.       }
    33.     }
    34.   ]
    35. };

     2.3 多根柱子的柱状图

    series[ ]中写一个对象，就是单柱柱状图，写两个对象就是双柱柱状图图，写三个就是三柱，以此类推

    1. option = {
    2.   xAxis: {
    3.     type: 'category',
    4.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    5.   },
    6.   yAxis: {
    7.     type: 'value'
    8.   },
    9.   series: [
    10.     {
    11.       data: [15, 20, 12, 30, 45, 26,36],
    12.       type: 'bar',
    13.       showBackground: true,
    14.       itemStyle: {
    15.         color: {
    16.           type: 'linear',
    17.           x: 0, // 若将此值设为1，表示从右到左渐变
    18.           y: 1, // 若将此值设为1，表示从上到下渐变
    19.           x2: 0, // 左
    20.           y2: 0, // 上
    21.           colorStops: [
    22.             {
    23.               offset: 0,
    24.               color: '#192060' // 0% 处的颜色
    25.             },
    26.             {
    27.               offset: 0.9,
    28.               color: '#00C0FF' // 90% 处的颜色
    29.             }
    30.           ]
    31.         }
    32.       }
    33.     },
    34.     {
    35.       data: [18, 28, 18, 38, 48, 28,32],
    36.       type: 'bar',
    37.       showBackground: true,
    38.       itemStyle: {
    39.         color: {
    40.           type: 'linear',
    41.           x: 0, // 若将此值设为1，表示从右到左渐变
    42.           y: 1, // 若将此值设为1，表示从上到下渐变
    43.           x2: 0, // 左
    44.           y2: 0, // 上
    45.           colorStops: [
    46.             {
    47.               offset: 0,
    48.               color: '#322E28' // 0% 处的颜色
    49.             },
    50.             {
    51.               offset: 0.9,
    52.               color: '#FFD600' // 90% 处的颜色
    53.             }
    54.           ]
    55.         }
    56.       }
    57.     }
    58.   ]
    59. };

     2.4 堆叠柱状图

    操作series 中 itemstyle 的 stack 属性，两个柱状图的 stack属性值相等时，就会叠放

    1.  series: [
    2.     {
    3.       stack: '演示柱状图',  // 两个柱子的 stack值相同时就会堆叠放置
    4.       name: '蓝色柱子', // 这个name需要和 legend下面data里面的 name 对应起来
    5.       data: [15, 20, 12, 30, 45, 26, 36], // 蓝色柱子数据
    6.       type: 'bar', // 类型：柱状图
    7.       barWidth: 40, // 柱子宽度
    8.       showBackground: true, // 是否展示背后的阴影
    9.       itemStyle: {
    10.         color: '#2DC3FB' // 蓝色柱子颜色
    11.       }
    12.     },
    13.     {
    14.       stack: '演示柱状图',   // 两个柱子的 stack值相同时就会堆叠放置
    15.       name: '黄色柱子', // 这个name需要和 legend下面data里面的 name 对应起来
    16.       data: [18, 28, 18, 38, 48, 28, 32], // 黄色柱子数据
    17.       type: 'bar', // 类型：柱状图
    18.       barWidth: 40, // 柱子宽度
    19.       showBackground: false, // 是否展示背后的阴影
    20.       itemStyle: {
    21.         color: '#FDD43C' // 黄色柱子颜色
    22.       }
    23.     }
    24.   ]

     2.5 legend配置项的展示

    操作series 中 itemstyle 的 legedn 属性，即可调试 版块控制器的css样式以及位置等

    1.  option = {
    2.             grid: {
    3.                 //调整图表位置
    4.                 show: false, //是否显示直角坐标系网格
    5.                 top: '15%', // 距离图例顶部的位置，可写百分比，可以写数字
    6.                 right: '8%',
    7.                 bottom: '10%',
    8.                 left: '8%'
    9.             },
    10.             legend: {
    11.                 top: '5%', // 控制 板块控制器的位置
    12.                 right: 'center',
    13.                 // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
    14.                 // itemWidth: 10,  // 设置宽度
    15.                 // itemHeight: 4, // 设置高度
    16.                 itemGap: 40, // 设置两个legend之间的间距
    17.                 data: [
    18.                     {
    19.                         name: '蓝色柱子',  // 这个name需要和 series 里面的 name 对应起来
    20.                         textStyle: {
    21.                             color: '#2DC3FB' // 单独设置某一个图列的颜色
    22.                         }
    23.                     },
    24.                     {
    25.                         name: '绿色柱子',  // 这个name需要和 series 里面的 name 对应起来
    26.                         textStyle: {
    27.                             color: 'green' // 单独设置某一个图列的颜色
    28.                         }
    29.                     }
    30.                 ]
    31.             },
    32.  
    33.             xAxis: {
    34.                 type: 'category',
    35.                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // x轴数据
    36.             },
    37.             yAxis: {
    38.                 type: 'value'
    39.             },
    40.             series: [
    41.                 {
    42.                     name: '蓝色柱子',  // 这个name需要和 legend下面data里面的 name 对应起来
    43.                     data: [15, 20, 12, 30, 45, 26, 36], // 蓝色柱子数据
    44.                     type: 'bar', // 类型：柱状图
    45.                     barWidth: 40, // 柱子宽度
    46.                     showBackground: true,  // 是否展示背后的阴影
    47.                     itemStyle: {
    48.                         color: '#2DC3FB' // 蓝色柱子颜色
    49.                     }
    50.                 },
    51.                 {
    52.                     name: '绿色柱子',  // 这个name需要和 legend下面data里面的 name 对应起来
    53.                     data: [18, 28, 18, 38, 48, 28, 32], // 黄色柱子数据
    54.                     type: 'bar', // 类型：柱状图
    55.                     barWidth: 40, // 柱子宽度
    56.                     showBackground: false,  // 是否展示背后的阴影
    57.                     itemStyle: {
    58.                         color: 'green' // 黄色柱子颜色
    59.                     }
    60.                 }
    61.             ]
    62.         };

    三、常用图例及配置代码

    3.1双柱状图

    1.        option = {
    2.             backgroundColor: '#100C2A', // 背景色
    3.             tooltip: {
    4.                 trigger: "axis",
    5.                 axisPointer: {
    6.                     type: "cross",
    7.                     crossStyle: {
    8.                         color: "#999",
    9.                     },
    10.                 },
    11.             },
    12.             grid: {
    13.                 //调整图表位置
    14.                 show: false, //是否显示直角坐标系网格
    15.                 top: "15%", // 一下数值可为百分比也可为具体像素值
    16.                 right: "8%",
    17.                 bottom: "10%",
    18.                 left: "8%",
    19.             },
    20.             xAxis: [
    21.                 {
    22.                     type: "category",
    23.                     data: ["a", "b", "c", "d", "e", "f"],
    24.                     axisPointer: {
    25.                         type: "shadow",
    26.                     },
    27.                     axisLine: {
    28.                         //横轴样式
    29.                         lineStyle: {
    30.                             color: "#08426D",
    31.                         },
    32.                     },
    33.                     axisLabel: {
    34.                         show: true,
    35.                         textStyle: {
    36.                             color: "#85B0C4",
    37.                         },
    38.                     },
    39.                     axisTick: {
    40.                         show: false, //隐藏刻度线
    41.                     },
    42.                 },
    43.             ],
    44.             yAxis: [
    45.                 {
    46.                     type: "value",
    47.                     // min: 0, 最小值
    48.                     // interval: 20, 两根横轴之间的差值，不太建议手动设置
    49.                     splitLine: {
    50.                         show: true,
    51.                         lineStyle: {
    52.                             color: ["#08426D"],
    53.                             width: 1,
    54.                             type: "solid",
    55.                         },
    56.                         textStyle: {
    57.                             color: "green",
    58.                         },
    59.                     },
    60.                     axisLabel: {
    61.                         show: true,
    62.                         formatter: "{value}",
    63.                         textStyle: {
    64.                             color: "#85B0C4",
    65.                         },
    66.                     },
    67.                 },
    68.             ],
    69.             legend: {
    70.                 top: "5%", // 控制 板块控制器的位置
    71.                 right: "center",
    72.                 // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
    73.                 // itemWidth: 10,  // 设置宽度
    74.                 // itemHeight: 4, // 设置高度
    75.                 itemGap: 40, // 设置间距
    76.                 data: [
    77.                     {
    78.                         name: "A柱子",
    79.                         textStyle: {
    80.                             color: "#fff", // 单独设置某一个图列的颜色
    81.                         },
    82.                     },
    83.                     {
    84.                         name: "B柱子",
    85.                         textStyle: {
    86.                             color: "#fff", // 单独设置某一个图列的颜色
    87.                         },
    88.                     },
    89.                 ],
    90.             },
    91.             series: [
    92.                 {
    93.                     name: "A柱子",
    94.                     type: "bar",
    95.                     barWidth: "15%", // 柱的宽度
    96.                     data: [50, 60, 80, 45, 65, 25],
    97.                     itemStyle: {
    98.                         color: {
    99.                             type: "linear",
    100.                             x: 0, // 右
    101.                             y: 1, // 下
    102.                             x2: 0, // 左
    103.                             y2: 0, // 上
    104.                             colorStops: [
    105.                                 {
    106.                                     offset: 0,
    107.                                     color: "#192060", // 0% 处的颜色
    108.                                 },
    109.                                 {
    110.                                     offset: 0.9,
    111.                                     color: "#00C0FF", // 90% 处的颜色
    112.                                 },
    113.                             ],
    114.                         },
    115.                     },
    116.                     label: {
    117.                         show: true, // 开启显示
    118.                         position: "top", // 在上方显示
    119.                         distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
    120.                         verticalAlign: "middle",
    121.                         textStyle: {
    122.                             // 数值样式
    123.                             color: "#D2CC13",
    124.                             fontSize: 12,
    125.                         },
    126.                     },
    127.                 },
    128.                 {
    129.                     name: "B柱子",
    130.                     type: "bar",
    131.                     barWidth: "15%", // 柱的宽度
    132.                     data: [30, 26, 89, 12, 63, 45],
    133.                     itemStyle: {
    134.                         color: {
    135.                             type: "linear",
    136.                             x: 0, // 右
    137.                             y: 1, // 下
    138.                             x2: 0, // 左
    139.                             y2: 0, // 上
    140.                             colorStops: [
    141.                                 {
    142.                                     offset: 0,
    143.                                     color: "#322E28", // 0% 处的颜色
    144.                                 },
    145.                                 {
    146.                                     offset: 0.9,
    147.                                     color: "#FFD600", // 90% 处的颜色
    148.                                 },
    149.                             ],
    150.                         },
    151.                     },
    152.                     label: {
    153.                         show: true, // 开启显示
    154.                         position: "top", // 在上方显示
    155.                         distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
    156.                         verticalAlign: "middle",
    157.                         textStyle: {
    158.                             // 数值样式
    159.                             color: "#D2CC13",
    160.                             fontSize: 12,
    161.                         },
    162.                     },
    163.                 },
    164.             ],
    165.         };

    3.2 折线图结合柱状图

    1. option = {
    2.             backgroundColor: '#100C2A',
    3.             tooltip: {
    4.                 trigger: "axis",
    5.                 axisPointer: {
    6.                     type: "cross",
    7.                     crossStyle: {
    8.                         color: "#fff",
    9.                     },
    10.                 },
    11.             },
    12.             tooltip: {
    13.                 // 图列提示框，默认不显示
    14.                 show: true,
    15.                 color: "red",
    16.             },
    17.             grid: {
    18.                 //调整图表位置
    19.                 show: false, //是否显示直角坐标系网格
    20.                 top: "15%", // 一下数值可为百分比也可为具体像素值
    21.                 right: "5%",
    22.                 bottom: "10%",
    23.                 left: "10%",
    24.             },
    25.             legend: {
    26.                 top: "5%",
    27.                 data: [
    28.                     {
    29.                         name: "柱子名称",
    30.                         textStyle: {
    31.                             color: "#A9DDEE", // 单独设置某一个图列的颜色
    32.                         },
    33.                     },
    34.                     {
    35.                         name: "折线名称",
    36.                         textStyle: {
    37.                             color: "#A9DDEE", // 单独设置某一个图列的颜色
    38.                         },
    39.                     },
    40.                 ],
    41.             },
    42.             xAxis: [
    43.                 {
    44.                     type: "category",
    45.                     data: ["A类", "B类", "C类", "D类", "E类", "F类", "G类", "H类"],
    46.                     axisPointer: {
    47.                         type: "shadow",
    48.                     },
    49.                     axisLine: {
    50.                         show: false, //横轴样式
    51.                     },
    52.                     axisLabel: {
    53.                         show: true,
    54.                         textStyle: {
    55.                             color: "#85B0C4",
    56.                         },
    57.                     },
    58.                     axisTick: {
    59.                         show: false, //隐藏刻度线
    60.                     },
    61.                 },
    62.             ],
    63.             yAxis: [
    64.                 {
    65.                     type: "value",
    66.                     // min: 0,
    67.                     // max: 250,
    68.                     // interval: 50, // y轴 两刻度之间的差值
    69.                     barWidth: "35%",
    70.                     axisLabel: {
    71.                         formatter: "{value} 个",
    72.                     },
    73.                     splitLine: {
    74.                         show: true,
    75.                         lineStyle: {
    76.                             color: ["#08426D"],
    77.                             width: 1,
    78.                             type: "solid",
    79.                         },
    80.                     },
    81.                     axisLabel: {
    82.                         // y轴 数据格式和颜色
    83.                         show: true,
    84.                         formatter: "{value} 个",
    85.                         textStyle: {
    86.                             color: "#85B0C4",
    87.                         },
    88.                     },
    89.                 },
    90.             ],
    91.             series: [
    92.                 {
    93.                     name: "柱子名称",
    94.                     type: "bar",
    95.                     barWidth: "20%",
    96.                     tooltip: {
    97.                         valueFormatter: function (value) {
    98.                             return value + " 个";
    99.                         },
    100.                     },
    101.                     data: [40, 50, 60, 65, 54, 65, 60, 50],
    102.                     itemStyle: {
    103.                         color: {
    104.                             type: "linear",
    105.                             x: 0, // 右
    106.                             y: 1, // 下
    107.                             x2: 0, // 左
    108.                             y2: 0, // 上
    109.                             colorStops: [
    110.                                 {
    111.                                     offset: 0,
    112.                                     color: "#192F68", // 0% 处的颜色
    113.                                 },
    114.                                 {
    115.                                     offset: 1,
    116.                                     color: "#18E0FD", // 90% 处的颜色
    117.                                 },
    118.                             ],
    119.                         },
    120.                     },
    121.                     label: {
    122.                         show: true, // 开启显示
    123.                         position: "top", // 在上方显示
    124.                         distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
    125.                         verticalAlign: "middle",
    126.                         textStyle: {
    127.                             // 数值样式
    128.                             color: "#F4EC03",
    129.                             fontSize: 12,
    130.                         },
    131.                     },
    132.                 },
    133.                 {
    134.                     name: "折线名称",
    135.                     type: "line",
    136.                     // yAxisIndex: 1,
    137.                     tooltip: {
    138.                         valueFormatter: function (value) {
    139.                             return value + " 个";
    140.                         },
    141.                     },
    142.                     data: [35, 62, 84, 52, 44, 96, 78, 66],
    143.                     itemStyle: {
    144.                         color: {
    145.                             type: "linear",
    146.                             x: 0, // 右
    147.                             y: 1, // 下
    148.                             x2: 0, // 左
    149.                             y2: 0, // 上
    150.                             colorStops: [
    151.                                 {
    152.                                     offset: 0,
    153.                                     color: "#18E0FD", // 0% 处的颜色
    154.                                 },
    155.                                 {
    156.                                     offset: 0.9,
    157.                                     color: "#18E0FD", // 90% 处的颜色
    158.                                 },
    159.                             ],
    160.                         },
    161.                     },
    162.                 },
    163.             ],
    164.         };

    3.3 堆叠柱状图

    1.  option = {
    2.             backgroundColor: '#100C2A',
    3.             tooltip: {
    4.                 trigger: "axis",
    5.                 axisPointer: {
    6.                     type: "cross",
    7.                     crossStyle: {
    8.                         color: "#999",
    9.                     },
    10.                 },
    11.             },
    12.             grid: {
    13.                 //调整图表位置
    14.                 show: false, //是否显示直角坐标系网格
    15.                 top: "15%", // 一下数值可为百分比也可为具体像素值
    16.                 right: "5%",
    17.                 bottom: "10%",
    18.                 left: "8%",
    19.             },
    20.             legend: {
    21.                 top: "5%", // 控制 板块控制器的位置
    22.                 // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
    23.                 // itemWidth: 10,  // 设置宽度
    24.                 // itemHeight: 4, // 设置高度
    25.                 itemGap: 80, // 设置顶部图标间距
    26.                 right: "center",
    27.                 data: [
    28.                     {
    29.                         name: "A柱子的名字",
    30.                         textStyle: {
    31.                             color: "#fff", // 单独设置某一个图列的颜色
    32.                         },
    33.                     },
    34.                     {
    35.                         name: "B柱子的名字",
    36.                         textStyle: {
    37.                             color: "#fff", // 单独设置某一个图列的颜色
    38.                         },
    39.                     },
    40.                 ],
    41.             },
    42.             xAxis: [
    43.                 {
    44.                     type: "category",
    45.                     data: [
    46.                         "1月",
    47.                         "2月",
    48.                         "3月",
    49.                         "4月",
    50.                         "5月",
    51.                         "6月",
    52.                         "7月",
    53.                         "8月",
    54.                         "9月",
    55.                         "10月",
    56.                         "11月",
    57.                         "12月",
    58.                     ],
    59.                     axisPointer: {
    60.                         type: "shadow",
    61.                     },
    62.                     axisLine: {
    63.                         //横轴样式
    64.                         lineStyle: {
    65.                             color: "#08426D",
    66.                         },
    67.                     },
    68.                     axisLabel: {
    69.                         show: true,
    70.                         textStyle: {
    71.                             color: "#85B0C4",
    72.                         },
    73.                     },
    74.                 },
    75.             ],
    76.             yAxis: [
    77.                 {
    78.                     type: "value",
    79.                     splitLine: {
    80.                         show: true,
    81.                         lineStyle: {
    82.                             color: ["#08426D"],
    83.                             width: 1,
    84.                             type: "solid",
    85.                         },
    86.                         textStyle: {
    87.                             color: "green",
    88.                         },
    89.                     },
    90.                     axisLabel: {
    91.                         show: true,
    92.                         formatter: "{value}",
    93.                         textStyle: {
    94.                             color: "#85B0C4",
    95.                         },
    96.                     },
    97.                 },
    98.             ],
    99.             series: [
    100.                 {
    101.                     name: "A柱子的名字",
    102.                     type: "bar",
    103.                     barWidth: "25%", // 设置柱子的宽度
    104.                     stack: "柱子", //同个类目轴上系列配置相同的stack值可以堆叠放置
    105.                     data: [20, 30, 40, 60, 20, 50, 40, 30, 30, 50, 40, 30],
    106.                     itemStyle: {
    107.                         color: {
    108.                             type: "linear",
    109.                             x: 0, // 右
    110.                             y: 1, // 下
    111.                             x2: 0, // 左
    112.                             y2: 0, // 上
    113.                             colorStops: [
    114.                                 {
    115.                                     offset: 0,
    116.                                     color: "#013560", // 0% 处的颜色
    117.                                 },
    118.                                 {
    119.                                     offset: 0.9,
    120.                                     color: "#00F5EE", // 90% 处的颜色
    121.                                 },
    122.                             ],
    123.                         },
    124.                     },
    125.                 },
    126.                 {
    127.                     name: "B柱子的名字",
    128.                     type: "bar",
    129.                     barWidth: "25%", // 设置柱子的宽度
    130.                     stack: "柱子", //同个类目轴上系列配置相同的stack值可以堆叠放置
    131.                     data: [50, 40, 70, 15, 30, 45, 25, 60, 70, 30, 10, 65],
    132.                     itemStyle: {
    133.                         color: {
    134.                             type: "linear",
    135.                             x: 0, // 右
    136.                             y: 1, // 下
    137.                             x2: 0, // 左
    138.                             y2: 0, // 上
    139.                             colorStops: [
    140.                                 {
    141.                                     offset: 0,
    142.                                     color: "#1B2E6E", // 0% 处的颜色
    143.                                 },
    144.                                 {
    145.                                     offset: 0.9,
    146.                                     color: "#00C0FF", // 90% 处的颜色
    147.                                 },
    148.                             ],
    149.                         },
    150.                     },
    151.                     label: {
    152.                         show: true, // 开启显示
    153.                         position: "top", // 在上方显示
    154.                         distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
    155.                         verticalAlign: "middle",
    156.                         textStyle: {
    157.                             // 数值样式
    158.                             color: "#D2CC17",
    159.                             fontSize: 12,
    160.                         },
    161.                     },
    162.                 },
    163.             ],
    164.         };

    四、更多参考

    官方文档

  • 相关阅读:
    分层架构理论基础
    C++中的static变量
    JS算法与树（二）
    ssm整合增删改查
    Postman进阶篇（十）-在pre-request script或test script中使用pm对象访问变量
    JWT 简介与 C# 示例
    微信小程序 23 播放音乐页
    GLSL （2）数据类型
    javaScript正则表达式截取字符串【截取中间、截取前面、截取后面】
    【计算机网络】TCP协议与UDP协议的区别
  • 原文地址：https://blog.csdn.net/m0_74444744/article/details/134479641