在vue下echarts安裝與使用

一、echarts安裝與引用

1.使用npm安裝

npm install echarts --save

2.main.js文件下添加

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.在vue文件下編寫

 <div id="charts-demo" class="echart"></div>

methods:{
		 drawLine() {
      // 基於準備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(document.getElementById("charts-demo"));
      // 繪製圖表
      myChart.setOption({裏面就可複製官方文檔裏的內容});
    },
}

 mounted() {
    this.drawLine();
  }

4.必須設置echarts的寬跟高，不然不顯示

 .echart {
    width: 600px;
    height: 800px;
  }

二、echarts使用&修改參數

以圓環爲例

首先貼出完整的代碼：

series: [
          {
            type: "pie",
            clockWise: false,
            radius: [30, 37],
            itemStyle: dataStyle,
            hoverAnimation: false,
            center: ["15%", "50%"],
            data: [
              {
                value: 35,
                label: {
                  normal: {
                    rich: {
                      a: {
                        color: "#3a7ad5",
                        align: "center",
                        fontSize: 13,
                        fontWeight: "bold"
                      }
                    },
                    formatter: function() {
                      return "95分";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "14",
                      fontWeight: "normal",
                      color: "#fff"
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#03c7cf" // 0% 處的顏色
                        },
                        {
                          offset: 1,
                          color: "#004df4" // 100% 處的顏色
                        }
                      ],
                      globalCoord: false // 缺省爲 false
                    },
                    shadowBlur: 0
                  }
                }
              },
              {
                value: 55,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#0069eb" // 0% 處的顏色
                        },
                        {
                          offset: 1,
                          color: "#004df4" // 100% 處的顏色
                        }
                      ],
                      globalCoord: false // 缺省爲 false
                    }
                  },
                  emphasis: {
                    // color: "#014bf6"
                  }
                }
              },
              {
                value: 10,
                name: "invisible",
                itemStyle: {
                  normal: {
                    color: "#01184d"
                  },
                  emphasis: {
                    // color: "#014bf6"
                  }
                }
              }
            ]
          }
        ]

series: 決定圖表類型的；
clockWise::餅圖的扇區是否是順時針排布。
radius: 設置環形餅狀圖， 第一個百分數設置內圈大小，第二個百分數設置外圈大小。
itemStyle: 設置餅狀圖扇形區域樣式
hoverAnimation: 鼠標放上去是否有動畫效果
center： 設置餅狀圖位置，第一個百分數調水平位置，第二個百分數調垂直位置。

data：
formatter： 餅圖裏中間的文字
position： 文字位置
textStyle: 文字樣式設置
color: 設置餅圖裏漸變色的。