vue使用ECharts實(shí)現(xiàn)折線圖和餅圖

更新時(shí)間：2021年09月27日 09:54:57 作者：程序員na

這篇文章主要為大家詳細(xì)介紹了vue使用ECharts實(shí)現(xiàn)折線圖和餅圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在開發(fā)后臺(tái)管理項(xiàng)目時(shí)，需要統(tǒng)計(jì)后臺(tái)用戶數(shù)據(jù)，以折線圖和餅圖的形式顯示，這邊采用apache-echarts來(lái)實(shí)現(xiàn)需求。

1.安裝echarts和引入

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

2.使用echarts實(shí)現(xiàn)pie圖

<template>
    <div id="chartPie" class="pie-wrap"></div>
</template>
 
<script>
    import * as echarts from 'echarts';
    require('echarts/theme/macarons');//引入主題
 
    export default {
    data() {
      return {
        chartPie: null
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.drawPieChart();
      })
    },
    methods: {
      drawPieChart() {
        let mytextStyle = {
          color: "#333",                          
          fontSize: 18,                            
        };
        let mylabel = {
          show: true,                 
          position: "right",          
          offset: [30, 40],             
          formatter: ' : {c} (vvxyksv9kd%)',      
          textStyle: mytextStyle
        };
        this.chartPie = echarts.init(document.getElementById('chartPie'),'macarons');
        this.chartPie.setOption({
          title: {
            text: 'Pie Chart',
            subtext: '純屬虛構(gòu)',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/> : {c} (vvxyksv9kd%)",
          },
          legend: {
            data: ['直接訪問(wèn)', '郵件營(yíng)銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎'],
            left:"center",                              
            top:"bottom",                              
            orient:"horizontal",                        
          },
          series: [
            {
              name: '訪問(wèn)來(lái)源',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['50%', '50%'],
              data: [
                {value: 335, name: '直接訪問(wèn)'},
                {value: 310, name: '郵件營(yíng)銷'},
                {value: 234, name: '聯(lián)盟廣告'},
                {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實(shí)現(xiàn)line圖

<template>
    <!-- 為 ECharts 準(zhǔn)備一個(gè)具備大?。▽捀撸┑?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();
      })
    },
    methods: {
      drawLineChart() {
        this.chartLine = echarts.init(this.$el,'shine');// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
        let option = {
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['郵件營(yíng)銷','聯(lián)盟廣告','視頻廣告','直接訪問(wèn)','搜索引擎']
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    axisTick: {
                        show: false
                    },
                    data : ['周一','周二','周三','周四','周五','周六','周日']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisTick: {
                        show: false
                    },
                    name: '（人）'
                }
            ],
            series : [
                {
                    name:'郵件營(yíng)銷',
                    type:'line',
                    stack: '總量',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'聯(lián)盟廣告',
                    type:'line',
                    stack: '總量',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'視頻廣告',
                    type:'line',
                    stack: '總量',
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'直接訪問(wèn)',
                    type:'line',
                    stack: '總量',
                    data:[320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name:'搜索引擎',
                    type:'line',
                    stack: '總量',
                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                }
            ]
        };
        // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
        this.chartLine.setOption(option);
      }
    }
  }
</script>
 
<style lang='less' scope>
    .line-wrap{
        width:50%;
        height:400px;
    }
</style>

4.echarts基礎(chǔ)概念

1）echarts實(shí)例

一個(gè)網(wǎng)頁(yè)中可以創(chuàng)建多個(gè) echarts 實(shí)例，每個(gè) echarts 實(shí)例中可以創(chuàng)建多個(gè)圖表和坐標(biāo)系等等（用 option 來(lái)描述）。準(zhǔn)備一個(gè) DOM 節(jié)點(diǎn)（作為 echarts 的渲染容器），就可以在上面創(chuàng)建一個(gè) echarts 實(shí)例。

2）系列（series）

一組數(shù)值以及他們映射成的圖，一個(gè) 系列包含的要素至少有：一組數(shù)值、圖表類型（series.type）、以及其他的關(guān)于這些數(shù)據(jù)如何映射成圖的參數(shù)。
echarts 里系列類型（series.type）就是圖表類型。系列類型（series.type）至少有：line（折線圖）、bar（柱狀圖）、pie（餅圖）

3）組件（component）

echarts 中至少有這些組件：xAxis（直角坐標(biāo)系 X 軸）、yAxis（直角坐標(biāo)系 Y 軸）、grid（直角坐標(biāo)系底板）、dataZoom（數(shù)據(jù)區(qū)縮放組件）、visualMap（視覺映射組件）、tooltip（提示框組件）、toolbox（工具欄組件）、series（系列）、...

5.echarts常用配置項(xiàng)和API

1）title標(biāo)題組件，包含主標(biāo)題和副標(biāo)題

title: {
    text: 'Pie Chart',//主標(biāo)題文本
    subtext: '純屬虛構(gòu)',//副標(biāo)題文本
    x: 'center',
    textStyle:{//主標(biāo)題樣式
      color: "#333",                          
      fontSize: 18
    },
    subtextStyle:{},//副標(biāo)題樣式
    itemGap: 10,//主副標(biāo)題之間的間距
  }

2）legend圖例組件

legend: {
    left:"center",//圖例組件離容器左側(cè)的距離
    top:"bottom",//圖例組件離容器上側(cè)的距離
    orient:"horizontal",//圖例列表的布局朝向
    itemGap :20,//圖例每項(xiàng)之間的間隔
    formatter: function (name) {//用來(lái)格式化圖例文本，支持字符串模板和回調(diào)函數(shù)兩種形式~~~~
        return 'Legend ' + name;
    },
    icon:'circle',//圖例項(xiàng)的 icon
    data: [
        {
            icon: 'triangle',
            textStyle: {
              color: 'red'
            },
            name: '直接訪問(wèn)' 
        },
        '郵件營(yíng)銷', '聯(lián)盟廣告', '視頻廣告', '搜索引擎'],//圖例的數(shù)據(jù)數(shù)組
  }

3）xAxis直角坐標(biāo)系 grid 中的 x 軸

xAxis : [
        {
            type : 'category',//坐標(biāo)軸類型
            boundaryGap : false,
            axisTick: {//坐標(biāo)軸刻度相關(guān)設(shè)置
                show: false
            },
            data : ['周一','周二','周三','周四','周五','周六','周日']//類目數(shù)據(jù)
        }
    ]

4）yAxis直角坐標(biāo)系 grid 中的 y 軸

yAxis : [
        {
            type : 'value',//坐標(biāo)軸類型,`'value'` 數(shù)值軸，適用于連續(xù)數(shù)據(jù)
            axisTick: {
                show: false
            },
            name: '（人）'
        }
    ]

5）tooltip提示框組件

tooltip : {
    trigger: 'axis',//觸發(fā)類型,'axis'坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會(huì)使用類目軸的圖表中使用
    formatter: "{a} <br/> : {c} (vvxyksv9kd%)",//模板變量有 `{a}`, ``，`{c}`，`vvxyksv9kd`，`{e}`，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等
}

6）series系列列表，每個(gè)系列通過(guò) type 決定自己的圖表類型

A.series-line
 
series : [
    {
        name:'郵件營(yíng)銷',
        type:'line',
        stack: '總量',
        data:[120, 132, 101, 134, 90, 230, 210],//系列中的數(shù)據(jù)內(nèi)容數(shù)組
        areaStyle:{//區(qū)域填充樣式
            color:'red'
        },
        lineStyle:{//線條樣式
            color:'#000'
        },
        emphasis:{//圖形的高亮樣式
            label:{
                color:'red'
            }
        }
    }
]
 
B.series-pie
series : [
    {
      name: '訪問(wèn)來(lái)源',
      type: 'pie',
      radius: ['50%', '70%'],//餅圖的半徑,數(shù)組的第一項(xiàng)是內(nèi)半徑，第二項(xiàng)是外半徑
      center: ['50%', '50%'],//餅圖的中心（圓心）坐標(biāo)，數(shù)組的第一項(xiàng)是橫坐標(biāo)，第二項(xiàng)是縱坐標(biāo)。支持設(shè)置成百分比，設(shè)置成百分比時(shí)第一項(xiàng)是相對(duì)于容器寬度，第二項(xiàng)是相對(duì)于容器高度
      roseType: false,//是否展示成南丁格爾圖，通過(guò)半徑區(qū)分?jǐn)?shù)據(jù)大小
      data: [//系列中的數(shù)據(jù)內(nèi)容數(shù)組
        {value: 335, name: '直接訪問(wèn)'},
        {value: 310, name: '郵件營(yíng)銷'},
        {value: 234, name: '聯(lián)盟廣告'},
        {value: 135, name: '視頻廣告'},
        {value: 1548, name: '搜索引擎'}
      ],
      animationEasing: 'cubicInOut',//初始動(dòng)畫的緩動(dòng)效果
      animationDuration: 2600,//初始動(dòng)畫的時(shí)長(zhǎng)
      label: {           
        emphasis: mylabel//高亮的扇區(qū)和標(biāo)簽樣式
      }
    }

]

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: