echarts柱狀圖

 

 

vue組件中使用

<template>
  <div>
    //創建一個dom元素用來放echats圖表
    <div id="xline"></div>
  </div>
</template>

　　

script中的

<script>
export default {
  mounted() {
    var chart = this.$echarts.init(document.getElementById("xline"));
    var Colors = ["#10B9E7","#F57474","#56D0E3","#F8B448","#F8B78F"]
    var option = {
     //圖標的表題 
     title: {
        //主標題內容
        text: "技術學習次數",
        //副標題內容
        subtext: "純屬虛構"
      },
       //鼠標移入指定區域的提示框
      tooltip: {
       //移入當前行/列
        trigger: "axis",
       //設置樣式
        axisPointer: {
          type: "shadow"
        }
      },
      //圖表頭部提示
      legend: {
        //提示內容，要和series中name保持一致
        data: [ "條","框"],
        //是否顯示（true顯示/false不顯示）
        show:false
      },
      //網格也就是整個圖表
      grid: {
       //距離左邊的距離
        left: "3%",
       //距離右邊的距離
        right: "4%",
       //距離底部的距離
        bottom: "3%",
        //
        containLabel: true
      },
      //x軸
      xAxis: {
        //不顯示x軸
        show:false
      },
     //y軸
      yAxis: [
          {
        //坐標軸
        type: "category",
        //顯示的左側提示
        data: ["HTML5", "CSS3", "javaScript", "VUE", "NODE"],
        //y軸的線
        axisLine:{
            //設置為不顯示
            show:false
        },
        //y軸線上的標記刻度
        axisTick:{
            //設置為不顯示
            show:false
        },
      },
      {
         //坐標軸
          type:"category",
         //設置為顯示
          show:true,
         //右側顯示的數據
          data:[702,350,610,793,664],
          //同樣不讓y軸線顯示出來
          axisLine:{
              show:false
          },
          //不顯示刻度
          axisTick:{
              show:false
          },
          //設置
          axisLabel:{
              //右側顯示的數據樣式
              textStyle:{
                //字體大小
                fontSize:12,
                //字體顏色
                color:"gray"
              }
          },
      }
      ],
     //具體數據及樣式
      series: [
        {
         //這是顯示條
          name: "條",
         //設置為條狀圖
          type: "bar",
          //具體每一個的數據
          data: [70, 34, 60, 78, 69],
          //單個的樣式
          itemStyle:{
              //通過naomal屬性設置
              normal:{
                  //柱狀圖的邊角弧度
                  barBorderRadius:20,
                  //設置顏色
                  color:function(params){
                      //拿到每一個的下標，然后在Colors數組中選一個顏色
                    //   var num = Colors.length;
                    // console.log(Colors[params.dataIndex])
                      return Colors[params.dataIndex];
                  }
              }
          },
          //
          barCategoryGap:50,
          //柱狀圖的寬度
          barWidth:10,
         //樣式
          label:{
               //設置樣式
              normal:{
                  //顯示
                  show:true,
                  //定位
                  position:"inside",
                   //每個圖上顯示百分比
                  formatter:"{c}%"
              }
          },
           //這是第一個
        yAxisIndex:0,
        //   
        },
        {
          //設置柱狀圖的外框
          name: "框",
          //設置為柱狀
          type: "bar",
           //
          barCategoryGap:50,
          //柱狀圖的寬度
          barWidth:15,
          //每一個的樣式
          itemStyle:{
               //顏色
              color:"none",
               //邊框色
              borderColor:"#00C1DE",
               //border寬度
              borderWidth:3,
               //border的邊角弧度
              barBorderRadius:15
          },
            //柱狀圖的長度
          data: [100,100,100,100,100],
            //第二個堆在第一個上
        yAxisIndex:1,
        }
      ]
    };
    //echarts使用自己定義的數據option
    chart.setOption(option)
  }
};
</script>                         

　　效果圖