在開發後臺管理專案時，需要統計後臺使用者資料，以折線圖和餅圖的形式顯示，這邊採用apache-echarts來實現需求。

1.安裝echarts和引入

npm install echarts --save
 
import * as echarts from 'echarts';

2.使用echarts實現pie圖

<template>
    <div id="chartPie" class="pie-wrap"></div>
</template>
 
<script>
    import * as echarts from 'echarts';
    require('echarts/theme/macarons');//引入主題
 
    export default {
    data() {
      return {
       www.cppcns.com
 
 chartPie: null
      }
    },mounted() {
      this.$nextTick(() => {
        this.drawPieChart();
      })
    },methods: {
      drawPieChart() {
        let mytextStyle = {
          color: www.cppcns.com"#333",fontSize: 18,};
        let mylabel = {
          show: true,position: "right",offset: [30,40],formatter: '{b} : {c} ({d}%)',textStyle: mytextStyle
        };
        this.chartPie = echarts.init(document.getElementById('chartPie'),'macarons');
        this.chartPie.setOption({
          title: {
            text: 'Pie Chart',subtext: '純屬虛構',x: 'center'
          },tooltip: {
            trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)",},legend: {
            data: ['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎'],left:"center",top:"bottom",orient:"horizontal",series: [
            {
              name: '訪問來源',type: 'pie',radius: ['50%','70%'],center: ['50%','50%'],data: [
                {value: 335,name: '直接訪問'},{value: 310,name: '郵件營銷'},{value: 234,name: '聯盟廣告'},{value: 135,name: '視訊廣告'},{value: 1548,name: '搜尋引擎'}
              ],animationEasing: 'cubicInOut',animationDuration: 2600,label: {           
                emphasis: mylabel
              }
            }
          ]
        });
      }
    }
  }
</script>
 
<style lang='less' scope>
    .pie-wrap{
        width:100%;
        height:400px;
    }
</style>

3.使用echarts實現line圖

<template>
    <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM -->
    <div id="chartLine" class="line-wrap"></div>
</template>
 
<script>
    import * as echarts from 'echarts';
    require('echarts/theme/shine');//引入主題
 
    export default {
    data() {
      return {
        chartLine: null
      }
    },mounted() {
      this.$nextTick(() => {
        this.drawLineChart();
      })
    },meth
 
ods: {
      drawLineChart() {
        this.chartLine = echarts.init(this.$el,'shine');// 基於準備好的dom，初始化echarts例項
        let option = {
            tooltip : {
                trigger: 'axis'
            },legend: {
                data:['郵件營銷','直接訪問','搜尋引擎']
            },calculable : true,xAxis : [
                {
                    type : 'category',boundaryGap : false,axisTick: {
                        show: false
                    },data : ['週一','週二','週三','週四','週五','週六','週日']
                }
            ],yAxis : [
                {
                    type : 'value',name: '（人）'
                }
            ],series : [
                {
                    name:'郵件營銷',type:'line',stack: '總量',data:[120,132,101,134,90,230,210]
                },{
                    name:'聯盟廣告',data:[220,182,191,234,290,330,310]
                },{
                    name:'視訊廣告',data:[150,232,201,154,190,410]
                },{
                    name:'直接訪問',data:[320,332,301,334,390,320]
                },{
                    name:'搜尋引擎',data:[820,932,901,934,1290,1330,1320]
                }
            ]
        };
        // 使用剛指定的配置項和資料顯示圖表
        this.chartLine.setOption(option);
      }
    }
  }
</script>
 
<style lang='less' scope>
    .line-wrap{
        width:50%;
        height:400px;
    }
</style>

4.echarts基礎概念

1）echarts例項

一箇中可以建立多個 echarts 例項，每個 echarts 例項 中可以建立多個圖表和座標系等等（用 option 來描述）。準備一個 DOM 節點（作為 echarts 的渲染容器），就可以在上面建立一個 echarts 例項。

2）系列（series）

一組數值以及他們對映成的圖，一個 系列 包含的要素至少有：一組數值、圖表型別（series.type）、以及其他的關於這些資料如何對映成圖的引數。
echarts 裡系列型別（series.type）就是圖表型別。系列型別（series.type）至少有：line（折線圖）、bar（柱狀圖）、pie（餅圖）

3）元件（component）

echarts 中至少有這些元件：xAxis（直角座標系 X 軸）、yAxis（直角座標系 Y 軸）、grid（直角座標系底板）、dataZoom（資料區縮放元件）、visualMap（視覺對映元件）、tooltip（提示框元件）、toolbox（工具欄元件）、series（系列）、...

5.echarts常用配置項和API

1）title標題元件，包含主標題和副標題

title: {
    text: 'Pie Chart',//主標題文字
    subtext: '純屬虛構',//副標題文字
    x: 'center',textStyle:{//主標題樣式
      color: "#333",fontSize: 18
    },subtextStyle:{},//副標題樣式
    itemGap: 10,//主副標題之間的間距
  }

2）legend圖例元件

legend: {
    left:"center",//圖例元件離容器左側的距離
    top:"bottom",//圖例元件離容器上側的距離
    orient:"horizontal",//圖例列表的佈局朝向
    itemGap :20,//圖例每項之間的間隔
    formatter: function (name) {//用來格式化圖例文字，支援字串模板和回撥函式兩種形式~~~~
        return 'Legend ' + name;
    },icon:'circle',//圖例項的 icon
    data: [
        {
            icon: 'triangle',textStyle: {
              color: 'red'
            },name: '直接訪問' 
        },//圖例的資料陣列
  }

3）xAxis直角座標系 grid 中的 x 軸

xAxis : [
        {
            type : 'category',//座標軸型別
            boundaryGap : false,axisTick: {//座標軸刻度相關設定
                show: false
            },'週日']//類目資料
        }
    ]

4）yAxis直角座標系 grid 中的 y 軸

yAxis : [
        {
            type : 'value',//座標軸型別,`'value'` 數值軸，適用於連續資料
            axisTick: {
                show: false
            },name: '（人）'
        }
    ]

5）tooltip提示框元件

tooltip : {
    trigger: 'axis',//觸發型別,'axis'座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用
    formatter: "{a} <br/>{b} : {c} ({d}%)",//模板變數有 `{a}`,`{b}`，`{c}`，`{d}`，`{e}`，分別表示系列名，資料名，資料值等
}

6）series系列列表，每個系列通過 type 決定自己的圖表型別

A.series-line
 
series : [
    {
        name:'郵件營銷',210],//系列中的資料內容陣列
        areaStyle:{//區域填充樣式
            color:'red'
        },lineStyle:{//線條樣式
            color:'#000'http://www.cppcns.com
        },emphasis:{//圖形的高亮樣式
            label:{
                color:'red'
            }
        }
    }
]
 
B.series-pie
series : [
    {
      name: '訪問來源',//餅圖的半徑,陣列的第一項是內半徑，第二項是外半徑
      center: ['50%',//餅圖的中心（圓心）座標，陣列的第一項是橫座標，第二項是縱座標。支援設定成百分比，設定成百分比時第一項是相對於容器寬度，第二項是相對於容器高度
      roseType: false,//是否展示成南丁格爾圖，通過半徑區分資料大小
      data: [//系列中的資料內容陣列
        {value: 335,name: '搜尋引擎'}
      ],//初始動畫的緩動效果
      animationDuration: 2600,//初始動畫的時長
      label: {           
        emphasis: mylabel//高亮的扇區和標籤樣式
      }
    }

]

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。