Echarts普通横纵坐标柱形图

最新推荐文章于 2024-08-20 10:49:34 发布

置顶落花别有意流水似无情

最新推荐文章于 2024-08-20 10:49:34 发布

阅读量2.2k

点赞数

文章标签： Echarts柱形图 echarts带有图例柱形图

本文链接：https://blog.csdn.net/weixin_42931825/article/details/82185690

版权

根据横纵坐标来设置柱形图
具体代码如下

 option = {
        color: ['#009CFF'],
        legend: {      //图例样式设置
          data: ['各省企业产量（辆）'],
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal',
          },
          bottom: '15%',
          right: '3%',
        },
        tooltip: {    //鼠标放置在柱状图上的数据提示
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          },
        },
        grid: {      //组件在容器中的样式设置
          left: '22%',
          right: '2%',
          bottom: '35%',
          top: '5%',
          containLabel: false,
        },
        xAxis: {
          data: nameData,
          axisLabel: {    //X轴刻度坐标文字样式
            textStyle: {
              fontSize: 12,
              fontWeight: 'normal',
            },
          },

        },
        yAxis: {
          type: 'value',
          axisLabel: {    //X轴刻度坐标文字样式
            textStyle: {
              fontSize: 14,
              fontWeight: 'normal',
            },
          },
        },
        series: [{
          name: '各省企业产量（辆）',
          data: Data,
          min: 0,
          barWidth: '12',
          type: 'bar',
          barGap: '5%',
        }],
    };