echarts柱状图常用属性配置

echarts柱状图常用属性配置_第1张图片

 let myChart = this.$echarts.init(document.getElementById("plant-charts"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          formatter: "{c}℃"  //设置鼠标划上提示文字
        },
        grid: {  //设置图标距离
          top: "10",
          left: "30",
          right: "10",
          bottom: "20"
        },
        xAxis: {
          type: "category", 
          data: ["2012", "2013", "2014", "2015", "2016", "2017"],
          axisLabel: {
            textStyle: {
              //文字样式
              color: "#62799C",
              fontSize: "12"
            }
          },

          axisTick: {
            //y轴不显示刻度线,
            show: false
          },
          axisLine: {
            //隐藏y轴线
            show: false
          }
        },
        yAxis: {
          type: "value",
          //show: false,
          axisLabel: {
            textStyle: {
              //文字样式
              color: "#62799C",
              fontSize: "12"
            }
          },
          // 控制网格线是否显示
          splitLine: {
            //  改变轴线颜色
            lineStyle: {
              color: "rgba(0,0,0,0)"
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //隐藏y轴线
            show: false
          }
        },
        series: [
          {
            data: [20, 30, 40, 50, 20, 60],
            type: "bar",
            itemStyle: {
              normal: {
                color: "rgba(160,216,254,1)" //柱状图的背景颜色
              }
            },
            barWidth: 15,  //柱状图宽度
            //barGap: '0%'  //设置同一类中两个柱状图的距离
          }
        ]
      });

 

你可能感兴趣的:(echarts柱状图常用属性配置)