vue 使用echarts以及環形圖的運用實例

時間 2019-11-19

標籤 vue 使用 echarts 以及環形運用實例简体版

原文原文鏈接

安裝echarts依賴

npm install echarts -S


或者使用國內的淘寶鏡像：

一、安裝鏡像vue

npm install -g cnpm --registry=https://registry.npm.taobao.org


二、安裝依賴

cnpm install echarts -S

建立圖表

全局引入

main.js

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Hello.vue

<div id="myChart" :style="{width: '300px', height: '300px'}"></div>

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基於準備好的dom，初始化echarts實例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 繪製圖表
        myChart.setOption({
            title: { text: '在Vue中使用echarts' },
            tooltip: {},
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });
    }
  }
}

注意： 這裏echarts初始化應在鉤子函數mounted()中，這個鉤子函數是在el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用node

看了不少vue中echarts的運用博客，偷了一下懶，以上代碼是參考網友的博客，接下來是我本身實站項目中運用到的示例，項目中用到了大量圖表，這裏只展現部分，運用的是按需引入echarts，只作學習分享參考npm

項目中設計的設計稿比較好看，我寫的代碼還沒通過優化，用到的圖表也有不少類型，話很少少，直接看代碼：echarts

按需引入

上面全局引入會將全部的echarts圖表打包，致使體積過大，因此我以爲最好仍是按需引入。dom

渲染部分函數

<ul>
    <li>
        <div id="add"></div>
        <h3 class="title">新增客戶數</h3>
        <p class="chart-tit"><span class="business">商機客戶數：15</span><span class="deal">成交客戶數：5</span></p>
        <i class="charts-close"></i>
    </li>
    <li>
        <div id="baifang"></div>
        <h3 class="title">客戶拜訪</h3>
        <p class="chart-tit"><span class="daily">平常拜訪：10</span><span class="task">任務拜訪：5</span></p>
        <i class="charts-close"></i>
    </li>
    <li>
        <div id="success"></div>
        <h3 class="title">商機成功率</h3>
        <p class="chart-tit"><span class="conduct">進行中：10</span><span class="suc">成功：5</span><span class="fail">失敗：5</span></p>
        <i class="charts-close"></i>
    </li>
</ul>

js 代碼部分學習

<script>
    let echarts = require('echarts/lib/echarts');
    require('echarts/lib/chart/pie');
    require('echarts/lib/chart/funnel');
    require('echarts/lib/chart/line');
    require('echarts/lib/component/title');      
    require('echarts/lib/component/tooltip');      
    require('echarts/lib/component/legend');      
    require("echarts/lib/component/legendScroll");
    require("echarts/lib/chart/bar");

    export default {
        props: {
            height: {
                type: String,
                default: '251'
            }
        },
        mounted () {
            this.drawLine()
        },
        methods: {
            drawLine() {
                let dom1 = document.getElementById("add"),
                dom2 = document.getElementById("baifang"),
                dom3= document.getElementById("success"),
                dom4= document.getElementById("sale"),
                dom5= document.getElementById("saletop"),
                dom6= document.getElementById("income"),
                myChart1 = echarts.init(dom1),
                myChart2 = echarts.init(dom2),
                myChart3 = echarts.init(dom3),
                myChart4 = echarts.init(dom4),
                myChart5 = echarts.init(dom5),
                myChart6 = echarts.init(dom6),
                option1 = null,
                option2 = null,
                option3 = null,
                option4 = null,
                option5 = null,
                option6 = null;

                option1 = {
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)",
                    },
                    color:['#43DCFF', '#C0EF84','yellow','blueviolet'],
                    legend: {
                        show: false,
                        y: 'bottom',
                        orient : 'horizontal',
                        data:[{
                            name:'商機客戶數',
                            textStyle:{
                                fontSize:12,
                                color:'#677994'
                            },
                            icon: `image://${require('./images/business.png')}`
                        },{
                            name:'成交客戶數',
                            textStyle:{
                                fontSize:12,
                                color:'#677994'
                            },
                            icon: `image://${require('./images/customer.png')}`
                        }]
                    },
                    series: [
                    {
                        name:'新增客戶數',
                        type:'pie',
                        selectedMode: 'single',
                        radius: [0, '30%'],
                        hoverOffset: 0,
                        hoverAnimation: false,
                        tooltip:{
                            show:false
                        },
                        itemStyle:{
                            opacity: 0
                        },
                        label: {
                            normal: {
                                position: 'center',
                                formatter: '{per|{c}}{b|個}\n{a|{b}}\n{hr|}',
                                rich: {
                                    per: {
                                        color: '#0abffd',
                                        fontSize: 28,
                                        lineHeight: 28,
                                        align: 'center'
                                    },
                                    a: {
                                        color: '#999999',
                                        align: 'center',
                                        fontSize: 12                                        
                                    },
                                    b: {
                                        color: '#0abffd',
                                        fontSize: 12,
                                        lineHeight: 40,
                                        align: 'center'
                                    },
                                    hr: {
                                        width: '100%',
                                        height: 0,
                                        alien:'center'
                                    }
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[
                        {
                            value:20,
                            name:'新增客戶數'
                        }
                        ]
                    },
                    {
                        name:'新增客戶數',
                        type:'pie',
                        radius: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        color:['#43DCFF', '#C0EF84'],
                        label: {
                            normal: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    fontSize: '12',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data:[
                        {value:15, name:'商機客戶數'},
                        {value:5, name:'成交客戶數'},
                        ]
                    }
                    ]
                };
　　　　　　　　　// ...這裏省略了大量配置echarts代碼var mycharts =  function(option,chart){
                    if (option && typeof option === "object") {
                        return chart.setOption(option, true);
                    }
                }
                mycharts(option1,myChart1);
                mycharts(option2,myChart2);
                mycharts(option3,myChart3);
                mycharts(option4,myChart4);
                mycharts(option5,myChart5);
                mycharts(option6,myChart6);
            }
        }
    }
</script>