安裝Echart依賴

  npm install echarts -save

在main.js中引入

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

在組件中使用

// 基于準(zhǔn)備好的dom匿级，初始化echarts實(shí)例 寫在 mounted（）里面
let sum_earnings = this.$echarts.init(
  document.getElementById("sum_earnings")
);
this.drawLin( sum_earnings);


//寫在methods方法里面封裝然后在痘绎，在mounted()里面調(diào)用個人比較喜歡這種的寫法，方便封裝
drawLine: function(name) {
 // 繪制圖表
 name.setOption({ '代碼塊（option里面的）' })
}

關(guān)于響應(yīng)式

// 需要在mounted（）方法里面初始化echarts實(shí)例之后調(diào)用
window.onresize = function() {
  實(shí)例的名字.resize();
};

我用到的代碼及注釋

折線圖

折線圖.png

// 繪制圖表
name.setOption({
  // 提示框
  tooltip: {
    trigger: "axis" // 坐標(biāo)觸發(fā)
  },
  // 圖表的標(biāo)注
  legend: {
    // 標(biāo)注前面的形狀這個是圓形
    icon: "circle",
    // 數(shù)據(jù)名稱
    data: ["FIL", "TIC"],
    // y軸的位置 可選 top center bottom x軸同理
    y: "bottom"
  },
  // 圖形在畫布的距離
  grid: {
    top: 10
  },
  // x軸的數(shù)據(jù)
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["01", "02", "03", "04", "05", "06", "07"]
  },
  // y軸的數(shù)據(jù)
  yAxis: {
    type: "value"
  },
  // 折線圖 （寫幾條折線圖就寫幾個對象尔苦；是這個{}對象）
  series: [
    {
      name: "FIL",
      type: "line",
      stack: "總量",
      data: [12, 13, 10, 13, 9, 23, 21],
      color: "#ffb54c"
    },
    {
      name: "TIC",
      type: "line",
      stack: "總量",
      data: [20, 12, 11, 24, 29, 33, 31],
      color: "#9186fc"
    }
  ]
});

餅狀圖（環(huán)形圖）

環(huán)形圖.png

name.setOption({
  // 移入顯示文字
  tooltip: {
      trigger: 'item', // 項(xiàng)目觸發(fā)
      formatter: "{a} <br/>允坚: {c} (7ytxxd2%)"
  },
  // 圖解 可以設(shè)置在圓環(huán)圖的中心
  graphic: {
    type: "text",
    left: "center",
    top: "center",
    z: 2,
    zlevel: 100,
    style: {
      text: "你好",
      fontSize: 36,
      x: 100,
      y: 100,
      textAlign: "center",
      fill: "#f00",
      width: 100,
      height: 100
    }
  },
  // 左側(cè)提示 圖表的標(biāo)注
  legend: {
      orient: 'vertical',
      x: 'left',
      data:['直接訪問','郵件營銷','聯(lián)盟廣告','視頻廣告','搜索引擎']
  },
  series: [
    {
      name: "訪問來源",
      // 顯示成餅狀
      type: "pie",
      // 內(nèi)環(huán)和外環(huán)的大小
      radius: ["50%", "70%"],
      avoidLabelOverlap: false,
      // 主標(biāo)題
      label: {
        normal: {
          // 是否默認(rèn)顯示文字
          show: false
          // position: 'center'
        },
        emphasis: {
          // 移入是否顯示文字
          show: false, // 不顯示
          // 文字類型
          textStyle: {
            fontSize: "30",
            fontWeight: "bold"
          }
        }
      },
      // 是否顯示連接線
      labelLine: {
        normal: {
          show: false
        }
      },
      // 每一個餅狀圖的信息
      data: [
        { value: 335, name: "直接訪問" },
        { value: 310, name: "郵件營銷" },
        { value: 234, name: "聯(lián)盟廣告" },
        { value: 135, name: "視頻廣告" },
        { value: 1548, name: "搜索引擎" }
      ]
    }
  ]
});