在Vue專案中使用Echarts(三): Echarts中的其他常用圖

weixin_33859844發表於2017-10-07
VueEcharts

一. 前言

在前面兩篇文章中, 我們使用了柱狀圖(bar-chart)和折線圖(line-chart), 這篇文章我們介紹以下另外4類常用的圖,分別是:

  • 餅狀圖
  • 散點圖
  • 雷達圖
  • 儀表盤

下面的程式碼都是將option抽取出來, 分別在對應的.vue元件中進行匯入, 以物件導向的形式, 讓其程式碼的可讀性更強. 所以, 下面的每個圖, 都會分別展示其option.js和.vue兩個檔案的程式碼.

二. 餅狀圖

(一) 效果圖

餅狀圖

(二) option.js配置程式碼

//pie-option.js

export const option = {
    itemStyle: {
        normal: {
            shadowBlur: 200, // 陰影的大小
            shadowOffsetX: 0,// 陰影水平方向上的偏移
            shadowOffsetY: 0,// 陰影垂直方向上的偏移
            shadowColor: 'rgba(0, 0, 0, 0.5)'// 陰影顏色
        }
    },
    backgroundColor: '#2c343c', //設定圖示的背景色,
    label: {
        normal: {
            fontStyle: 'italic' //文字字型的風格
        }
    },
    labelLine: {
        normal: {
            lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)' //設定標籤的視覺引導線
            }
        }
    },
    series:[
        {
            name: '訪問來源', //系列名稱, 用於toolitp的顯示
            type: 'pie', //圖形的型別
            radius: '150', //餅圖的半徑
            roseType: 'angle',  //通過roseType繪製南丁格爾圖
            data: [ //資料
                {value:235, name:'視訊廣告'},
                {value:274, name:'聯盟廣告'},
                {value:310, name:'郵件營銷'},
                {value:335, name:'直接訪問'},
                {value:400, name:'搜尋引擎'}
            ],
            itemStyle: {  //設定每個item的顏色
                normal: {
                    color: function(params) { //params是一個物件, 傳入的是seriesIndex, dataIndex, data, value 等各個引數。
                        var colorList = [
                        '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },
                    shadowBlur: 100,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
}

(三) pie.vue元件

// pie.vue

<template>          
    <div>
        <div id="pieContainer" style="width:500px;height:500px"></div>
    </div>
</template>
        
<script>
    const echarts = require('echarts');
    import {option} from '../echarts/pie-option'
    export default {
        name: '',
        data () {
            return {
                
                }
        },
        mounted() {
            let myChart = echarts.init(document.getElementById('pieContainer'));
            myChart.setOption(option)
        }
    }
</script>
        
<style scoped>
       
</style>

三.散點圖

(一) 效果圖

散點圖效果

(二) option.js配置程式碼

//scatter.js

export const option = {
    title: {
        text: "男性女性身高體重分佈",
        subtext: "抽樣調查來自: Heinz  2003"
    },
    tooltip: {
        trigger: "axis",
        showDelay: 0,
        axisPointer: {
            type: "cross",
            lineStyle: {
                type: "dashed",
                width: 1
            }
        }
    },
    legend: {
        data: ["女性", "男性"]
    },
    xAxis: [
        {
            type: "value",
            power: 1,
            precision: 2,
            scale: true
        }
    ],
    yAxis: [
        {
            type: "value",
            power: 1,
            precision: 2,
            scale: true
        }
    ],
    series: [
        {
            name: "女性",
            type: "scatter",
            data: [[161.2, 51.6], [172.9, 62.5], [153.4, 42], [160, 50], [147.2, 49.8], [168.2, 49.2], [175, 73.2], [157, 47.8], [167.6, 68.8], [159.5, 50.6], [175, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8], [174, 54.5], [173, 59.8], [179.9, 67.3], [170.5, 67.8], [162.6, 61.4]]
        },
        {
            name: "男性",
            type: "scatter",
            data: [[174, 65.6], [164.1, 55.2], [163, 57], [171.5, 61.4], [184.2, 76.8], [174, 86.8], [182, 72], [167, 64.6], [177.8, 74.8], [180.3, 93.2], [180.3, 82.7], [177.8, 58], [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 72], [177.8, 81.8], [180.3, 83.2]]
        }
    ]
}

(三) scatter.vue元件

//scatter.vue

<template>          
    <div>
        <div id="scatterContainer" style="width:600px;height:500px;"></div>
    </div>
</template>
        
<script>
    const echarts = require('echarts');
    import {option} from '../echarts/scatter-option'
    export default {
        name: '',
        data () {
            return {
            
            }
        },
        mounted() {
            let myCharts = echarts.init(document.getElementById('scatterContainer'));
            myCharts.setOption( option )
        }
    }
</script>
        
<style scoped>
       
</style>

四. 雷達圖

(一) 效果圖

雷達圖效果圖

(二)option.js配置程式碼

//radar-option.js

export const option = {
    title: {
        text: "預算 vs 開銷",
        subtext: "純屬虛構"
    },
    tooltip: {
        trigger: "axis"
    },
    legend: {
        orient: "vertical",
        x: "right",
        y: "bottom",
        data: ["預算分配", "實際開銷"]
    },
    toolbox: {
        show: true,
        feature: {
            mark: {
                show: true
            },
            dataView: {
                show: true,
                readOnly: false
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    polar: [  //雷達圖必須設定polar
        {
            indicator: [
                {
                    text: "銷售",
                    max: 6000,
                    min: 0,
                },
                {
                    text: "管理",
                    max: 16000,
                    min: 0
                },
                {
                    text: "資訊科技",
                    max: 30000,
                    min: 0
                },
                {
                    text: "客服",
                    max: 38000,
                    min: 0
                },
                {
                    text: "研發",
                    max: 52000,
                    min: 0
                },
                {
                    text: "市場",
                    max: 25000,
                    min: 0
                }
            ]
        }
    ],
    calculable: true,
    series: [
        {
            name: "",
            type: "radar",
            data: [
                {
                    value: [4300, 10000, 28000, 35000, 50000, 19000],
                    name: "預算分配"
                }
            ]
        },
        {
            name: "",
            type: "radar",
            data: [
                {
                    value: [5000, 14000, 28000, 31000, 42000, 21000],
                    name: "實際開銷"
                }
            ]
        }
    ]
}

(三)radar.vue元件

//radar.vue

<template>          
    <div>
        <div id="radarContainer" style="width:500px;height:500px"></div>
    </div>
</template>
        
<script>
    import {option} from '../echarts/radar-option'
    const echarts = require('echarts');

    export default {
        name: '',
        data () {
            return {
            
            }
        },
        mounted() {
            let myChart = echarts.init(document.getElementById('radarContainer'));
            myChart.setOption(option);
        }
    }
</script>
        
<style scoped>
       
</style>

五. 儀表盤

(一) 效果圖

儀表盤效果圖

(二) option.js配置程式碼

//guage-option.js

export const option = {
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        show: true,
        feature: {
            mark: {
                show: true
            },
            restore: {
                show: true
            },
            saveAsImage: {
                show: true
            }
        }
    },
    series: [
        {
            name: "業務指標",
            type: "gauge",
            detail: {
                formatter: "{value}%"
            },
            data: [
                {
                    value: 50,
                    name: "工作比"
                }
            ]
        }
    ]
}

(三) guage.vue元件

//guage.vue

<template>          
    <div>
        <div id="gaugeContainer" style="width:500px; height:500px"></div>
    </div>
</template>
        
<script>
    const echarts = require('echarts');
    import {option} from '../echarts/gauge-option'
    export default {
        name: '',
        data () {
            return {
            
            }
        },
        mounted() {
            let myChart = echarts.init(document.getElementById('gaugeContainer'))
            myChart.setOption(option);
        }
    }
</script>
        
<style scoped>
       
</style>

相關文章