1. 程式人生 > >echarts柱狀圖常用屬性配置

echarts柱狀圖常用屬性配置

 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  //柱狀圖寬度
          }
        ]
      });