echarts在vue里面使用，以及基礎配置。

基礎的圖表和基礎的配置。 效果圖如下：

 

1、安裝圖表依賴包：npm install echarts

2、在main.js里面 引入echarts

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

3、直接使用，配置和代碼如下。

<template>
    <div class="box">
        <div id="myChart" :style="{width: '800px', height: '400px'}"></div>
    </div>
</template>

<script>
export default {
    mounted(){
        this.drawLine();
    },
    methods: {
        drawLine(){
            // 基於准備好的dom，初始化echarts實例
            var myChart = this.$echarts.init(document.getElementById('myChart'));
            // 繪制圖表
            myChart.setOption({
                title: {
                    text: 'ECharts 入門示例'
                },
                //提示框組件，專門配置提示框的。
                tooltip: {
                    trigger:'axis',
                    // 坐標軸指示器配置項。
                    axisPointer:{
                        type:'cross', //指示器樣試
                    }
                },
                //工具欄。內置有導出圖片，數據視圖，動態類型切換，數據區域縮放，重置五個工具。
                toolbox:{
                    feature:{
                        // 動態類型切換,切換圖表
                        magicType: {
                            type: ['line', 'bar', ]
                        },
                        //數據視圖工具，可以展現當前圖表所用的數據，編輯后可以動態更新。
                        dataView:{
                            show:true,  //是否顯示 數據示圖
                            readOnly:false, //是否 直接可以編輯數據。
                        },
                        //保存為圖片的配置
                        saveAsImage: {
                            show: true
                        },
                        //配置項還原
                        restore: {show: true},
                    }
                },
                //圖例組件展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示。
                legend:{
                    data:['實體查閱','電子查閱'] //對應的是name
                },
                //配置X軸
                xAxis: {
                    //坐標軸類型
                    type:'category',
                    //配置類目名稱。 可以逐一設置，具體看文檔
                    data: ['一月', '二月', '三月', '四月', '五月', '六月','七月','八月','九月','十月','十一月','十二月'],
                    //配置 鼠標移入時顯示的 陰影指示器'line' 直線指示器 'shadow' 陰影指示,器  'none' 無指示器
                    axisPointer: {
                        show:true, //show 必須寫，開關的作用
                        type: 'shadow'
                    }
                },
                //配置Y軸
                yAxis: [
                    {
                        type: 'value', //坐標軸類型
                        name: '實體查閱', //名稱
                        min: 0, //最小值
                        max: 100, //最大值
                        interval: 10, //列數
                        axisLabel: {  //坐標軸刻度標簽的相關設置。
                            formatter: '{value}人'  //字符串模板
                        }
                    },
                ],
                //系列列表。每個系列通過 type 決定自己的圖表類型,一個對象表示一個列表
                series: [
                    {
                        name: '實體查閱',
                        type: 'bar',
                        data: [15, 25, 40, 20, 20, 22,23,44,42,25,32,45],
                        itemStyle:{ //圖形的顏色。默認指向全局的option.color 
                            color:'#F60'
                        }
                    },
                    {
                        name: '電子查閱',
                        type: 'line',
                        data: [45, 54, 66, 50, 40, 32,43,76,65,55,87,75]
                    }
                ],
                //圖表的顏色
                color:['#CCC','#AFA', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
            });
            //鼠標事件
            myChart.on('click',function(params){
                console.log(params)
            })
        }
    },
}

</script>

<style scoped>
.box{
    margin-top:50px;
}
</style>

 

4、餅圖配置和說明，以及效果圖

<template>
    <div class="box">
        <div id="pieChart"></div>
    </div>
</template>

<script>
export default {
    mounted(){
        this.chartFn()
    },
    methods:{
        chartFn(){
            // 基於准備好的dom，初始化echarts實例
            var pieChart = this.$echarts.init(document.getElementById('pieChart'));
            pieChart.setOption({
                title:{
                    text:'餅圖', //標題
                    subtext: '練習專用',  //副標題
                    x:'center'  // 位置
                },
                legend: {
                    orient: 'vertical', //圖例列表的布局朝向。
                    left: 'left', //距離左側的距離
                    data: ['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
                },
                series : [
                    {
                        name: '訪問來源',
                        type: 'pie', //類型
                        radius : '60%', //餅圖的半徑
                        center: ['50%', '60%'], //餅圖位置的中心（圓心）坐標，數組的第一項是橫坐標，第二項是縱坐標。
                        data:[
                            {value:335, name:'直接訪問'},
                            {value:310, name:'郵件營銷'},
                            {value:234, name:'聯盟廣告'},
                            {value:135, name:'視頻廣告'},
                            {value:1548, name:'搜索引擎'}
                        ],
                    }
                ]
            })
        }
    }
}
</script>

<style scoped>
.box{
    margin-top:50px;
}
#pieChart{
    width:500px;
    height:500px;
}
</style>