柱状图

271 阅读2分钟
        const option = {
          xAxis: {
            type: "category",
            data: [
              "Mon",
              "Tue",
              "Wed",
              "Thu",
              "Fri",
              "Sat",
              "Sun",
              "Thu",
              "Fri",
              "Sat",
              "Sun",
              "Thu",
              "Fri",
            ],
            tooltip:{}, //鼠标移入弹窗
            toolbox:{}, //工具栏
            // 轴字体
            axisLabel: {
              show: true,
              textStyle: {
                color: colors[2],
              },
            },
            axisLabel: {
                textStyle: {
                  fontSize: 17 //Y轴上字体大小
                }
            },
            // 轴
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
          },
          // 柱子
          color: colors[0],
          yAxis: {
            type: "value",
            // 轴字体
            axisLabel: {
              show: true,
              textStyle: {
                color: colors[2],
              },
            },
            // 轴分割线
            splitLine: {
              lineStyle: {
                color: colors[1],
              },
            },
            // 轴
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
          },
          grid: {
            top: 20,
            bottom: 25,
            left: 45,
            right: 0,
          },
          series: [
            {
              data: [
                120, 200, 350, 680, 720, 110, 130, 680, 720, 310, 130, 720, 310,
              ],
              type: "bar",
              barWidth: 15, //柱宽度
              barCategoryGap:'5%',//柱子之间间距,注意:如果设置了barWidth该属性不起作用
              label: {
                show: true,  //柱子上文字是否显示
              },
            },
          ],
        };

Echarts图表靠右显示(轴和数据都靠右)

在写前端图表时遇到需要将表的Y轴放到右边显示,同时数据也是从右侧开始,常规的是左边,如下图所示为常规的显示:


而最后想要的结果是这样的:


这里直接上代码:

option = {
    title: {
        text: '世界人口总量',
        subtext: '数据来自网络'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        inverse: true,
    },
    yAxis: {
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)'],
        position: 'right',
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};

说明一下:这里只需将Y轴position设置为right,同时要将X轴inverse设置为true。
上下翻转也是同样道理。
如果只需要将y轴放到右侧,只需要设置Y轴position:'right',